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 PaymentRequest()
constructor creates a new PaymentRequest
object.
var paymentRequest = new PaymentRequest(methodData[], details, [options]);
An instance of the PaymentRequest
interface.
DOMString
, and the meaning of the data
parameter changes with the supportedMethods
.BasicCardRequest
dictionary.details.displayItems
property. This property is commonly used to add a discount or surcharge line item indicating the different amount in details.modifiers.total
.BasicCardRequest
dictionary.details.modifiers.additionalItems
adds a discount or a surchase to the request.false
.false
.false
.shippingType
. The default is false
."shipping"
, "delivery"
, and "pickup"
. Quotation marks must be included. The default value is "shipping"
.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. |
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support | 60 | (Yes) | 56 (56) | ? | No support | ? |
supportedNetworks parameter | 60 | ? | 56 (56) | ? | No support | ? |
options.requestPayerName | 60 | ? | No support[1] | ? | No support | ? |
details.id | 60 | ? | ? | ? | No support | ? |
details.modifiers.data | 61 | ? | ? | ? | No support | ? |
Feature | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|
Basic support | No support | 53 | (Yes) | 56 (56) | ? | No support | ? |
supportedNetworks parameter | No support | 57 | ? | 56 (56) | No support | No support | ? |
options.requestPayerName | No support | 58 | ? | No support[1] | ? | No support | ? |
details.id | No support | 60 | ? | ? | ? | No support | ? |
details.modifiers.data | No support | 61 | ? | ? | ? | No support | ? |
[1] Supported but disabled on all versions. Hidden behind the dom.payments.request.enabled
pref.
© 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