algorithms-manual.https.html (4998B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <link rel="help" href="https://w3c.github.io/payment-request/#algorithms"> 4 <title> 5 Payment Request algorithms 6 </title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 setup({ 11 explicit_done: true, 12 explicit_timeout: true, 13 }); 14 const methods = [ 15 { 16 supportedMethods: "basic-card", 17 }, 18 { 19 supportedMethods: "https://apple.com/apple-pay", 20 data: { 21 version: 3, 22 merchantIdentifier: "merchant.com.example", 23 countryCode: "US", 24 merchantCapabilities: ["supports3DS"], 25 supportedNetworks: ["visa"], 26 }, 27 } 28 ]; 29 const shippingOptions = { 30 shippingOptions: [ 31 { 32 id: "fail", 33 label: "Option 1", 34 amount: { 35 currency: "USD", 36 value: "5.00", 37 }, 38 selected: true, 39 }, 40 { 41 id: "pass", 42 label: "Option 2", 43 amount: { 44 currency: "USD", 45 value: "5.00", 46 }, 47 }, 48 ], 49 }; 50 51 const detailsNoShippingOptions = { 52 total: { 53 label: "Total due", 54 amount: { 55 currency: "USD", 56 value: "1.0", 57 }, 58 }, 59 }; 60 61 const detailsWithShippingOptions = Object.assign( 62 { 63 total: { 64 label: "Total due", 65 amount: { 66 currency: "USD", 67 value: "1.0", 68 }, 69 }, 70 }, 71 shippingOptions 72 ); 73 74 const options = { 75 requestShipping: true, 76 }; 77 78 function testFireEvent(button, details, eventName, expectRequestProps) { 79 button.disabled = true; 80 promise_test(async t => { 81 new PaymentRequest(methods, detailsNoShippingOptions, options); 82 const request = new PaymentRequest(methods, details, options); 83 const handlerPromise = new Promise(resolve => { 84 request[`on${eventName}`] = event => { 85 // "prevent immediate propagation" flag is set. 86 // This listener below won't fire! 87 event.updateWith(details); 88 resolve(event); 89 }; 90 }); 91 // This listener should never fire because the 92 // the event handler caused "prevent immediate propagation" to be set. 93 request.addEventListener( 94 eventName, 95 t.unreached_func("Second event listener should never fire") 96 ); 97 const response = await request.show(); 98 const event = await handlerPromise; 99 assert_true( 100 event instanceof window.PaymentRequestUpdateEvent, 101 "Expected instances of PaymentRequestUpdateEvent" 102 ); 103 await response.complete("success"); 104 }, button.textContent.trim()); 105 } 106 107 async function runAbortTest(button) { 108 button.disabled = true; 109 const { textContent: testName } = button; 110 promise_test(async t => { 111 const request = new PaymentRequest(methods, detailsNoShippingOptions); 112 // Await the user to abort 113 await promise_rejects_dom(t, "AbortError", request.show()); 114 // [[state]] is now closed 115 await promise_rejects_dom(t, "InvalidStateError", request.show()); 116 }, testName.trim()); 117 } 118 </script> 119 <h2> 120 Tests for "algorithms" section 121 </h2> 122 <p> 123 Click on each button in sequence from top to bottom without refreshing the page. 124 Each button will bring up the Payment Request UI window. 125 </p> 126 <section> 127 <h3 id="abort-algo"> 128 User aborts the payment request algorithm 129 </h3> 130 <link rel="help" href="https://w3c.github.io/payment-request/#user-aborts-the-payment-request-algorithm"> 131 <p> 132 When presented with the payment sheet, abort the payment request (e.g., by hitting the esc key or pressing a UA provided button). 133 </p> 134 <ol> 135 <li> 136 <button onclick="runAbortTest(this);"> 137 If the user aborts, the UA must run the user aborts the payment request algorithm. 138 </button> 139 </li> 140 </ol> 141 </section> 142 143 <section> 144 <h3 id="shipping-address-changed-algo">Shipping address changed algorithm</h3> 145 <link rel="help" href="https://www.w3.org/TR/payment-request/#shipping-address-changed-algorithm"> 146 <p> 147 When prompted, please change or enter a new shipping address and then select Pay. 148 </p> 149 <ol> 150 <li> 151 <button onclick="testFireEvent(this, detailsWithShippingOptions, 'shippingaddresschange', {});"> 152 The shipping address changed algorithm runs when the user provides a new shipping address. 153 </button> 154 </li> 155 </ol> 156 </section> 157 158 <section> 159 <h3 id="shipping-option-changed-algo">Shipping option changed algorithm</h3> 160 <link rel="help" href="https://w3c.github.io/payment-request/#shipping-option-changed-algorithm"> 161 <p> 162 Finally, when prompted, please select "shipping option 2" and then select Pay. 163 </p> 164 <ol> 165 <li> 166 <button onclick="testFireEvent(this, detailsWithShippingOptions, 'shippingoptionchange', {}, 'pass'); done();"> 167 The shipping option changed algorithm runs when the user chooses a new shipping option. 168 </button> 169 </li> 170 </ol> 171 </section> 172 173 <small> 174 If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> 175 and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>. 176 </small>