Upcoming W3C Payment API changes in Chrome 76

[Danyao Wang]

The following changes are coming to Chrome 76.

Canary: today  | Beta: June 13, 2019  | Stable: July 30, 2019

New features enabled by default:

• PaymentRequestEvent.changePaymentMethod()

• Improved local development: --ignore-certificate-errors flag.

New features available for testing:
Use chrome://flags#enable-web-payments-experimental-features

• Shipping address redaction

PaymentRequestEvent.changePaymentMethod()

This Payment Handler API feature allows payment handlers (e.g. Google Pay) to trigger the merchant’s paymentmethodchange event handler. It returns a Promise that resolves to a merchant response with updated price information (e.g. tax recalculation).

Payment handler example:

self.addEventListener('paymentrequest', (evt) => {  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {    if (evt.changePaymentMethod === undefined) {      // Not implemented in this version of Chrome.      return;    }    // Notify merchant that the user selected a different payment method.    evt.changePamentMethod(‘https://paymentapp.com’, {country: ‘US’})    .then((responseFromMerchant) => {      if (responseFromMerchant === null) {        // Merchant ignored the ‘paymentmethodchange’ event.        return;      }      handleResponseFromMerchant(responseFromMerchant);    })    .catch((error) => {      handleError(error);    });  })); });

Merchant example:

if (request.onpaymentmethodchange === undefined) {  // Feature not available in this version of Chrome.  return; } request.addEventListener('paymentmethodchange', (evt) => {  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails)); });

Demo: https://rsolomakhin.github.io/pr/apps/pmc/.

Improved local development: --ignore-certificate-errors

Chrome 76 adds a small improvement for developer productivity: if your local development environment uses a self-signed certificate, you can now use the --ignore-certificate-errors command-line flag to make Chrome allow web payments APIs in your development environment.

Shipping address redaction

Visit chrome://flags/#enable-web-payments-experimental-features to enable this feature.

With this change, if merchant’s shippingaddresschange event handler reads the PaymentRequest.shippingAddress attribute, it will notice that the recipient, organization, addressLine and phone fields are now redacted, whereas before Chrome 76, these fields contained valid information. This reduces unnecessary exposure of user’s personal information to the merchant before the user fully commits to the transaction. This brings Chrome in compliance with the spec.

Chrome will continue to return the full shipping address in PaymentResponse, which is not affected by this change.

[Danyao Wang]

FYI: Chrome 76 is now available in the stable channel.