Bring your payment method to the web with the Payment Handler API

What is the Payment Handler API?

The Payment Request API introduced an
open, standards-based way to accept payments in a browser. It can collect
payment credentials as well as shipping and contact information from the payer
through a quick and easy user interface.

The Payment Handler API opens up a
whole new ecosystem to payment providers. It allows a web-based payment
application (using an installed service worker) to act as a payment method and
to be integrated into merchant websites through the standard Payment Request
API.

User experience

From a user's point of view, the user experience looks like this:

A user decides to purchase an item and presses the "Buy Now" button on the
product detail page.

Notice there are three parties involved: an end user, a merchant website, and a
payment handler provider.

Merchants' developer experience

For a merchant website, integrating an existing payment app is as easy as adding
an entry to supportedMethods (payment method identifier) and optionally an
accompanying data to the first argument of the Payment Request API. For example,
to add a payment app called BobPay with the payment
method identifier of https://bobpay.xyz/pay, the code would be:

If a service worker that can handle the BobPay payment method is installed, the
app will show up in the Payment Request UI and the user can pay by selecting it.
In some cases, Chrome will skip ahead to the Payment Handler, providing a swift
payment experience!

Chrome also supports a non-standard feature we call just-in-time (JIT)
installation. In our example, this would allow BobPay's trusted Payment Handler
to be installed on the fly without the user having visited BobPay's website in
advance. Note that the installation only happens after the user explicitly
selects BobPay as their payment method within the Payment Request UI. Also note
that a payment method (BobPay) can only specify a maximum of one trusted Payment
Handler that can be installed just-in-time.

How to build a Payment Handler

To build a payment handler, you'll need to do a little more than just
implementing the Payment Handler API.

Install a service worker and add payment instruments

The heart of the Payment Handler API is the service worker. On your payment app
website, register a service worker and add payment instruments through
paymentManager under a ServiceWorkerRegistration object.

Listen to paymentrequest events and get user consent for payment

To handle actual payment requests, listen to paymentrequest events in the
service worker. When one is received, open a separate window and return a
payment credential after getting the user's authorization for a payment.