Cómo integrar su aplicación de pago basada en Web con Web Payments y proporcionar una mejor user experience for customers.
Web Payments trae a la web una interfaz integrada del browser que permite a los usuarios ingresar la información de pago requerida más fácil que nunca. Las API pueden invocar aplicaciones de pago basadas en web, así como aplicaciones de pago nativas.
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.
- Los pagos se realizan en modales, en el contexto del sitio web del comerciante, que proporciona una mejor experiencia de Username que las técnicas típicas de aplicaciones de pago que utilizan redireccionamientos o ventanas emergentes.
- 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
es un script controlado por eventos que se ejecuta en segundo plano incluso si el sitio web de registro no está abierto en el navegador. Los trabajadores del servicio permiten que los sitios web trabajen sin conexión y envíen notificaciones automáticas, ya que pueden responder a las solicitudes con un cache que se almacena localmente con anticipación.
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.
- Obtener una autorización del client y pasar la credencial de pago al comerciante.
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.
Si tiene un identificador de método de pago exclusivo para su aplicación de pago, puede configurar su propio manifiesto de método de pago y permitir que los browsers descubran su aplicación.
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
La API de Web OTP le ayuda a obtener de forma programática una OTP a partir de un mensaje SMS y verificar un número de teléfono para el usuario más fácilmente. Está previsto que esté habilitado en Chrome, pero aún así 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:
