PaymentResponse: shippingAddress 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 in secure contexts (HTTPS), in some or all supporting browsers.

The shippingAddress read-only property of the PaymentRequest interface returns a PaymentAddress object containing the shipping address provided by the user.

Value

A PaymentAddress object providing details comprising the shipping address provided by the user.

Examples

Generally, the user agent will fill the shippingAddress property for you. You can trigger this by setting options.requestShipping to true when calling the PaymentRequest constructor.

In the example below, the cost of shipping varies by geography. When the shippingaddresschange event is fired and caught, updateDetails() is called to update the details of the PaymentRequest, using shippingAddress to set the correct shipping cost.

js
// Initialization of PaymentRequest arguments are excerpted for brevity.

const payment = new PaymentRequest(supportedInstruments, details, options);

request.addEventListener("shippingaddresschange", (evt) => {
  evt.updateWith(
    new Promise((resolve) => {
      updateDetails(details, request.shippingAddress, resolve);
    }),
  );
});

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, shippingAddress, resolve) {
  if (shippingAddress.country === "US") {
    const shippingOption = {
      id: "",
      label: "",
      amount: { currency: "USD", value: "0.00" },
      selected: true,
    };
    if (shippingAddress.region === "MO") {
      shippingOption.id = "mo";
      shippingOption.label = "Free shipping in Missouri";
      details.total.amount.value = "55.00";
    } else {
      shippingOption.id = "us";
      shippingOption.label = "Standard shipping in US";
      shippingOption.amount.value = "5.00";
      details.total.amount.value = "60.00";
    }
    details.displayItems.splice(2, 1, shippingOption);
    details.shippingOptions = [shippingOption];
  } else {
    delete details.shippingOptions;
  }
  resolve(details);
}

Specifications

Specification
Payment Request API
# shippingaddress-attribute

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shippingAddress
Chrome – Full support
Chrome 60 (Release date: 2017-07-25)
footnote Full support
Edge – Full support
Edge 15 (Release date: 2017-04-05)
footnote Full support
Firefox – No support
Firefox 55 (Release date: 2017-08-08)
disabled
disabled From version 55 users must explicitly set the dom.payments.request.enabled preference to true. To change preferences in Firefox, visit about:config.
disabled From version 55 users must explicitly set the dom.payments.request.supportedRegions preference to A comma-delimited list of one or more 2-character ISO country codes indicating the countries in which to support payments (for example, US,CA).. To change preferences in Firefox, visit about:config.
Opera – Full support
Opera 47 (Release date: 2017-08-09)
footnote Full support
Safari – Full support
Safari 11.1 (Release date: 2018-04-12)
footnote Full support
Chrome Android – Full support
Chrome Android 53 (Release date: 2016-09-07)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 41 (Release date: 2016-10-25)
footnote Full support
Safari on iOS – Full support
Safari on iOS 11.3 (Release date: 2018-03-29)
footnote Full support
Samsung Internet – Full support
Samsung Internet 6 (Release date: 2017-08-23)
footnote Full support
WebView Android – Full support
WebView Android 136 (Release date: 2025-04-29)
footnote Full support
WebView on iOS – Full support
WebView on iOS 11.3 (Release date: 2018-03-29)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.