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:
- Use Chrome 108, 109, or 110.
- Enter
chrome://flags/#clear-identity-in-can-make-payment
in the URL bar. - Enable the flag.
- 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:
- Request a token for your origin.
- 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...
Re-enable the identity fields locally after Chrome 111
If you are using Chrome 111 or later, the identity fields in the canmakepayment
event are left empty. To re-enable the fields locally, you can do the following:
- Use Chrome 111 or later.
- Enter
chrome://flags/#add-identity-in-can-make-payment
in the URL bar. - Enable the flag.
- Relaunch Chrome.
Next steps
This change is planned to be enabled by default from Chrome 111. You can start testing today to be prepared for the change in time for the launch.