shippingoptionchange

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

If shipping was requested, and shipping options were provided to the user, the onshippingoptionchange attribute of PaymentRequest receives events when the user selects or changes their shipping option.

Example

// Synchronous update to the total
request.onshippingoptionchange = ev => {
  const value = calculateNewTotal(request.shippingOption);
  const total = {
    currency: "EUR",
    label: "Total due",
    value,
  };
  ev.updateWith({ total });
};

Specifications

Specification Status Comment
Payment Request API
The definition of 'onshippingaddresschange' in that specification.
Candidate Recommendation Initial definition.

Browser Compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support61 Yes551 No No ?
PaymentRequest constructor61 Yes551 No No ?
requestId61 Yes551 No No ?
shippingAddress6115551 No No ?
shippingOption6115551 No No ?
shippingType6115551 No No ?
onshippingaddresschange6115551 No No ?
onshippingoptionchange6115551 No No ?
canMakePayment6116551 No No ?
show6115551 No No ?
abort6115551 No No ?
id ? ? ? ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support No53 Yes551 No ?6.0
PaymentRequest constructor No53 Yes551 No ?6.0
requestId No60 Yes551 No ? No
shippingAddress No53 Yes551 No ?6.0
shippingOption No53 Yes551 No ?6.0
shippingType No56 Yes551 No ?6.0
onshippingaddresschange No53 Yes551 No ?6.0
onshippingoptionchange No53 Yes551 No ?6.0
canMakePayment No56 Yes551 No ?6.0
show No53 Yes551 No ?6.0
abort No53 Yes551 No ?6.0
id ? ? ? ? ? ? ?

1. From version 55: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

 

Document Tags and Contributors

Contributors to this page: marcoscaceres
Last updated by: marcoscaceres,