196 lines
5 KiB
HTML
196 lines
5 KiB
HTML
<!doctype html>
|
|
<meta charset="utf8">
|
|
<link rel="help" href="https://w3c.github.io/payment-request/#updatewith-method">
|
|
<title>
|
|
Incremental updates via updateWith()
|
|
</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 options = {
|
|
requestShipping: true,
|
|
};
|
|
|
|
const initialDetails = {
|
|
total: {
|
|
label: "Initial total",
|
|
amount: {
|
|
currency: "USD",
|
|
value: "1.0",
|
|
},
|
|
},
|
|
shippingOptions: [
|
|
{
|
|
id: "neutral",
|
|
label: "NEUTRAL SHIPPING OPTION",
|
|
selected: true,
|
|
amount: {
|
|
currency: "USD",
|
|
value: "0.00",
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
function testFireEvent(button, updateDetails) {
|
|
button.disabled = true;
|
|
const request = new PaymentRequest(methods, initialDetails, options);
|
|
const handlerPromise = new Promise(resolve => {
|
|
request.onshippingaddresschange = event => {
|
|
event.updateWith(updateDetails);
|
|
resolve(event);
|
|
};
|
|
});
|
|
promise_test(async t => {
|
|
const response = await request.show();
|
|
const event = await handlerPromise;
|
|
await response.complete("success");
|
|
}, button.textContent.trim());
|
|
}
|
|
|
|
</script>
|
|
<h2>
|
|
Incremental updates
|
|
</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>
|
|
Unless stated otherwise, each test will update some part of the displayed payment sheet in
|
|
a manner indicated below. When prompted, please change or enter a new
|
|
shipping address, look for the tested change, and complete the payment.
|
|
</p>
|
|
<p>
|
|
If the payment request locks up or otherwise aborts, the test has failed.
|
|
</p>
|
|
<ol>
|
|
<li>
|
|
<button onclick="testFireEvent(this, {});">
|
|
Passing an empty dictionary does not cause the sheet to change.
|
|
No values in the sheet must change.
|
|
</button>
|
|
</li>
|
|
</ol>
|
|
|
|
<section>
|
|
<h3>Incremental updates via PaymentDetailsUpdate.total</h3>
|
|
<ol>
|
|
<li>
|
|
<button onclick="
|
|
const total = {
|
|
label: 'PASS',
|
|
amount: {
|
|
currency: 'XXX',
|
|
value: '20',
|
|
},
|
|
};
|
|
const updatedDetails = { total };
|
|
testFireEvent(this, updatedDetails);">
|
|
After changing shipping address, the total becomes XXX20, with the label "PASS".
|
|
</button>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Incremental updates via PaymentDetailsBase.displayItems</h3>
|
|
<ol>
|
|
<li>
|
|
<button onclick="
|
|
const item = {
|
|
label: 'PASS',
|
|
amount: { currency: 'ABC', value: '55.00' },
|
|
};
|
|
const updatedDetails = {
|
|
displayItems: [ item ]
|
|
};
|
|
testFireEvent(this, updatedDetails);">
|
|
After changing shipping address, a new display item is shown
|
|
with a with label PASS, and value of ABC55.00.
|
|
</button>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Incremental updates via PaymentDetailsBase.shippingOptions</h3>
|
|
<ol>
|
|
<li>
|
|
<button onclick="
|
|
const shippingOptions = [
|
|
{
|
|
id: 'pass',
|
|
label: 'PASS',
|
|
amount: { currency: 'USD', value: '1.00' },
|
|
selected: true,
|
|
},
|
|
{
|
|
id: 'fail',
|
|
label: 'FAIL IF THIS IS SELECTED',
|
|
amount: { currency: 'USD', value: '25.00' }
|
|
},
|
|
];
|
|
const updatedDetails = {
|
|
shippingOptions
|
|
};
|
|
testFireEvent(this, updatedDetails);">
|
|
After changing shipping address, two new shipping options appear.
|
|
The shipping option labelled "PASS" with a value of USD1.0 is selected.
|
|
</button>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Incremental updates via PaymentDetailsBase.modifiers</h3>
|
|
<ol>
|
|
<li>
|
|
<button onclick="
|
|
const additionalItem = {
|
|
label: 'PASS-DISPLAY-ITEM',
|
|
amount: { currency: 'USD', value: '3.00' },
|
|
};
|
|
const modifiers = [{
|
|
additionalDisplayItems: [ additionalItem ],
|
|
supportedMethods: 'basic-card',
|
|
total: {
|
|
label: 'PASS-TOTAL',
|
|
amount: { currency: 'USD', value: '123.00' },
|
|
},
|
|
}];
|
|
const updatedDetails = { modifiers };
|
|
testFireEvent(this, updatedDetails);">
|
|
After changing shipping address, a new display item is shown
|
|
with a with label PASS-DISPLAY-ITEM, and value of ABC55.00 and the total is
|
|
labelled PASS-TOTAL with a value of USD123.0
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button onclick="done()">DONE - see results</button>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<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>
|