<!DOCTYPE html>
<meta charset="utf-8" />
<title>Test for PaymentRequest shippingOption dynamic updating</title>
<link
rel="help"
href="https://w3c.github.io/payment-request/#shippingoption-attribute"
/>
<link
rel="help"
href="https://w3c.github.io/payment-request/#onshippingoptionchange-attribute"
/>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
setup({ explicit_done: true, explicit_timeout: true });
const validMethod = Object.freeze({ supportedMethods: "basic-card" });
const applePayMethod = {
supportedMethods: "https://apple.com/apple-pay",
data: {
version: 3,
merchantIdentifier: "merchant.com.example",
countryCode: "US",
merchantCapabilities: ["supports3DS"],
supportedNetworks: ["visa"],
},
};
const validMethods = Object.freeze([validMethod, applePayMethod]);
const validAmount = Object.freeze({ currency: "USD", value: "5.00" });
const validTotal = Object.freeze({
label: "label",
amount: validAmount,
});
const validDetails = Object.freeze({ total: validTotal });
const initialValidShippingOption = Object.freeze({
id: "default-method",
label: "Default shipping method",
amount: validAmount,
selected: true,
});
const validDynamicShippingOption = Object.freeze({
id: "dynamically-added-id",
label: "Dynamically added shipping option",
amount: validAmount,
selected: false,
});
const requestShipping = Object.freeze({
requestShipping: true,
});
function testShippingOptionChanged() {
promise_test(async (t) => {
const detailsWithShippingOptions = {
...validDetails,
shippingOptions: [initialValidShippingOption],
};
const request = new PaymentRequest(
validMethods,
detailsWithShippingOptions,
requestShipping
);
const shippingAddressChangeListener = new Promise((resolve) => {
request.addEventListener(
"shippingaddresschange",
(ev) => {
// resolve(request.shippingOption);
ev.updateWith({
shippingOptions: [
initialValidShippingOption,
validDynamicShippingOption,
],
});
resolve();
},
{ once: true }
);
});
const handlerPromise = new Promise((resolve) => {
request.onshippingoptionchange = () => {
resolve(request.shippingOption);
};
});
request.show().catch((err) => err);
const results = await Promise.all([
shippingAddressChangeListener,
handlerPromise,
]);
assert_true(
results[1] === "dynamically-added-id",
"Expected dynamically-added-id as the shippingOption"
);
await request.abort();
});
}
</script>
<h2>PaymentRequest shippingOption attribute</h2>
<p>
Click on each button in sequence from top to bottom without refreshing the
page. Each button (except the 'Done' button) will bring up the Payment Request
UI window.
</p>
<ol>
<li>
When the payment sheet is presented, view options for Shipping Method. There
should only be one: "Default shipping method"
</li>
<li>
Change your Shipping Address - either update your existing one by changing
something (name, address, etc), or select a different Shipping Address, or
add a new Shipping Address and select it.
</li>
<li>
Go back to Shipping Method, and there is now an option called "Dynamically
added shipping option". Select it
</li>
<li>
Click on the 'Done' button
</li>
</ol>
<ul>
<li>
<button onclick="testShippingOptionChanged()">
When the address is changed, shipping methods can be updated
</button>
</li>
<li>
<button onclick="done()">Done</button>
</li>
</ul>
<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>
Codebase Browser
chromium