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

Obtén información para configurar una app de pagos 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.

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 ✔* ✔*

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:

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

Consulta Cómo configurar una forma de pago para asegurarte de que el manifiesto de tu forma de pago apunte al manifiesto de tu app web correctamente.

Registra un service worker just-in-time (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 tu app web y lo publicas correctamente, deberías estar listo. El navegador se encargará del resto.

Cómo depurar una app de pagos 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 con 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 los 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 Cómo ejecutar 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.

Cómo depurar de forma remota un sitio web en Chrome para Android desde DevTools para computadoras

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 los eventos que se envían al trabajador del servicio que controla 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 trabajador de servicio puede organizar una transacción de pago durante el tiempo de ejecución.