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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
<!DOCTYPE html> <meta charset="utf-8" />
<title>Test for requesting billing address</title>
<link
rel="help"
href="https://github.com/w3c/payment-method-basic-card/pull/65"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({
explicit_done: true,
explicit_timeout: true,
});
const basicCard = { supportedMethods: "basic-card" };
const details = {
total: {
label: "label",
amount: { currency: "USD", value: "5.00" },
},
};
// Smoke tests
test(() => {
assert_true(
"onpaymentmethodchange" in PaymentRequest.prototype,
"The paymentmethodchange event handler is not supported on PaymentRequest"
);
assert_true(
"PaymentMethodChangeEvent" in window,
"The PaymentMethodChangeEvent is not supported"
);
}, "PaymentMethodChangeEvent support");
function dontRequestBillingAddress(options) {
promise_test(async t => {
const request = new PaymentRequest([basicCard], details, {
requestBillingAddress: false,
});
const showPromise = request.show();
// Let's check the method data from PaymentMethodChangeEvent.
const event = await new Promise(resolve =>
request.addEventListener("paymentmethodchange", resolve)
);
assert_true(
event instanceof PaymentMethodChangeEvent,
"Expected instance of PaymentMethodChangeEvent"
);
assert_equals(
event.methodDetails.billingAddress,
null,
"Expected methodDetails.billingAddress to be null"
);
// Let's check the billingAddress in the response
const response = await showPromise;
const {
details: { billingAddress: responseBillingAddress },
} = response;
assert_equals(
responseBillingAddress,
null,
"Expected PaymentResponse.data.billingAddress to be null"
);
// And we are done
await response.complete("success");
});
}
function requestBillingAddress() {
promise_test(async t => {
const request = new PaymentRequest([basicCard], details, {
requestBillingAddress: true,
});
const showPromise = request.show();
// Let's check the methodDetails from event.
const event = await new Promise(resolve =>
request.addEventListener("paymentmethodchange", resolve)
);
assert_true(
event instanceof PaymentMethodChangeEvent,
"Expected instance of PaymentMethodChangeEvent"
);
const { billingAddress: eventBillingAddress } = event.methodDetails;
checkRedactList(eventBillingAddress);
// Let's check the billingAddress in the response.
const response = await showPromise;
const {
details: { billingAddress: responseBillingAddress },
} = await showPromise;
checkRedactList(responseBillingAddress);
// And we are done.
await response.complete("success");
});
}
function checkRedaction(billingAddress) {
assert_true(
billingAddress instanceof PaymentAddress,
"Expected instance of PaymentAddress"
);
for (const item of ["organization", "phone", "recipient"]) {
assert_equals(
billingAddress[item],
"",
`Expected billingAddress's "${item}" attribute to equal null (redacted).`
);
}
}
</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), and press "Pay".
</p>
<ol>
<li>
<button onclick="dontRequestBillingAddress()">
When no billing address is requested,
`PaymentMethodChangeEvent.methodData.billingAddress` is null.
</button>
</li>
<li>
<button onclick="requestBillingAddress()">
When billing address is
requested,`PaymentMethodChangeEvent.methodData.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>
|
