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 shippingAddress
read-only property of the PaymentRequest
interface returns a PaymentAddress
object containing the shipping address provided by the user.
Syntax
var shippingAddress = PaymentRequest.shippingAddress;
Value
A PaymentAddress
object providing details comprising the shipping address provided by the user.
Example
Generally, the user agent will fill the shippingAddress
property for you. You can trigger this by setting PaymentOptions.requestShipping
to true
when calling the PaymentRequest
constructor.
In the example below, the cost of shipping varies by geography. When the PaymentRequest.onshippingaddresschange
is called, updateDetails()
is called to update the details of the PaymentRequest
, using shippingAddress
to set the correct shipping cost.
// Initialization of PaymentRequest arguments are excerpted for brevity. var payment = new PaymentRequest(supportedInstruments, details, options); request.addEventListener('shippingaddresschange', function(evt) { evt.updateWith(new Promise(function(resolve) { updateDetails(details, request.shippingAddress, resolve); })); }); 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, shippingAddress, resolve) { if (shippingAddress.country === 'US') { var 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 | Status | Comment |
---|---|---|
Payment Request API | Candidate Recommendation | Initial definition. |
Browser Compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
shippingAddress | Chrome Full support 61 | Edge Full support 15 | Firefox
Full support
56
| IE No support No | Opera No support No | Safari Full support Yes | WebView Android No support No | Chrome Android
Full support
56
| Firefox Android
Full support
56
| Opera Android No support No | Safari iOS Full support Yes | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.