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

Cómo integrar tu app de pagos web con los pagos web y brindar una mejor experiencia del usuario a los clientes

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

Los pagos web constan de varias tecnologías diferentes, y el estado de compatibilidad depende del navegador.

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

Beneficios de las apps 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 ventanas modales, en el contexto del sitio web del comercio, lo que proporciona una mejor experiencia del usuario que las técnicas típicas de las apps de pago 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 es necesario instalarlas con anticipación.

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

Las apps de pago basadas en la Web se compilan con las tecnologías web estándar. Todas las apps de pagos basadas en la Web deben incluir un service worker.

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

  • Abrir una ventana modal y mostrar la interfaz de la app de pagos
  • Vincula 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 información sobre cómo funciona una app de pagos en un comercio en Ciclo de vida de una transacción de pago.

Cómo descubren tu app de pagos los comercios

Para que un comercio use tu app de pagos, debe usar la Payment Request API 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 de pagos, puedes configurar tu propio manifiesto de forma de pago y permitir que los navegadores descubran tu app.

Descubre cómo funciona y cómo puedes establecer una forma de pago nueva en Configura una forma de pago.

APIs que puedes usar dentro de 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, como 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 de la viewport está inhabilitado.
  • window.open() está inhabilitada.

Compatibilidad con WebAuthn

WebAuthn es un mecanismo de autenticación basado en la criptografía de clave pública. Puedes permitir que los usuarios accedan con una verificación biométrica. WebAuthn ya es compatible con la ventana del controlador de pagos en Chrome, y el organismo estándar está intentando 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. Se planea habilitarlo en Chrome, pero aún está en desarrollo.

Compatibilidad con WebOTP

La API de WebOTP te ayuda a obtener de forma programática una OTP de un mensaje SMS y a verificar un número de teléfono para el usuario con mayor facilidad. Está planificado habilitarse en Chrome, aunque aún está en desarrollo.

Puedes consultar la lista de problemas conocidos y las funciones que se planean agregar a la ventana del controlador de pagos en la Herramienta de seguimiento de errores de Chromium.

Próximos pasos

Para comenzar a crear una app de pagos basada en la Web, tienes tres partes distintas que implementar: