Obtén información para configurar una app de pagos basada en la Web durante el registro.
Las apps de pago basadas en la Web son apps web progresivas (AWP) y se ejecutan en trabajadores de servicio. El trabajador de servicio en una app de pagos desempeña un papel importante, ya que captura las solicitudes de pago de un comercio, inicia la app de pagos y media 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 trabajador de servicio. Puedes configurar tu app de pagos basada en la Web de forma declarativa con un manifiesto de app web.
Navegadores compatibles
Los pagos web constan de varias tecnologías diferentes, y el estado de compatibilidad depende del navegador.
Cómo configurar una app de pagos con un manifiesto de app web
Para configurar tu app de pagos basada en la Web de forma declarativa, publica un manifiesto de app web.
Las siguientes propiedades del manifiesto de la app web son relevantes para las apps de pagos basadas en la Web:
nameiconsserviceworkersrcscopeuse_cache
Consulta Cómo configurar una forma de pago para asegurarte de que el manifiesto de la forma de pago se dirija correctamente al manifiesto de la app web.
Registra un service worker justo a tiempo (JIT)
El registro de JIT solo requiere la entrega de el manifiesto de la app web y no requiere codificación adicional. Si ya configuraste el manifiesto de la app web y lo entregas correctamente, no necesitas hacer nada más. El navegador se encargará del resto.
Cómo depurar una app de pago basada en la Web
Cuando desarrolles un frontend de app de pagos basado en la Web, es probable que saltes entre el contexto del comercio y el contexto de la app de pagos. Las siguientes sugerencias de depuración te ayudarán a desarrollar tu experiencia de desarrollo en Chrome.
Cómo desarrollar en un servidor local
¿Qué servidor usas para el desarrollo? Muchos desarrolladores suelen usar localhost o un entorno de servidor interno de la empresa, lo que puede ser un desafío porque las funciones potentes del navegador suelen requerir un entorno seguro (HTTPS) y un certificado válido. La Payment Request API y la Payment Handler API no son una excepción, y los hosts locales o los servidores internos de la empresa suelen no tener un certificado válido.
La buena noticia es que algunos navegadores, incluido Chrome, eximen certificados para http://localhost de forma predeterminada. También en Chrome, puedes iniciar una instancia de Chrome para eximir el requisito de certificado. Por ejemplo, para eximir el requisito 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 Ejecuta Chromium con marcas.
Reenvío de puertos a un servidor local
Puedes reenviar el puerto del servidor web local a un dispositivo Android con DevTools de Chrome y probar cómo funciona desde un navegador para dispositivos móviles. Para obtener más información, consulta Cómo acceder a los servidores locales.
Depuración remota de un sitio web en Chrome para Android desde las Herramientas para desarrolladores de escritorio
También puedes depurar Chrome para Android en las Herramientas para desarrolladores para computadoras. Para obtener información sobre cómo hacerlo, consulta Cómo comenzar a usar los dispositivos Android de depuración remota.
Registro de eventos del controlador de pagos
Las Herramientas para desarrolladores pueden mostrar eventos de la API de Payment Handler para facilitar el desarrollo local. Abre DevTools en el contexto del comercio y ve a la sección “Controlador de pagos” en el panel Application. Marca "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.
Próximos pasos
El siguiente paso es aprender cómo el trabajador de servicio puede organizar una transacción de pago durante el tiempo de ejecución.