PaymentRequest.PaymentRequest()

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
For early implementations of the spec, this is a required sequence of identifiers for payment methods that the merchant web site accepts. Starting with Chrome 57, this parameter is more generic than credit cards and the meaning of the data parameter changes with the supportedMethod.
data
A JSON-serializable object that provides optional information that might be needed by the supported payment methods.
supportedNetworks
A sequence of identifiers for card networks that the merchant accepts. This parameter is supported from Chrome 57 onwards. This property is required if the supporetedMethods property is 'basic-card'.
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.

Examples

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.
  }

In Chrome 57 and later

The structure of the methodData parameter changed in Chrome 57. Specifically, supportedMethods ceased to be a list of credit cards and became a more generic payment type. And, under data, the supportedNetworks paramater is added. When methodData is  'basic-card', supportedNetworks will be a list of credit cards. 

For example, consider this code from the initial implementation of the spec: 

var methodData = [{
  supportedMethods: ['visa', 'mastercard', 'amex', 'jcb']
}];
var request = new PaymentRequest(methodData, details, options);

Though this is still supported in Chrome 57,  you could also do this:

var methodData = [{
  supportedMethods: ['basic-card'],
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
      'diners', 'discover', 'mir', 'unionpay']
  }
}];
var request = new PaymentRequest(methodData, details, options);

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

No support

? ?

No support

?
supportedNetworks parameter

No support

? ?

No support

?
Feature Android Webview Chrome for Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support

No support

53.0 ? ? ?

No support

?
supportedNetworks parameter

No support

57.0

? ? ?

No support

?

Document Tags and Contributors

 Contributors to this page: jpmedley, dgashmdn
 Last updated by: jpmedley,