onpayerdetailchange-attribute-manual.https.html (2651B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>PaymentResponse.prototype.onpayerdetailchange attribute</title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <script src="helpers.js"></script> 7 <script> 8 function runTest(button, options, expected){ 9 button.disabled = true; 10 promise_test(async () => { 11 const response = await getPaymentResponse(options); 12 const eventPromise = new Promise(resolve => { 13 response.addEventListener("payerdetailchange", resolve); 14 }); 15 const error = button.previousElementSibling.textContent.trim(); 16 await response.retry({ error }); 17 const event = await eventPromise; 18 assert_true(event instanceof PaymentRequestUpdateEvent); 19 for([prop, value] of Object.entries(expected)){ 20 if (prop === 'payerPhone') { 21 // |payerPhone| may optionally adhere to E164 structure, which does not 22 // contain formatting, e.g. +180000000 instead of +1-800-000-0000. 23 // Strip out the formatting in case the user agent implements E164. 24 // https://w3c.github.io/payment-request/#addressinit-dictionary 25 value = value.replace(/[-\(\) ]/g, ''); 26 } 27 assert_equals(response[prop], value); 28 } 29 await response.complete("success"); 30 }, button.textContent.trim()); 31 } 32 </script> 33 <h2>Handling PaymentResponse.prototype.onpayerdetailchange events</h2> 34 <p> 35 Each button will bring up the Payment Request UI window. 36 When shown the payment sheet, use any details and hit pay. 37 </p> 38 <p> 39 When asked to retry the payment: 40 </p> 41 <ol> 42 <li> 43 <p> 44 Change payer's name to "pass". 45 </p> 46 <button onclick="runTest(this, { requestPayerName: true }, { payerName: 'pass' });"> 47 PaymentRequestUpdateEvent is dispatched when payer name changes. 48 </button> 49 </li> 50 <li> 51 <p> 52 Change payer's email to "pass@pass.pass". 53 </p> 54 <button onclick="runTest(this, {requestPayerEmail: true}, { payerEmail: 'pass@pass.pass' });"> 55 PaymentRequestUpdateEvent is dispatched when payer email changes. 56 </button> 57 </li> 58 <li> 59 <p> 60 Change payer's phone to "+1-800-000-0000". 61 </p> 62 <button onclick="runTest(this, {requestPayerPhone: true}, { payerPhone: '+18000000000' })"> 63 PaymentRequestUpdateEvent is dispatched when payer phone changes. 64 </button> 65 </li> 66 <li> 67 <button onclick="done();">DONE!</button> 68 </li> 69 </ol> 70 <small> 71 If you find a buggy test, please <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> 72 and tag one of the <a href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml">owners</a>. 73 </small>