Secure contextThis feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The PaymentRequest()
constructor creates a new PaymentRequest
object which will be used to handle the process of generating, validating, and submitting a payment request.
Syntax
var paymentRequest = new PaymentRequest(methodData, details, [options]);
Parameters
methodData
- Contains an array of identifiers for the payment methods the merchant web site accepts and any associated payment method specific data. Each item in the array contains the following fields:
supportedMethods
- For early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant website accepts. Starting with more recent browsers, this parameter is more generic than credit cards, it is a single
DOMString
, and the meaning of thedata
parameter changes with thesupportedMethods
. For example, the basic card payment method is selected by specifying the stringbasic-card
here. data
- A JSON-serializable object that provides optional information that might be needed by the supported payment methods. This has to conform to the type expected by the payment handler indicated by
supportedMethods
. For basic credit card services, this structure should match theBasicCardRequest
dictionary.
details
- Provides information about the requested transaction. This parameter contains the following fields:
total
- The total amount of the payment request.
id
Optional- A free-form identifier for this payment request. If a value is not supplied, the browser will construct one.
displayItems
- An array of optional line items for the payment request that the user agent may display, such as product details, tax, and shipping.
shippingOptions
- The shipping options the user may choose from. If this sequence is blank, it indicates the merchant cannot ship to the current shipping address. The default shipping option may be indicated in this sequence.
modifiers
- Modifiers for specific payment methods; for example, adjusting the total amount based on the payment method. This parameter contains the following fields:
additionalDisplayItems
- An array of items to be appended to the
details.displayItems
property. This property is commonly used to add a discount or surcharge line item indicating the different amount indetails.modifiers.total
. data
- A JSON-serializable object that provides optional information that might be needed by the supported payment methods. This has to conform to the structure defined in the
BasicCardRequest
dictionary. total
- A total amount for the payment request that overrides value in details.total. This is typically used when
details.modifiers.additionalItems
adds a discount or a surchase to the request.
options
Optional- Lets you set options that control the behavior of the user agent. This parameter contains the following fields:
- ;;
requestPayerName
- A Boolean indicating whether the user agent should collect the payer's name and submit it with the payment request. The default is
false
. requestPayerEmail
- A Boolean indicating whether the user agent should collect the payer's email address and submit it with the payment request. The default is
false
. requestPayerPhone
- A Boolean indicating whether the user agent should collect the payer's phone number and submit it with the payment request. The default is
false
. requestShipping
- A Boolean indicating whether the user agent should collect the payer's shipping address and submit it with the payment request. If you set this type to true, you should select an appropriate
shippingType
. The default isfalse
. shippingType
- Lets you specify how the user interface refers to shipping when the word 'shipping' isn't appropriate for your use case. For example, in English speaking countries you would say "pizza delivery" not "pizza shipping". Valid values are
"shipping"
,"delivery"
, and"pickup"
. Quotation marks must be included. The default value is"shipping"
.
Return value
A new PaymentRequest
object, configured for use as configured by the input parameters.
Examples
The following example shows minimal functionality and focuses instead on showing the complete context of instantiating a PaymentRequest
object.
var supportedInstruments = [{
supportedMethods: 'basic-card',
data: {
supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
'diners', 'discover', 'mir', 'unionpay']
}
}];
var details = {
total: {label: 'Donation', amount: {currency: 'USD', value: '65.00'}},
displayItems: [
{
label: 'Original donation amount',
amount: {currency: 'USD', value: '65.00'}
}
],
shippingOptions: [
{
id: 'standard',
label: 'Standard shipping',
amount: {currency: 'USD', value: '0.00'},
selected: true
}
]
};
var options = {requestShipping: true};
try {
var request = new PaymentRequest(supportedInstruments, details, options);
// Add event listeners here.
// Call show() to trigger the browser's payment flow.
request.show().then(function(instrumentResponse) {
// Do something with the response from the UI.
})
.catch(function(err) {
// Do something with the error from request.show().
});
} catch (e) {
// Catch any other errors.
}
Specifications
Specification | Status | Comment |
Payment Request APIThe definition of 'PaymentRequest() constructor' 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-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
PaymentRequest() constructor
|
Chrome
Full support 60 |
Edge
Full support 15 |
Firefox No support No No support No Notes' Available only in nightly builds. |
IE
No support No |
Opera
Full support 47 |
Safari
Full support 11.1 |
WebView Android
No support No |
Chrome Android
Full support 53 |
Firefox Android No support No No support No Notes' Available only in nightly builds. |
Opera Android
Full support 44 |
Safari iOS
Full support 11.3 |
Samsung Internet Android
Full support 6.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.'
- See implementation notes.
PaymentRequest.PaymentRequest() by Mozilla Contributors is licensed under CC-BY-SA 2.5.