payment-request/billing-address-changed-manual.https.html

<!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 ContactAddress,
        "Expected instance of ContactAddress"
      );
      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
      `ContactAddress`.
    </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>