<!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>