Don't miss out on the action at this year's Chrome Dev Summit, happening on Oct 23rd and 24th. Learn more.

Changes in the Payment Request API

Since the launch of the Payment Request API in Chrome 53, a few changes have been made to the API. These changes won't break the functionalities of your working code, but we recommend you to add a shim to your code so that future changes won't break your product.

Chrome 57

PaymentRequest is now available inside iframes

The Payment Request API can now be called from within an iframe by adding the allowpaymentrequest attribute to the iframe element.

<iframe src="/totally/fake/url" allowpaymentrequest></iframe>

PaymentMethodData supports "basic-card"

The first argument to PaymentRequest() constructor is an array of payment method data. The PaymentMethodData format has been altered in this release.

Old - still works for the time being.

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

New - the new structure.

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

The format of the data property depends on the value in supportedMethods and is based on the Basic Card specification. Note that the spec includes supportedTypes which accepts credit, debit or prepaid, but Chrome 57 ignores this property and treats any values in supoprtedNetworks as credit cards.

var methodData = [{
  supportedMethods: ['basic-card'],
  data: {
    supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
      'diners', 'discover', 'mir', 'unionpay'],
    supportedTypes: ['credit'] <= not available
  }
}];

Chrome 56

pending

As part of payment item information, developers can add pending to indicate that the price is not fully determined yet. The pending field accepts a boolean value.

{
  label: "State tax",
  amount: { currency: "USD", value : "5.00" },
  pending: true
},

This is commonly used to show line items such as shipping or tax amounts that depend on selection of shipping address or shipping options. Chrome indicates pending fields in the UI for the payment request.

requestPayerName

As part of shipping option (third argument to PaymentRequest), developers can now add requestPayerName to request the payer's name separate from shipping address information. requestPayerName accepts a boolean value.

shippingType

As part of shipping option (third argument to PaymentRequest), developers can now add shippingType to request that the UI show "delivery" or "pickup" instead of "shipping". shippingType accepts the strings shipping (default), delivery, or pickup.

shippingType="delivery"
shippingType="delivery"
shippingType="pickup"
shippingType="pickup"

Serializer functions available to PaymentResponse and PaymentAddress

PaymentResponse object and PaymentAddress object are now JSON-serializable. Developers can convert one to a JSON object by calling the toJSON() function and avoid creating cumbersome toDict() functions.

request.show().then(response => {
  let res = response.toJSON();
});

canMakePayment

In addition to the API availability, you can check to see if a user has an active payment method before invoking the Payment Request API. Remember that this is optional as users can still add a new payment method on the payment UI.

let request = new PaymentRequest(methods, details, options);
if (request.canMakePayment) {
  request.canMakePayment().then(result => {
    if (result) {
      // Payment methods are available.
    } else {
      // Payment methods are not available, but users can still add
      // a new payment method in Payment UI.
    }
  }).catch(error => {
    // Unable to determine.
  });
}