OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html lang="en"> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 <title>PaymentRequest identifier manual test</title> |
| 7 </head> |
| 8 <body> |
| 9 <div id="contents"> |
| 10 <h1>PaymentRequest identifier manual test</h1> |
| 11 <p>Perform the following steps:</p> |
| 12 <ul> |
| 13 <li>Press 'Buy'</li> |
| 14 <li>In the payment dialog make sure a payment app is selected</li> |
| 15 <li>In the payment dialog press 'Pay'</li> |
| 16 <li>In the launched payment app perform steps to do the payment</li> |
| 17 <li>The response will be processed and below should display 'my_payment_id
'</li> |
| 18 </ul> |
| 19 <p>No payment will be processed.</p> |
| 20 <p>Price: USD <strong>$55.00</strong></p> |
| 21 <p><button onclick="onBuyClicked()">Buy</button></p> |
| 22 </div> |
| 23 <pre id="msg"></pre> |
| 24 <script> |
| 25 /** |
| 26 * Initializes the payment request object. |
| 27 * @return {PaymentRequest} The payment request object. |
| 28 */ |
| 29 function buildPaymentRequest() { |
| 30 if (!window.PaymentRequest) { |
| 31 return null; |
| 32 } |
| 33 |
| 34 const supportedInstruments = [{ |
| 35 supportedMethods: ['https://android.com/pay'], |
| 36 data: { |
| 37 merchantName: 'Rouslan Solomakhin', |
| 38 merchantId: '00184145120947117657', |
| 39 allowedCardNetworks: ['AMEX', 'MASTERCARD', 'VISA', 'DISCOVER'], |
| 40 paymentMethodTokenizationParameters: { |
| 41 tokenizationType: 'GATEWAY_TOKEN', |
| 42 parameters: { |
| 43 'gateway': 'stripe', |
| 44 'stripe:publishableKey': 'pk_live_lNk21zqKM2BENZENh3rzCUgo', |
| 45 'stripe:version': '2016-07-06', |
| 46 }, |
| 47 }, |
| 48 }, |
| 49 }, { |
| 50 supportedMethods: ['basic-card'], |
| 51 data: { |
| 52 supportedNetworks: ['unionpay', 'visa', 'mastercard', 'amex', 'discov
er', |
| 53 'diners', 'jcb', 'mir', |
| 54 ], |
| 55 supportedTypes: ['prepaid', 'debit', 'credit'], |
| 56 }, |
| 57 }]; |
| 58 |
| 59 const details = { |
| 60 id: 'my_payment_id', |
| 61 total: { |
| 62 label: 'Donation', |
| 63 amount: { |
| 64 currency: 'USD', |
| 65 value: '55.00', |
| 66 }, |
| 67 }, |
| 68 displayItems: [{ |
| 69 label: 'Original donation amount', |
| 70 amount: { |
| 71 currency: 'USD', |
| 72 value: '65.00', |
| 73 }, |
| 74 }, { |
| 75 label: 'Friends and family discount', |
| 76 amount: { |
| 77 currency: 'USD', |
| 78 value: '-10.00', |
| 79 }, |
| 80 }], |
| 81 }; |
| 82 |
| 83 let request = null; |
| 84 |
| 85 try { |
| 86 request = new PaymentRequest(supportedInstruments, details); |
| 87 if (request.canMakePayment) { |
| 88 request.canMakePayment().then(function(result) { |
| 89 console.log(result ? 'Can make payment' : 'Cannot make payment'); |
| 90 }).catch(function(err) { |
| 91 console.log(err); |
| 92 }); |
| 93 } |
| 94 } catch (e) { |
| 95 console.log('Developer mistake: \'' + e + '\''); |
| 96 } |
| 97 |
| 98 return request; |
| 99 } |
| 100 |
| 101 let request = buildPaymentRequest(); |
| 102 |
| 103 /** |
| 104 * Launches payment request that does not require shipping. |
| 105 */ |
| 106 function onBuyClicked() { // eslint-disable-line no-unused-vars |
| 107 if (!window.PaymentRequest || !request) { |
| 108 console.log('PaymentRequest API is not supported.'); |
| 109 return; |
| 110 } |
| 111 |
| 112 try { |
| 113 request.show() |
| 114 .then(function(instrumentResponse) { |
| 115 window.setTimeout(function() { |
| 116 instrumentResponse.complete('success') |
| 117 .then(function() { |
| 118 let element = document.createElement('pre'); |
| 119 element.innerHTML = instrumentResponse.requestId; |
| 120 document.getElementById('msg').appendChild(element); |
| 121 }) |
| 122 .catch(function(err) { |
| 123 console.log(err); |
| 124 request = buildPaymentRequest(); |
| 125 }); |
| 126 }, 2000); |
| 127 }) |
| 128 .catch(function(err) { |
| 129 console.log(err); |
| 130 request = buildPaymentRequest(); |
| 131 }); |
| 132 } catch (e) { |
| 133 console.log('Developer mistake: \'' + e + '\''); |
| 134 request = buildPaymentRequest(); |
| 135 } |
| 136 } |
| 137 </script> |
| 138 </body> |
| 139 </html> |
| 140 |
OLD | NEW |