| <!DOCTYPE html> <meta charset="utf-8" /> |
| <title>Test for requesting billing address</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| setup({ |
| explicit_done: true, |
| explicit_timeout: true, |
| }); |
| |
| const methods = [ |
| { supportedMethods: "basic-card" }, |
| { |
| supportedMethods: "https://apple.com/apple-pay", |
| data: { |
| version: 3, |
| merchantIdentifier: "merchant.com.example", |
| countryCode: "US", |
| merchantCapabilities: ["supports3DS"], |
| supportedNetworks: ["visa"], |
| }, |
| }, |
| ]; |
| |
| const details = { |
| total: { |
| label: "label", |
| amount: { currency: "USD", value: "5.00" }, |
| }, |
| }; |
| test(() => { |
| assert_true( |
| "onpaymentmethodchange" in PaymentRequest.prototype, |
| "The paymentmethodchange is not supported" |
| ); |
| }, "onpaymentmethodchange is in prototype"); |
| |
| function dontRequestBillingAddress() { |
| promise_test(async t => { |
| const request = new PaymentRequest(methods, details, {}); |
| const showPromise = request.show(); |
| |
| // Let's check the method data from event. |
| const { methodDetails } = await new Promise(resolve => |
| request.addEventListener("paymentmethodchange", resolve) |
| ); |
| |
| assert_true("billingAddress" in methodDetails); |
| assert_equals( |
| methodDetails.billingAddress, |
| null, |
| "Expected methodDetails.billingAddress to be null" |
| ); |
| await request.abort(); |
| }); |
| } |
| |
| function requestBillingAddress() { |
| promise_test(async t => { |
| const request = new PaymentRequest(methods, details, { |
| requestBillingAddress: true, |
| }); |
| const showPromise = request.show(); |
| |
| // Let's check the method data from event. |
| const { methodDetails } = await new Promise(resolve => |
| request.addEventListener("paymentmethodchange", resolve) |
| ); |
| |
| assert_true("billingAddress" in methodDetails); |
| |
| const { billingAddress } = methodDetails; |
| assert_true( |
| billingAddress instanceof PaymentAddress, |
| "Expected instance of PaymentAddress" |
| ); |
| await request.abort(); |
| }); |
| } |
| </script> |
| |
| <h2>Request billing address</h2> |
| <p> |
| Click on each button in sequence from top to bottom without refreshing the |
| page. Each button will bring up the Payment Request UI window. |
| </p> |
| <p> |
| When the payment sheet is presented, select a payment method (e.g., a credit |
| card). |
| </p> |
| <ol> |
| <li> |
| <button onclick="dontRequestBillingAddress()"> |
| When no billing address is requested, |
| `PaymentMethodChangeEvent.methodDetails.billingAddress` is null. |
| </button> |
| </li> |
| <li> |
| <button onclick="requestBillingAddress()"> |
| When billing address is |
| requested,`PaymentMethodChangeEvent.methodDetails.billingAddress` is a |
| `PaymentAddress`. |
| </button> |
| </li> |
| <li><button onclick="done()">Done!</button></li> |
| </ol> |
| <small> |
| If you find a buggy test, please |
| <a href="https://github.com/web-platform-tests/wpt/issues">file a bug</a> and |
| tag one of the |
| <a |
| href="https://github.com/web-platform-tests/wpt/blob/master/payment-request/META.yml" |
| >suggested reviewers</a |
| >. |
| </small> |
