billing-address-changed-manual.https.html (3233B)
1 <!DOCTYPE html> <meta charset="utf-8" /> 2 <title>Test for requesting billing address</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script> 6 setup({ 7 explicit_done: true, 8 explicit_timeout: true, 9 }); 10 11 const methods = [ 12 { supportedMethods: "basic-card" }, 13 { 14 supportedMethods: "https://apple.com/apple-pay", 15 data: { 16 version: 3, 17 merchantIdentifier: "merchant.com.example", 18 countryCode: "US", 19 merchantCapabilities: ["supports3DS"], 20 supportedNetworks: ["visa"], 21 }, 22 }, 23 ]; 24 25 const details = { 26 total: { 27 label: "label", 28 amount: { currency: "USD", value: "5.00" }, 29 }, 30 }; 31 test(() => { 32 assert_true( 33 "onpaymentmethodchange" in PaymentRequest.prototype, 34 "The paymentmethodchange is not supported" 35 ); 36 }, "onpaymentmethodchange is in prototype"); 37 38 function dontRequestBillingAddress() { 39 promise_test(async t => { 40 const request = new PaymentRequest(methods, details, {}); 41 const showPromise = request.show(); 42 43 // Let's check the method data from event. 44 const { methodDetails } = await new Promise(resolve => 45 request.addEventListener("paymentmethodchange", resolve) 46 ); 47 48 assert_true("billingAddress" in methodDetails); 49 assert_equals( 50 methodDetails.billingAddress, 51 null, 52 "Expected methodDetails.billingAddress to be null" 53 ); 54 await request.abort(); 55 }); 56 } 57 58 function requestBillingAddress() { 59 promise_test(async t => { 60 const request = new PaymentRequest(methods, details, { 61 requestBillingAddress: true, 62 }); 63 const showPromise = request.show(); 64 65 // Let's check the method data from event. 66 const { methodDetails } = await new Promise(resolve => 67 request.addEventListener("paymentmethodchange", resolve) 68 ); 69 70 assert_true("billingAddress" in methodDetails); 71 72 const { billingAddress } = methodDetails; 73 assert_true( 74 billingAddress instanceof ContactAddress, 75 "Expected instance of ContactAddress" 76 ); 77 await request.abort(); 78 }); 79 } 80 </script> 81 82 <h2>Request billing address</h2> 83 <p> 84 Click on each button in sequence from top to bottom without refreshing the 85 page. Each button will bring up the Payment Request UI window. 86 </p> 87 <p> 88 When the payment sheet is presented, select a payment method (e.g., a credit 89 card). 90 </p> 91 <ol> 92 <li> 93 <button onclick="dontRequestBillingAddress()"> 94 When no billing address is requested, 95 `PaymentMethodChangeEvent.methodDetails.billingAddress` is null. 96 </button> 97 </li> 98 <li> 99 <button onclick="requestBillingAddress()"> 100 When billing address is 101 requested,`PaymentMethodChangeEvent.methodDetails.billingAddress` is a 102 `ContactAddress`. 103 </button> 104 </li> 105 <li><button onclick="done()">Done!</button></li> 106 </ol> 107 <small> 108 If you find a buggy test, please 109 <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> and 110 tag one of the 111 <a 112 href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml" 113 >suggested reviewers</a 114 >. 115 </small>