/
hpp.vue
97 lines (88 loc) · 3.1 KB
/
hpp.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!--
hpp.vue
Airwallex Payment Demo - Vue. Created by Jessica Zhou and Josie Ku.
airwallex-payment-elements Hosted Page Payment integration in Vue.
Comments with "Example" demonstrate how states can be integrated
with the element, they can be removed.
Detailed guidance here: https://github.com/airwallex/airwallex-payment-demo/blob/master/docs/hpp.md
-->
<template>
<div>
<h2>Hosted payment page (HPP) integration</h2>
<!-- STEP #2: Add a checkout button -->
<button @click="redirectHpp()">Redirect to HPP</button>
</div>
</template>
<script>
// STEP #1: Import airwallex-payment-elements package
import { redirectToCheckout, loadAirwallex } from 'airwallex-payment-elements';
// Enter your Payment Intent secret keys here
// More on getting these secrets: https://www.airwallex.com/docs/api#/Payment_Acceptance/Payment_Intents/Intro
const intent_id = 'replace-with-your-intent-id';
const client_secret = 'replace-with-your-client-secret';
const currency = 'replace-with-your-currency';
const mode = 'payment'; // Should be one of ['payment', 'recurring']
const redirectHppForCheckout = () => {
redirectToCheckout({
env: 'demo',
mode: 'payment',
currency,
intent_id, // Required, must provide intent details
client_secret, // Required
successUrl: 'https://www.google.com', // Must be HTTPS sites
failUrl: 'https://www.google.com', // Must be HTTPS sites
// For more detailed documentation at https://github.com/airwallex/airwallex-payment-demo/tree/master/docs#redirectToCheckout
});
};
const redirectHppForRecurring = () => {
redirectToCheckout({
env: 'demo',
mode: 'recurring',
currency,
client_secret, // Required
recurringOptions: {
card: {
next_triggered_by: 'customer',
merchant_trigger_reason: 'scheduled',
currency,
},
},
successUrl: 'https://www.google.com', // Must be HTTPS sites
failUrl: 'https://www.google.com', // Must be HTTPS sites
// For more detailed documentation at https://github.com/airwallex/airwallex-payment-demo/tree/master/docs#redirectToCheckout
});
};
// STEP #2: Initialize Airwallex on click with appropriate production environment and other configurations
loadAirwallex({
env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
});
// STEP #3: Add a button handler to trigger the redirect to HPP
const redirectHpp = async () => {
try {
// STEP #3a: Initialize Airwallex on click with appropriate production environment and other configurations
await loadAirwallex({
env: 'demo', // Can choose other production environments, 'staging | 'demo' | 'prod'
});
// STEP #3b: Redirect the customer to Airwallex checkout
if (mode === 'payment') {
redirectHppForCheckout();
} else if (mode === 'recurring') {
redirectHppForRecurring();
}
} catch (error) {
// STEP #4: Catch error events
/**
* ... Handle event on error
*/
window.alert('There was an error with HPP redirection', error);
}
};
export default {
name: 'Hpp',
data() {
return {
redirectHpp,
};
},
};
</script>