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.
Note: All changes described here are already reflected in the existing integration guides.
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 pe nding
fieldaccepts 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
.
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.
});
}