updateWith-incremental-update-manual.https.html (5157B)
1 <!doctype html> 2 <meta charset="utf8"> 3 <link rel="help" href="https://w3c.github.io/payment-request/#updatewith-method"> 4 <title> 5 Incremental updates via updateWith() 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 15 const methods = [{ 16 supportedMethods: "basic-card", 17 }, { 18 supportedMethods: "https://apple.com/apple-pay", 19 data: { 20 version: 3, 21 merchantIdentifier: "merchant.com.example", 22 countryCode: "US", 23 merchantCapabilities: ["supports3DS"], 24 supportedNetworks: ["visa"], 25 } 26 }]; 27 28 const options = { 29 requestShipping: true, 30 }; 31 32 const initialDetails = { 33 total: { 34 label: "Initial total", 35 amount: { 36 currency: "USD", 37 value: "1.0", 38 }, 39 }, 40 shippingOptions: [ 41 { 42 id: "neutral", 43 label: "NEUTRAL SHIPPING OPTION", 44 selected: true, 45 amount: { 46 currency: "USD", 47 value: "0.00", 48 }, 49 }, 50 ], 51 }; 52 53 function testFireEvent(button, updateDetails) { 54 button.disabled = true; 55 const request = new PaymentRequest(methods, initialDetails, options); 56 const handlerPromise = new Promise(resolve => { 57 request.onshippingaddresschange = event => { 58 event.updateWith(updateDetails); 59 resolve(event); 60 }; 61 }); 62 promise_test(async t => { 63 const response = await request.show(); 64 const event = await handlerPromise; 65 await response.complete("success"); 66 }, button.textContent.trim()); 67 } 68 69 </script> 70 <h2> 71 Incremental updates 72 </h2> 73 <p> 74 Click on each button in sequence from top to bottom without refreshing the page. 75 Each button will bring up the Payment Request UI window. 76 </p> 77 <p> 78 Unless stated otherwise, each test will update some part of the displayed payment sheet in 79 a manner indicated below. When prompted, please change or enter a new 80 shipping address, look for the tested change, and complete the payment. 81 </p> 82 <p> 83 If the payment request locks up or otherwise aborts, the test has failed. 84 </p> 85 <ol> 86 <li> 87 <button onclick="testFireEvent(this, {});"> 88 Passing an empty dictionary does not cause the sheet to change. 89 No values in the sheet must change. 90 </button> 91 </li> 92 </ol> 93 94 <section> 95 <h3>Incremental updates via PaymentDetailsUpdate.total</h3> 96 <ol> 97 <li> 98 <button onclick=" 99 const total = { 100 label: 'PASS', 101 amount: { 102 currency: 'XXX', 103 value: '20', 104 }, 105 }; 106 const updatedDetails = { total }; 107 testFireEvent(this, updatedDetails);"> 108 After changing shipping address, the total becomes XXX20, with the label "PASS". 109 </button> 110 </li> 111 </ol> 112 </section> 113 114 <section> 115 <h3>Incremental updates via PaymentDetailsBase.displayItems</h3> 116 <ol> 117 <li> 118 <button onclick=" 119 const item = { 120 label: 'PASS', 121 amount: { currency: 'ABC', value: '55.00' }, 122 }; 123 const updatedDetails = { 124 displayItems: [ item ] 125 }; 126 testFireEvent(this, updatedDetails);"> 127 After changing shipping address, a new display item is shown 128 with a with label PASS, and value of ABC55.00. 129 </button> 130 </li> 131 </ol> 132 </section> 133 134 <section> 135 <h3>Incremental updates via PaymentDetailsBase.shippingOptions</h3> 136 <ol> 137 <li> 138 <button onclick=" 139 const shippingOptions = [ 140 { 141 id: 'pass', 142 label: 'PASS', 143 amount: { currency: 'USD', value: '1.00' }, 144 selected: true, 145 }, 146 { 147 id: 'fail', 148 label: 'FAIL IF THIS IS SELECTED', 149 amount: { currency: 'USD', value: '25.00' } 150 }, 151 ]; 152 const updatedDetails = { 153 shippingOptions 154 }; 155 testFireEvent(this, updatedDetails);"> 156 After changing shipping address, two new shipping options appear. 157 The shipping option labelled "PASS" with a value of USD1.0 is selected. 158 </button> 159 </li> 160 </ol> 161 </section> 162 163 <section> 164 <h3>Incremental updates via PaymentDetailsBase.modifiers</h3> 165 <ol> 166 <li> 167 <button onclick=" 168 const additionalItem = { 169 label: 'PASS-DISPLAY-ITEM', 170 amount: { currency: 'USD', value: '3.00' }, 171 }; 172 const modifiers = [{ 173 additionalDisplayItems: [ additionalItem ], 174 supportedMethods: 'basic-card', 175 total: { 176 label: 'PASS-TOTAL', 177 amount: { currency: 'USD', value: '123.00' }, 178 }, 179 }]; 180 const updatedDetails = { modifiers }; 181 testFireEvent(this, updatedDetails);"> 182 After changing shipping address, a new display item is shown 183 with a with label PASS-DISPLAY-ITEM, and value of ABC55.00 and the total is 184 labelled PASS-TOTAL with a value of USD123.0 185 </button> 186 </li> 187 <li> 188 <button onclick="done()">DONE - see results</button> 189 </li> 190 </ol> 191 </section> 192 193 <small> 194 If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> 195 and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">suggested reviewers</a>. 196 </small>