Como registrar um app de pagamento baseado na Web

Saiba como configurar um app de pagamento baseado na Web durante o registro.

Os apps de pagamento baseados na Web são Progressive Web Apps (PWA) e são executados sobre service workers. O service worker em um app de pagamentos desempenha um papel importante, já que captura solicitações de pagamento de um comerciante, inicia o app de pagamentos e faz a mediação da comunicação com o comerciante.

Para configurar um app de pagamento baseado na Web, é necessário registrar os métodos de pagamento disponíveis e um service worker. É possível configurar seu app de pagamento baseado na Web de forma declarativa com um manifesto de app da Web.

Suporte ao navegador

Os pagamentos na Web consistem em algumas tecnologias diferentes, e o status de suporte depende do navegador.

Chromium Safari Firefox
Computador Android Computador Dispositivo móvel Computador/dispositivo móvel
API Payment Request
API Payment Handler baseada na Web
App de pagamento para iOS/Android ✔* ✔*

Como configurar um app de pagamento com um manifesto de app da Web

Para configurar seu app de pagamento baseado na Web de forma declarativa, sirva um manifesto de app da Web.

As seguintes propriedades no manifesto do app da Web são relevantes para apps de pagamento baseados na Web:

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

Confira Como configurar uma forma de pagamento para garantir que o manifesto da forma de pagamento aponte corretamente para o manifesto do app da Web.

Como registrar um service worker just-in-time (JIT)

O registro JIT exige apenas a veiculação do manifesto do app da Web e não requer programação adicional. Se você já configurou o manifesto do web app e está veiculando corretamente, não precisa fazer mais nada. O navegador vai cuidar do resto.

Como depurar um app de pagamento baseado na Web

Ao desenvolver um front-end de app de pagamento baseado na Web, você provavelmente vai alternar entre o contexto do comerciante e o do app de pagamento. As dicas de depuração a seguir vão ajudar na sua experiência de desenvolvimento no Chrome.

Como desenvolver em um servidor local

Qual servidor você usa para desenvolvimento? Muitos desenvolvedores tendem a usar localhost ou um ambiente de servidor interno da empresa, o que pode ser um desafio porque recursos avançados no navegador geralmente exigem um ambiente seguro (HTTPS) e um certificado válido. A API Payment Request e a API Payment Handler baseada na Web não são exceção, e os servidores locais ou internos da empresa geralmente não vêm com um certificado válido.

A boa notícia é que alguns navegadores, incluindo o Chrome, isentam certificados para http://localhost por padrão. Também no Chrome, você pode dispensar a exigência de certificado iniciando uma instância do Chrome. Por exemplo, para isentar o requisito de http://*.corp.company.com, use as seguintes flags:

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

Saiba mais sobre como executar o Chrome com uma flag de tempo de execução em Executar o Chromium com flags.

Encaminhamento de porta de um servidor local

É possível encaminhar o servidor da Web local para um dispositivo Android usando as DevTools do Chrome e testar como ele funciona em um navegador para dispositivos móveis. Para saber como fazer isso, consulte Acessar servidores locais.

Depuração remota de um site no Chrome para Android usando o DevTools para computador

Você também pode depurar o Chrome para Android no DevTools para computador. Para saber como fazer isso, consulte Primeiros passos com a depuração remota de dispositivos Android.

Registro de eventos do gerenciador de pagamento

O DevTools pode mostrar eventos da API Web-based Payment Handler para facilitar o desenvolvimento local. Abra o DevTools no contexto do comerciante e acesse a seção "Payment Handler" no painel Application. Marque "Mostrar eventos de outros domínios" e clique no botão "Gravar" para começar a capturar eventos enviados ao service worker que processa pagamentos.

Captura de tela do registro de eventos do Payment Handler baseado na Web.
Registro de eventos do Payment Handler baseado na Web.

Próximas etapas

A próxima etapa é aprender como o service worker pode orquestrar uma transação de pagamento em tempo de execução.