W3cubDocs

/DOM

PaymentResponse.shippingOption

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.

The shippingOption read-only property of the PaymentRequest interface returns the ID attribute of the shipping option selected by the user. This option is only present when the requestShipping option is set to true in the PaymentOptions object passed to the PaymentRequest constructor.

Syntax

var shippingOption = PaymentRequest.shippingOption;

Example

In the example below, the PaymentRequest.onshippingaoptionchange event is called. It calls updateDetails() to toggle the shipping method between "standard" and "express".

// Initialization of PaymentRequest arguments are excerpted for brevity.
var payment = new PaymentRequest(supportedInstruments, details, options);

request.addEventListener('shippingoptionchange', function(evt) {
  evt.updateWith(new Promise(function(resolve, reject) {
    updateDetails(details, request.shippingOption, resolve, reject);
  }));
});

payment.show().then(function(paymentResponse) {
  // Processing of paymentResponse exerpted for the same of brevity.
}).catch(function(err) {
  console.error("Uh oh, something bad happened", err.message);
});

function updateDetails(details, shippingOption, resolve, reject) {
  var selectedShippingOption;
  var 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 Status Comment
Payment Request API Candidate Recommendation Initial definition.

Browser CompatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 61
Disabled
61
Disabled
Disabled From version 61: this feature is behind the #web-payments preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
15 56
Disabled
56
Disabled
Disabled From version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No No ?
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support No 53
Disabled
53
Disabled
Disabled From version 53: this feature is behind the #web-payments preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Yes 56
Disabled
56
Disabled
Disabled From version 56: this feature is behind the dom.payments.request.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No ? 6.0

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PaymentResponse/shippingOption