How to integrate your web-based payment app with Web Payments and provide a better user experience for customers.
Web Payments brings to the web a browser's built-in interface that allows users to enter required payment information easier than ever before. The APIs can invoke web-based payment apps, as well as Android payment apps.
Web Payments consists of a few different pieces of technologies and the support status depends on the browser.
Chromium | Safari | Firefox | ||||
Desktop | Android | iOS | Desktop | Mobile | ||
Payment Request API | ✔ | ✔ | ✔ | ✔ | Under active development | |
Payment Handler API | ✔ | ✔ | Under active development | |||
iOS/Android payment app | ✔ | ✔ | * | ✔** | ✔** |
*Chrome is considering making built-in payment apps available on iOS.
**Safari supports Apple Pay but no third party payment apps.
Web-based payment apps are built using the standard web technologies. Every web-based payment app must include a service worker.
A Service worker is an event-driven script that runs in the background even if the registering website is not open in the browser. Service workers enable websites to work offline and send push notifications, because they can respond to requests with a cache that is stored locally in advance.
In a web-based payment app, a service worker can act as a mediator for payment requests by:
Learn how a payment app works on a merchant in Life of a payment transaction.
In order for a merchant to use your payment app, they need to use the Payment Request API and specify the payment method you support using the payment method identifier.
If you have a payment method identifier that is unique to your payment app, you can set up your own payment method manifest and let browsers discover your app.
Learn how it works and how you can set up a new payment method in Setting up a payment method.
A "payment handler window" is a window in which payment apps are launched. In Chrome, since it's a regular Chrome browser window, most web APIs should work as if used in a top-level document, with only a few exceptions:
window.open()
is disabled.Caution: Payment Handler API is only supported in Chrome as of July 2020. However, since Chromium based browsers already have the implementation, some of them may expose the API in the future. Also, Mozilla recently announced it's implementing the API.
WebAuthn is an authentication mechanism based on the public key cryptography. You can let users sign-in through a biometric verification. WebAuthn is already supported in the payment handler window on Chrome, and the standard body is looking into creating an even-tighter connection between Web Payments and WebAuthn.
The Credential Management API provides a programmatic interface between the site and the browser for seamless sign-in across devices. You can let users sign-in to your website automatically based on the information stored to the browser's password manager. It's planned to be enabled in Chrome, but still under development.
The Web OTP API helps you programmatically obtain an OTP from an SMS message and verify a phone number for the user more easily. It's planned to be enabled in Chrome, but still under development.
You can check out the list of known issues and features planned to be added to the payment handler window in the Chromium bug tracker.
To start building a web-based payment app, you have three distinct parts to implement: