summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/payment-request/billing-address-changed-manual.https.html
blob: d03f7615187eb52cd6d980665aae9758d97b19f1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!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>