-
Notifications
You must be signed in to change notification settings - Fork 1.8k
/
Copy pathrecommend-payment-app.html
131 lines (110 loc) · 3.9 KB
/
recommend-payment-app.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
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="UTF-8">
<title>Recommend a Payment App when User Has No Apps</title>
<!--
If you select to pay with BobPay on this merchant page, it tries to call
`PaymentRequest.show()`, while intercepting the NOT_SUPPORTED_ERR exception. If this
payment method is not supported, it redirects to the download page for BobPay.
-->
<meta name="viewport" content="width=device-width">
<style>
#success,
#legacy {
display: none;
}
</style>
</head>
<body>
<h1>Recommend a Payment App when User Has No Apps</h1>
<div id="intro">
<p>
In this example, if you select to pay with BobPay on this merchant page, it tries to
call <code>PaymentRequest.show()</code>, while intercepting the
<code>NOT_SUPPORTED_ERR exception</code>. If this payment method is not supported,
it redirects to the download page for BobPay.
</p>
<p>
For the purposes of the demo, imagine you have chosen an item and
now you need to check out.
</p>
<button id="checkout-button">Checkout</button>
</div>
<div id="success">
<p>
Payment Request success. Demo complete. No payment has been taken.
</p>
</div>
<div id="legacy">
<p>
The Payment Request API is unsupported or was cancelled or failed.
Here we can proceed with a fallback (not implemented for this demo).
</p>
</div>
<script type="text/javascript">
var checkoutButton = document.getElementById('checkout-button');
var introPanel = document.getElementById('intro');
var successPanel = document.getElementById('success');
var legacyPanel = document.getElementById('legacy');
// Feature detection
if (window.PaymentRequest) {
// Payment Request is supported in this browser, so we can proceed to use it
checkoutButton.addEventListener('click', function() {
var request = new PaymentRequest(buildSupportedPaymentMethodData(),
buildShoppingCartDetails());
request.show().then(function(paymentResponse) {
// Here we would process the payment. For this demo, simulate immediate success:
paymentResponse.complete('success')
.then(function() {
// For demo purposes:
introPanel.style.display = 'none';
successPanel.style.display = 'block';
});
}).catch(function(error) {
if (error.code == DOMException.NOT_SUPPORTED_ERR) {
// BobPay not currently supported. Usually we might now wish to redirect
// to a signup page and we could pass our current URL so it could redirect
// (or link) back to this page afterwards. For this demo, we are just
// redirecting to the BobPay download page.
window.location.href =
'https://bobpay.xyz/#download';
} else {
// Other kinds of errors; cancelled or failed payment. For demo purposes:
introPanel.style.display = 'none';
legacyPanel.style.display = 'block';
}
});
});
} else {
// Payment Request is unsupported
checkoutButton.addEventListener('click', function() {
// For demo purposes:
introPanel.style.display = 'none';
legacyPanel.style.display = 'block';
});
}
function buildSupportedPaymentMethodData() {
return [{
supportedMethods: 'https://emerald-eon.appspot.com/bobpay'
}];
}
function buildShoppingCartDetails() {
// Hardcoded for demo purposes:
return {
id: 'order-123',
displayItems: [
{
label: 'Example item',
amount: {currency: 'USD', value: '1.00'}
}
],
total: {
label: 'Total',
amount: {currency: 'USD', value: '1.00'}
}
};
}
</script>
</body>
</html>