Contenidos
How to integrate your web-based payment application with Web Payments and provide a better user experience for customers.
Web Payments brings an integrated browser interface to the web that allows users to enter required payment information easier than ever. APIs can invoke web-based payment applications as well as native payment applications.
Browser support
Web Payments consists of a few different technologies and the support status is browser dependent.
| Chrome | Safari | Firefox | ||||
| Desk | Android | ios | Desk | Mobile | ||
| Payment request API | ✔ | ✔ | ✔ | ✔ | In active development | |
| Payment Controller API | ✔ | ✔ | In active development | |||
| Native payment application | ✔ | ✔ | * | ✔ ** | ✔ ** |
* Chrome is considering making native paid apps available on iOS.
** Safari is compatible with Apple Pay but not with third-party payment applications.
Benefits of web-based payment applications
Payment flow with a web-based payment application.
- Payments are made in manners, in the context of the merchant's website, which provides a better user experience than typical payment application techniques that use redirects or pop-ups.
- The Web Payments APIs can be integrated into established websites, allowing you to take advantage of your existing user base.
- Unlike native applications, web-based payment applications do not need to be installed in advance.
How does a web-based payment application work?
Web-based payment applications are created using standard web technologies. Each web-based payment application must include a service worker.
A Service worker
it is an event driven script that runs in the background even if the registration website is not open in the browser. Service workers allow websites to go offline and send automatic notifications, as they can respond to requests with a cache that is stored locally in advance.
In a web-based payment application, a service worker can act as a mediator for payment requests by:
- Opening a modal window and showing the payment application interface.
- Bridging the communication between the payment application and the merchant.
- Obtain authorization from the customer and pass the payment credential to the merchant.
Learn how a payment application works at a merchant in the life of a payment transaction.
How Merchants Discover Your Payment App
For a merchant to use your payment application, they must use the Payment request API and specify the payment method you support using the payment method identifier.
If you have a unique payment method identifier for your payment application, you can set up your own payment method manifest and allow browsers to discover your application.
Learn how it works and how you can set up a new payment method in Setting up a payment method.
API that you can use within the payment controller window
A "payment management window" is a window in which payment applications start. In Chrome, since it is a normal Chrome browser window, most web APIs should work as if they were used in a top-level document, with only a few exceptions:
- Viewport resizing is disabled.
window.open ()it's off.
WebAuthn support
WebAuthn it is an authentication mechanism based on public key cryptography. You can allow users to log in using biometric verification. WebAuthn already supports the payment controller window in Chrome, and the standard body is looking to create an even closer connection between Web Payments and WebAuthn.
Credential Management API support
The credential management API
provides a programmatic interface between the site and the browser for seamless logging on all devices. You can allow users to log into your website automatically based on information stored in the browser's password manager. It is intended to be enabled in Chrome, but still Developing.
WebOTP support
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 is intended to be enabled in Chrome, but still Developing.
You can check the list of known issues and features that are planned to be added to the payment controller window at Chrome Bug Tracker.
Next steps
To start building a web-based payment application, you have three different parts to implement:
