Obtén información para configurar una app de pagos basada en la Web durante el registro.
Las apps de pagos basadas en la Web son apps web progresivas (AWP) y se ejecutan sobre los trabajadores de servicio. El service worker de una app de pagos desempeña una función 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 service worker. Puedes configurar tu app de pagos basada en la Web de forma declarativa con un manifiesto de app web.
Navegadores compatibles
Web Payments consta de diferentes tecnologías, y el estado de compatibilidad depende del navegador.
Configura una app de pagos con un manifiesto de app web
Para configurar tu app de pagos basada en la Web de forma declarativa, entrega 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 tu forma de pago se dirija correctamente al manifiesto de tu app web.
Registra un service worker justo a tiempo (JIT)
El registro JIT solo requiere la entrega del manifiesto de la app web y no requiere programación adicional. Si ya configuraste el manifiesto de la app web y lo publicas correctamente, no debes hacer nada más. El navegador se encargará del resto.
Depuración de una aplicación de pagos basada en la Web
Cuando desarrolles un frontend de app de pagos basada en la Web, es probable que debas alternar entre el contexto del comercio y el de la app de pagos. Las siguientes sugerencias de depuración te ayudarán con 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 ser un desafío porque las funciones potentes del navegador tienden a requerir un entorno seguro (HTTPS) y un certificado válido. La API de Payment Request y la API de Payment Handler no son una excepción, y los localhost o los servidores internos de la empresa no suelen incluir 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 eximir el requisito de certificado mediante el inicio de una instancia de Chrome. 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 Cómo ejecutar Chromium con marcas.
Redirección de puertos de un servidor local
Puedes redireccionar el servidor web local a un dispositivo Android con las Herramientas para desarrolladores de Chrome y probar su funcionamiento desde un navegador para dispositivos móviles. Para aprender a hacerlo, consulta Cómo acceder a servidores locales.
Depurar de forma remota 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 de escritorio. Si quieres obtener información para hacerlo, consulta Cómo comenzar a usar la depuración remota de dispositivos Android.
Registro de eventos del controlador de pagos
DevTools puede mostrar eventos de la API de Payment Handler para facilitar el desarrollo local. Abre las Herramientas para desarrolladores en el contexto de los comercios y ve a la sección “Controlador de pagos” en el panel Aplicación. Marca la opción "Show events from other domains" (Mostrar eventos de otros dominios) y haz clic en el botón "Record" (Grabar) para comenzar a capturar los eventos enviados al service worker que controla los pagos.
Próximos pasos
El siguiente paso es aprender cómo el service worker puede organizar una transacción de pago en el tiempo de ejecución.