Descripción general de las apps de pago basadas en la Web

Cómo integrar tu aplicación de pagos basada en la Web con Web Payments y brindar una mejor experiencia del usuario a los clientes

Los pagos web llevan a la Web a una interfaz integrada del navegador que permite a los usuarios ingresar la información de pago requerida de forma más fácil que nunca. Las APIs pueden invocar apps de pagos basadas en la Web, así como apps de pago de Android.

Navegadores compatibles

Web Payments consta de diferentes tecnologías, y el estado de compatibilidad depende del navegador.

Chromium Safari Firefox
Computadoras Android Computadoras Dispositivos móviles Computadoras/dispositivos móviles
API de Payment Request
API de Payment Handler
App de pagos para iOS/Android ✔* ✔*

Beneficios de las aplicaciones de pagos basadas en la Web

Flujo de confirmación de la compra con una app de pagos basada en la Web.
  • Los pagos se realizan en modos modales, en el contexto del sitio web del comercio, lo que proporciona una mejor experiencia del usuario que las técnicas típicas de apps de pagos que usan redireccionamientos o ventanas emergentes.
  • Las APIs de pagos web se pueden integrar en sitios web establecidos, lo que te permite aprovechar la base de usuarios existente.
  • A diferencia de las apps específicas de la plataforma, las apps de pagos basadas en la Web no necesitan instalarse por adelantado.

¿Cómo funciona una aplicación de pagos basada en la Web?

Las aplicaciones de pago basadas en la Web se crean con las tecnologías web estándar. Cada app de pago basada en la Web debe incluir un service worker.

En una app de pagos basada en la Web, un service worker puede actuar como mediador de las solicitudes de pago de la siguiente manera:

  • Apertura de una ventana modal y visualización de la interfaz de la app de pagos.
  • Unir la comunicación entre la app de pagos y el comercio
  • Obtener una autorización del cliente y pasar la credencial de pago al comercio

Obtén más información sobre el funcionamiento de una app de pagos en un comercio en Ciclo de una transacción de pago.

Cómo descubren los comercios tu app de pagos

Para que un comercio pueda usar tu app de pagos, debe usar la API de Payment Request y especificar la forma de pago que admites con el identificador de forma de pago.

Si tienes un identificador de forma de pago único para tu app, puedes configurar tu propio manifiesto de forma de pago y permitir que los navegadores la descubran.

Descubre cómo funciona y cómo puedes configurar una forma de pago nueva en Cómo configurar una forma de pago.

APIs que puedes usar en la ventana del controlador de pagos

Una “ventana del controlador de pagos” es una ventana en la que se inician las apps de pagos. En Chrome, dado que es una ventana normal del navegador Chrome, la mayoría de las APIs web deberían funcionar como si se usaran en un documento de nivel superior, con solo algunas excepciones:

  • El cambio de tamaño del viewport está inhabilitado.
  • window.open() está inhabilitada.

Compatibilidad con WebAuthn

WebAuthn es un mecanismo de autenticación basado en la criptografía de claves públicas. Puedes permitir que los usuarios accedan mediante una verificación biométrica. WebAuthn ya es compatible con la ventana del controlador de pagos en Chrome, y el cuerpo estándar intenta crear una conexión aún más estrecha entre Web Payments y WebAuthn.

Compatibilidad con la API de Credential Management

La API de Credential Management proporciona una interfaz programática entre el sitio y el navegador para un acceso fluido en todos los dispositivos. Puedes permitir que los usuarios accedan a tu sitio web automáticamente según la información almacenada en el administrador de contraseñas del navegador. En Chrome, se planea habilitarla, pero aún está en desarrollo.

Compatibilidad con WebOTP

La API de WebOTP te ayuda a obtener un OTP de manera programática a partir de un mensaje SMS y verificar el número de teléfono del usuario con más facilidad. Está prevista para habilitarse en Chrome, pero aún está en desarrollo.

Puedes consultar la lista de problemas conocidos y funciones que planeamos agregar a la ventana del controlador de pagos en la herramienta de seguimiento de errores de Chromium.

Próximos pasos

Para comenzar a compilar una app de pagos basada en la Web, debes implementar tres partes: