This article needs a technical review. How you can help.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The PaymentRequest()
constructor creates a new PaymentRequest object.
Syntax
var paymentRequest = new PaymentRequest(methodData, details [, options]);
Returns
An instance of the PaymentRequest interface.
Parameters
- methodData
- Contains the payment method identifiers for the payment methods the merchant web site accepts and any associated payment method specific data. methodData contains the following fields.
- supportedMethods
- A required sequence of strings containing payment method identifiers for payment methods that the merchant web site accepts.
- data
- A JSON-serializable object that provides optional information that might be needed by the supported payment methods.
- details
- Provides information about the requested transaction. details contains the following fields.
- total
- The total amount of the payment request.
- displayItems
- 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.
Example
The following example shows minimal functionality and focuses instead on showing the complete context of instantiating a PaymentRequest
object.
var supportedInstruments = [{ supportedMethods: [ 'amex', 'diners', 'discover', 'jcb', 'maestro', 'mastercard', 'visa' ] }]; var details = { total: {label: 'Donation', amount: {currency: 'USD', value: '55.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 API The definition of 'constructor' in that specification. |
Working Draft | Initial definition. |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support |
53.0 |
? | ? | ? | ? |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | No support | 53.0 | ? | ? | ? | ? | ? | 53.0 |