-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtest-checkout.html
122 lines (107 loc) · 4.11 KB
/
test-checkout.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
<!DOCTYPE html>
<html>
<head>
<title>W3C Payment Handler API Test</title>
</head>
<body>
<input class="messageCheckbox" type="checkbox" value="basic-card" name="basic-card" checked> basic-card<br>
<input class="messageCheckbox" type="checkbox" value="https://oceanhuang-github-io-bankoo.herokuapp.com" name="3rd-party" checked> 3rd-party<br>
<div><button id="canMakePaymentButton">CanMakePayment</button></div>
<div><pre id="canMakePaymentResult"></pre></div>
<div><button id="buyButton">Buy</button></div>
<div><pre id="result"></pre></div>
<script type="text/javascript">
function initPaymentRequest() {
var checkedValue = [];
var inputElements = document.getElementsByClassName('messageCheckbox');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue.push(inputElements[i].value);
}
}
let supportedInstruments = [{
supportedMethods: checkedValue,
data: {
merchantName: 'Display name of merchant',
customKey: 'customValue'
},
}];
let details = {
total: {label: 'Donation', amount: {currency: 'USD', value: '55.00'}},
displayItems: [
{
label: 'Original donation amount',
amount: {currency: 'USD', value: '65.00'},
},
{
label: 'Friends and family discount',
amount: {currency: 'USD', value: '-10.00'},
},
],
};
return new PaymentRequest(supportedInstruments, details);
}
/**
* Invokes PaymentRequest.
*
* @param {PaymentRequest} request The PaymentRequest object.
*/
function onBuyClicked(request) {
document.getElementById('result').innerHTML = "";
request.show().then(function(instrumentResponse) {
instrumentResponse.complete('success')
.then(function() {
document.getElementById('result').innerHTML =
instrumentToJsonString(instrumentResponse);
}).catch(function(err) {
console.log(err);
});
})
.catch(function(err) {
console.log(err);
});
}
/**
* Invokes canMakePayment
*
* @param {PaymentRequest} request The PaymentRequest object.
*/
function onCanMakePaymentButtonClicked(request) {
document.getElementById('canMakePaymentResult').innerHTML = "";
if (request.canMakePayment) {
request.canMakePayment().then(function(result) {
document.getElementById('canMakePaymentResult').innerHTML = result;
}).catch(function(err) {
console.log(err);
});
}
}
function instrumentToJsonString(instrument) {
if (instrument.toJSON) {
return JSON.stringify(instrument, undefined, 2);
} else {
return JSON.stringify({
methodName: instrument.methodName,
details: instrument.details,
}, undefined, 2);
}
}
const canMakePaymentButton = document.getElementById('canMakePaymentButton');
const payButton = document.getElementById('buyButton');
canMakePaymentButton.setAttribute('style', 'display: none;');
payButton.setAttribute('style', 'display: none;');
if (window.PaymentRequest) {
payButton.setAttribute('style', 'display: inline;');
canMakePaymentButton.setAttribute('style', 'display: inline;');
canMakePaymentButton.addEventListener('click', function() {
let request = initPaymentRequest();
onCanMakePaymentButtonClicked(request);
});
payButton.addEventListener('click', function() {
let request = initPaymentRequest();
onBuyClicked(request);
});
}
</script>
</body>
</html>