Cómo registrar una app de pagos basada en la Web

Obtén información para configurar una app de pagos basada en la Web durante el registro.

Las aplicaciones de pago basadas en la Web son aplicaciones web progresivas (AWP) y ejecutarlas sobre el servicio trabajadores de la nube. El Un service worker en una app de pagos cumple una función importante, ya que captura solicitudes de un comercio, inicia la aplicación de pago y actúa como mediador en la comunicación con el comercio.

Para configurar una app de pagos basada en la Web, debes registrar las formas de pago disponibles y un service worker. Puedes configurar tu app de pagos basada en la Web declarativamente con un manifiesto de app web.

Navegadores compatibles

Los pagos web constan de diferentes tecnologías y la asistencia 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 y Android ✔* ✔*

Configura una app de pagos con un manifiesto de app web

Para configurar tu app de pagos basada en la Web de forma declarativa, publica una app web. .

Las siguientes propiedades del manifiesto de apps web son relevantes para las apps de pagos basadas en la Web:

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

Consulta Cómo configurar un pago método para asegurarse de que el manifiesto de su forma de pago dirija al manifiesto de su aplicación web correctamente.

Registra un service worker justo a tiempo (JIT)

El registro JIT solo requiere que se entreguen la aplicación web manifiesto ni código adicional. Si ya configuraste el manifiesto de tu app web y y que la estás entregando correctamente, debes estar todo listo. El navegador se encargará de el resto.

.

Depura una app de pagos basada en la Web

Al desarrollar un frontend de aplicaciones de pagos basado en la Web, probablemente pasarás el contexto del comercio y el contexto de la app de pagos. Las siguientes sugerencias de depuración te ayudarán tu experiencia de desarrollo en Chrome.

Desarrolla en un servidor local

¿Qué servidor usas para el desarrollo? Muchos desarrolladores tienden a usar localhost o un entorno de servidor interno de la empresa, lo que puede suponer un reto, Las funciones potentes del navegador suelen requerir un entorno seguro (HTTPS) y uno válido. La API de Payment Request y la API de Payment Handler son y los localhost o los servidores internos de la empresa no suelen tener un certificado válido.

La buena noticia es que algunos navegadores, incluido Chrome, eximen certificados para http://localhost de forma predeterminada. Además, en Chrome, puedes excluir el certificado mediante el inicio de una instancia de Chrome. Por ejemplo, para excluir el de http://*.corp.company.com, usa las siguientes marcas:

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Obtén más información para ejecutar Chrome con una marca de tiempo de ejecución en Ejecutar Chromium con marcas.

Redirección de puertos de un servidor local

Puedes redireccionar el puerto del servidor web local a un dispositivo Android a través del Herramientas para desarrolladores y probar cómo funciona desde un navegador para dispositivos móviles. Para aprender a hacerlo, consulta Acceder a servicios locales Servidores.

Depuración remota de un sitio web en Chrome para Android desde las Herramientas para desarrolladores de escritorio

También puedes depurar Android Chrome en las Herramientas para desarrolladores de escritorio. Para aprender a hacerlo, consulta Get Started with Remote Debugging Android Dispositivos.

Registro de eventos del controlador de pagos

Las Herramientas para desarrolladores pueden mostrar la API de Payment Handler. eventos para y facilitar el desarrollo local. Abre Herramientas para desarrolladores en el contexto del comercio y ve a "Controlador de pagos" en el panel Application. Marca la casilla "Mostrar eventos". de otros dominios" y haz clic en el botón "Grabar" para comenzar a capturar eventos enviados al service worker que maneja los pagos.

Captura de pantalla del registro de eventos del controlador de pagos.
Registro de eventos del controlador de pagos.

Próximos pasos

El siguiente paso es aprender cómo el service worker puede organizar un pago de transacciones en tiempo de ejecución.