PaymentResponse: shippingOption property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
TheshippingOption read-only property ofthePaymentRequest interface returns the ID attribute of the shippingoption selected by the user. This option is only present when therequestShipping option is set totrue in theoptions object passed to thePaymentRequest constructor.
Value
A string.
Examples
In the example below, theshippingoptionchange eventis called. It callsupdateDetails() to toggle the shipping method between"standard" and "express".
js
// Initialization of PaymentRequest arguments are excerpted for brevity.const payment = new PaymentRequest(supportedInstruments, details, options);request.addEventListener("shippingoptionchange", (evt) => { evt.updateWith( new Promise((resolve, reject) => { updateDetails(details, request.shippingOption, resolve, reject); }), );});payment .show() .then((paymentResponse) => { // Processing of paymentResponse excerpted for the same of brevity. }) .catch((err) => { console.error("Uh oh, something bad happened", err.message); });function updateDetails(details, shippingOption, resolve, reject) { let selectedShippingOption; let otherShippingOption; if (shippingOption === "standard") { selectedShippingOption = details.shippingOptions[0]; otherShippingOption = details.shippingOptions[1]; details.total.amount.value = "55.00"; } else if (shippingOption === "express") { selectedShippingOption = details.shippingOptions[1]; otherShippingOption = details.shippingOptions[0]; details.total.amount.value = "67.00"; } else { reject(`Unknown shipping option '${shippingOption}'`); return; } selectedShippingOption.selected = true; otherShippingOption.selected = false; details.displayItems.splice(2, 1, selectedShippingOption); resolve(details);}Specifications
| Specification |
|---|
| Payment Request API # shippingoption-attribute |