-
Notifications
You must be signed in to change notification settings - Fork 24
/
Copy pathcard.html
149 lines (133 loc) · 6.17 KB
/
card.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!--
card.html
Airwallex Payment Demo - Static HTML. Created by Shirly Chen and Josie Ku.
airwallex-payment-elements Card element integration in Static HTML
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/card.md
-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Airwallex Checkout Playground</title>
<!--
STEP #1: Import airwallex-payment-elements bundle
- You MUST replace the bundle version to the latest NPM version
in order to import the package properly!
-->
<script src="https://checkout.airwallex.com/assets/elements.bundle.min.js"></script>
</head>
<body>
<h1>Card integration</h1>
<!-- Styling example below: Setting container to display nothing when element is not mounted -->
<div id="card-container" style="display: none">
<!-- STEP #3a: Add an empty container for the card element to be injected into -->
<div id="card"></div>
<p id="input-error" style="color: red"></p>
<!-- STEP #3b: Add a submit button to trigger the payment request -->
<button id="submit" disabled="true">Submit</button>
</div>
<!-- Example response message containers -->
<p id="error"></p>
<p id="success">Payment successful!</p>
<script>
try {
// STEP #2: Initialize the Airwallex global context for event communication
Airwallex.init({
env: 'demo', // Setup which Airwallex env('staging' | 'demo' | 'prod') to integrate with
origin: window.location.origin, // Setup your event target to receive the browser events message
});
// STEP #4: Create 'card' element
const card = Airwallex.createElement('card');
// STEP #5: Mount card element
const domElement = card.mount('card');
// STEP #7: Add an event listener to ensure the element is mounted
domElement.addEventListener('onReady', (event) => {
/*
... Handle event
*/
document.getElementById('card-container').style.display = 'block'; // Example: show element when it is mounted
document.getElementById('submit').style.display = 'block'; // Example: show element when it is mounted
console.log('Element is ready', event.detail);
});
// STEP #8: Add an event listener to validate element input
domElement.addEventListener('onChange', (event) => {
const { complete } = event.detail;
document.getElementById('submit').disabled = !complete; // Example: only enable button when element input is completed
});
// STEP #9: Add an event listener to get input focus status
domElement.addEventListener('onFocus', (event) => {
// Customize your input focus style by listen onFocus event
const element = document.getElementById('input-error');
if (element) {
element.innerHTML = ''; // Example: clear input error message
}
});
// STEP #10: Add an event listener to show input error message when finish typing
domElement.addEventListener('onBlur', (event) => {
const { complete } = event.detail;
const { error } = event.detail;
const element = document.getElementById('input-error');
if (element & error) {
element.innerHTML = error.message || JSON.stringify(error); // Example: set input error message
}
});
// STEP #11: Add an event listener to handle errors
domElement.addEventListener('onError', (event) => {
const { error } = event.detail;
document.getElementById('error').style.display = 'block'; // Example: show error
document.getElementById('error').innerHTML = error.message; // Example: set error message
console.error('There was an error', error);
});
} catch (error) {
document.getElementById('error').style.display = 'block'; // Example: show error
document.getElementById('error').innerHTML = error.message; // Example: set error message
console.error('There was an error', error);
}
// STEP #6a: Add a button handler to trigger the payment request
document.getElementById('submit').addEventListener('click', () => {
document.getElementById('error').style.display = 'none'; // Example: hide error
document.getElementById('submit').innerHTML = 'Processing...'; // Example: set submitting state
document.getElementById('submit').disabled = true; // Example: disable button to prevent double submission
Airwallex.confirmPaymentIntent({
element: Airwallex.getElement('card'),
id: 'replace-with-your-intent-id',
client_secret: 'replace-with-your-client-secret',
})
.then((response) => {
// STEP #6b: Listen to the request response
/* Handle confirm response */
document.getElementById('success').style.display = 'block'; // Example: show success message
document.getElementById('submit').innerHTML = 'Submit'; // Example: reset button state
document.getElementById('submit').disabled = false; // Example: reset button state
window.alert(JSON.stringify(response));
})
.catch((response) => {
// STEP #6c: Listen to the error response
/* Handle error response */
document.getElementById('error').style.display = 'block'; // Example: show error message
document.getElementById('error').innerHTML = response.message; // Example: fill in error message
document.getElementById('submit').innerHTML = 'Submit'; // Example: reset button state
document.getElementById('submit').disabled = false; // Example: reset button state
console.error(`There was an error, ${JSON.stringify(response)}`);
});
});
</script>
</body>
<style>
#card {
border: 1px solid #612fff;
border-radius: 5px;
padding: 5px 10px;
width: 400px;
box-shadow: #612fff 0px 0px 0px 1px;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</html>