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 em workers de serviço. O service worker em um app de pagamento desempenha um papel importante, porque captura solicitações de pagamento de um comerciante, inicia o app de pagamento e media a 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 da 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
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, exiba um manifesto de app da Web.

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

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

Consulte 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 do JIT exige apenas a veiculação do manifesto do app da Web e nenhuma codificação adicional. Se você já tiver configurado o manifesto do aplicativo da Web e estiver exibindo-o corretamente, tudo estará pronto. 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 sua experiência de desenvolvimento no Chrome.

Como desenvolver em um servidor local

Qual servidor você usa para desenvolvimento? Muitos desenvolvedores tendem a usar o localhost ou um ambiente de servidor interno da empresa, o que pode ser desafiador porque os recursos avançados no navegador tendem a exigir um ambiente seguro (HTTPS) e um certificado válido. A API Payment Request e a API Payment Handler não são exceções, e os localhosts ou servidores 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 isentar o requisito 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 execução em Executar o Chromium com flags.

Encaminhamento de portas de um servidor local

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

Depurar remotamente um site no Chrome para Android usando o DevTools para computador

Também é possível depurar o Chrome para Android no DevTools para computador. Para saber como fazer isso, confira Primeiros passos com a depuração remota de dispositivos Android.

Geração de registros de eventos do gerenciador de pagamentos

O DevTools pode mostrar eventos da API Payment Handler para facilitar o desenvolvimento local. Abra o DevTools no contexto do comerciante e acesse a seção "Gerenciador de pagamentos" 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.
Geração de registros de eventos do gerenciador de pagamentos.

Próximas etapas

A próxima etapa é aprender como o worker de serviço pode orquestrar uma transação de pagamento no momento da execução.