Secure context
This 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.
var paymentRequest = new PaymentRequest(methodData, details, [options]);
methodData
supportedMethods
DOMString
, and the meaning of the data
parameter changes with the supportedMethods
. For example, the basic card payment method is selected by specifying the string basic-card
here.data
supportedMethods
. For basic credit card services, this structure should match the BasicCardRequest
dictionary.details
total
id
Optional
displayItems
shippingOptions
modifiers
additionalDisplayItems
details.displayItems
property. This property is commonly used to add a discount or surcharge line item indicating the different amount in details.modifiers.total
.data
BasicCardRequest
dictionary.total
details.modifiers.additionalItems
adds a discount or a surchase to the request.options
Optional
requestPayerName
false
.requestPayerEmail
false
.requestPayerPhone
false
.requestShipping
shippingType
. The default is false
.shippingType
"shipping"
, "delivery"
, and "pickup"
. Quotation marks must be included. The default value is "shipping"
.A new PaymentRequest
object, configured for use as configured by the input parameters.
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'], supportedTypes: ['credit', 'debit'] } }]; 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. }
Specification | Status | Comment |
---|---|---|
Payment Request API The definition of 'PaymentRequest() constructor' in that specification. | Candidate Recommendation | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 61
|
Yes | 55
|
No | No | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | No | 53
|
Yes | 55
|
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/PaymentRequest/PaymentRequest