Chrome nettleser, News

Update to the CanMakePayment event behavior of the Payment Handler API

The Payment Handler API
allows payment providers to make their custom payment experience available for
merchants, along with the Payment Request
API
. When the Payment Request
API
is initialized via the
new PaymentRequest() constructor, it silently fires a canmakepayment event with
the merchant’s origin and arbitrary data to
a service worker that is registered for the Payment Handler API.
This cross-origin communication does not require a user gesture and does not
show any user interface.

Chrome is going to remove the identifying fields from canmakepayment event
and start the origin trial from Chrome 108.

The information on this page only applies to the payment app providers that use
the Payment Handler API. If you don’t use it, you can skip these instructions.

What’s changing?

When a merchant calls new PaymentRequest(), a registered service worker
receives a canmakepayment event
(CanMakePaymentEvent)
that contains following information:

  • topOrigin
  • paymentRequestOrigin
  • methodData
  • modifiers

These are going to be removed and the service worker will simply receive the
canmakepayment event without any additional information.

Feature detection

To detect whether the “canmakepayment” event is changed in the service worker
code, examine respective properties like so:

self.addEventListener(e => {
if (e.paymentRequestOrigin) {...}
if (e.topOrigin) {...}
if (e.methodData && e.methodData.length > 0) {...}
if (e.modifiers && e.modifiers.length > 0) {...}
...
});

Try out the change locally

To enable the change locally for development purposes:

  1. Use Chrome 108 or later.
  2. Enter chrome://flags/#clear-identity-in-can-make-payment in the URL bar.
  3. Enable the flag.
  4. Relaunch Chrome.

By enabling the flag, the identity fields in the “canmakepayment” event will be
emptied-out (and
the Android IS_READY_TO_PAY Intent).

Enable the change in production

You can also enable the change in production for testing purposes before it
actually lands in Chrome. This mechanism is called an origin trial.

Origin trials allow you to try new features and give feedback on their
usability, practicality, and effectiveness to the web standards community. For
more information, see the Origin Trials Guide for Web Developers.
To sign up for this or another origin trial, visit the registration page.

To register an origin trial:

  1. Request a token
    for your origin.
  2. Add the token to your service worker JavaScript file using an Origin-Trial
    HTTP header. Setting HTTP headers requires access to configuring your server.
    The resulting response header should look something like:
 Origin-Trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

To see the origin trial token on the service worker file,
use the DevTools
or the curl command like so:

$ curl --head <Service Worker JS file URL> | grep -i origin-trial
origin-trial: Auw/tjTQ2eJQ911wiMHi1Bb7i71...

Next steps

This change is planned to be enabled by default from Chrome 111. Start testing today to be prepared
for the change in time for the launch.

author-avatar

About Aksel Lian

En selvstendig full stack webutvikler med en bred variasjon av kunnskaper herunder SEO, CMS, Webfotografi, Webutvikling inkl. kodespråk..