-
Notifications
You must be signed in to change notification settings - Fork 41
/
Copy pathindex.html
213 lines (190 loc) · 7.93 KB
/
index.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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://js.tappaysdk.com/sdk/tpdirect/v5.19.2"></script>
<title>Payment Request Button Test</title>
<style>
.ui.meesage {
transition: all .5s ease
}
.container {
text-align: center;
}
#pr-button {
height: 60px;
position: relative;
max-width: 300px;
height: 40px;
margin: 30px auto;
}
.ui.grid.container {
padding-top: 42px;
}
pre {
overflow-x: auto;
text-align: left;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="ui grid container">
<div class="column">
<h1>TapPay PaymentRequest Button Demo</h1>
<div>
<button class="ui button" id="pay-button">Custom Payment Button</button>
</div>
<div class="ui negative message hidden" id="browser-no-support-message">
<div class="header">瀏覽器不支援 PaymentRequest</div>
</div>
<div class="ui negative message hidden get-prime-status" id="get-prime-failed-message">
<div class="header">get prime failed</div>
<p></p>
</div>
<div class="ui success message hidden get-prime-status" id="get-prime-success-message">
<div class="header">get prime success</div>
<p></p>
</div>
<div class="hidden" id="get-prime-result">
<h2 class="ui top attached header">getPrimeResult</h5>
<div class="ui buttom attached segment">
<pre><code></code></pre>
</div>
</div>
<div class="hidden" id="curl">
<h2 class="ui top attached header">Use following data to send to server.</h5>
<div class="ui buttom attached segment">
<pre><code></code></pre>
</div>
</div>
</div>
</div>
<script>
var data = {
supportedNetworks: ['MASTERCARD', 'DISCOVER', 'VISA'],
supportedMethods: ['card', 'pay_with_google', 'apple_pay'],
displayItems: [{
label: 'iPhone8',
amount: {
currency: 'TWD',
value: '1.00'
}
}],
total: {
label: '付給 TapPay',
amount: {
currency: 'TWD',
value: '1.00'
}
},
shippingOptions: [{
id: "standard",
label: "🚛 Ground Shipping (2 days)",
// apple pay only
detail: 'Estimated delivery time: 2 days',
amount: {
currency: "TWD",
value: "5.00"
}
},
{
id: "drone",
label: "🚀 Drone Express (2 hours)",
// apple pay only
detail: 'Estimated delivery time: 2 hours',
amount: {
currency: "TWD",
value: "25.00"
}
},
],
// optional
options: {
requestPayerEmail: false,
requestPayerName: false,
requestPayerPhone: false,
requestShipping: false,
shippingType: 'shipping'
}
}
TPDirect.setupSDK(11327, 'app_whdEWBH8e8Lzy4N6BysVRRMILYORF6UxXbiOFsICkz0J9j1C0JUlCHv1tVJC', 'sandbox')
TPDirect.paymentRequestApi.setupApplePay({
// required, your apple merchant id
merchantIdentifier: 'merchant.tech.cherri.global.test',
// defaults to 'TW'
countryCode: 'TW'
})
TPDirect.paymentRequestApi.setupPayWithGoogle({
// defaults to ['CARD', 'TOKENIZED_CARD']
allowedPaymentMethods: ['CARD', 'TOKENIZED_CARD'],
// Indicates whether or not you allow prepaid debit cards as a form of payment.
// Set to true to allow prepaid debit cards. Otherwise, set to false.
// defaults to true
allowPrepaidCards: true,
// defaults to false
billingAddressRequired: false,
// defaults to 'MIN'
billingAddressFormat: 'MIN', // FULL, MIN
// Set the ISO 3166-1 alpha-2 formatted country codes of the countries to which shipping is allowed.
// If not specified, all countries are allowed.
// defaults to undefined (allow all shipping address)
// allowedCountryCodes: ['TW']
})
TPDirect.paymentRequestApi.setupPaymentRequest(data, function (result) {
// result.browserSupportPaymentRequest
// result.canMakePaymentWithActiveCard
if (!result.browserSupportPaymentRequest) {
$('#pr-button').css('display', 'none')
$('#browser-no-support-message').removeClass('hidden')
return
}
var pay_button = document.getElementById("pay-button")
pay_button.addEventListener('click', function (event) {
TPDirect.paymentRequestApi.getPrime(function(getPrimeResult) {
$('#get-prime-result').removeClass('hidden')
$('#get-prime-result pre code').text(JSON.stringify(getPrimeResult, null, 2))
$('.get-prime-status').addClass('hidden')
console.log(getPrimeResult)
if (getPrimeResult.status !== 0) {
console.log('getPrime failed: ' + getPrimeResult.msg)
$('#get-prime-failed-message').removeClass('hidden')
return
}
// send prime to server
console.log('prime: ' + getPrimeResult.prime)
$('#get-prime-success-message').removeClass('hidden')
$('#get-prime-success-message p').text(getPrimeResult.prime)
var command = `
curl -X POST https://sandbox.tappaysdk.com/tpc/payment/pay-by-prime \\
-H 'content-type: application/json' \\
-H 'x-api-key: partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM' \\
-d '{
"partner_key": "partner_6ID1DoDlaPrfHw6HBZsULfTYtDmWs0q0ZZGKMBpp4YICWBxgK97eK3RM",
"prime": "${getPrimeResult.prime}",
"amount": "${parseInt(getPrimeResult.total_amount)}",
"merchant_id": "GlobalTesting_CTBC",
"details": "Some item",
"cardholder": {
"phone_number": "${getPrimeResult.payer.phone || ''} ",
"name": "${getPrimeResult.payer.name || ''}",
"email": "${getPrimeResult.payer.email || ''}",
"zip_code": "123",
"address": "台北市天龍區芝麻街1號1樓",
"national_id": "A123456789"
}
}'`.replace(/ /g, '')
$('#curl').removeClass('hidden')
$('#curl pre code').text(command)
})
})
})
</script>
</body>
</html>