Como registrar um app de pagamento baseado na Web

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

Eiji Kitamura

Os aplicativos de pagamento baseados na Web são Progressive Web Apps (PWA) e executado sobre um serviço workers. A O service worker em um app de pagamento desempenha um papel importante, porque captura o pagamento solicitações de um comerciante, inicia o app de pagamento e media o para comunicação com o comerciante.

Para configurar um app de pagamento baseado na Web, você precisa registrar as formas de pagamento disponíveis métodos e um service worker. Você pode configurar seu app de pagamento baseado na Web de forma declarativa com um manifesto de app da Web.

Suporte ao navegador

O Web Payments consiste em algumas tecnologias diferentes e o 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 maneira declarativa, disponibilize um app da Web manifesto do app.

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

Consulte Como configurar um pagamento método para garantir que o manifesto da forma de pagamento aponte para o manifesto do app da Web corretamente.

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

O registro JIT exige apenas a veiculação do aplicativo da Web manifesto e nenhum código adicional. Se você já configurou o manifesto do seu app da Web e está servindo de forma adequada, tudo deve estar pronto. O navegador processa a descansar.

Como depurar um aplicativo de pagamento baseado na Web

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

Como desenvolver em um servidor local

Qual servidor você usa para o desenvolvimento? Muitos desenvolvedores costumam usar um host local ou um ambiente de servidor interno da empresa, que pode ser desafiador porque recursos avançados de navegadores tendem a exigir um ambiente seguro (HTTPS) e um certificado válido. As APIs Payment Request e Payment Handler são nenhuma exceção, 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, como o Chrome, têm certificados isentos para http://localhost por padrão. Além disso, no Chrome, é possível isentar o certificado ao iniciar uma instância do Chrome. Por exemplo, para isentar o requisito de http://*.corp.company.com, use as seguintes sinalizações:

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 sinalização de tempo de execução em Executar o Chromium com de resposta.

Encaminhamento de portas de um servidor local

Você pode fazer o encaminhamento de um servidor da Web local para um dispositivo Android usando o DevTools e testar como ele funciona em um navegador para dispositivos móveis. Para aprender a fazer isso, confira Acesso local Servidores.

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

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

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

O DevTools pode exibir a API Payment Handler eventos para o desenvolvimento local mais fácil. Abra o DevTools no contexto do comerciante e acesse "Gerenciador de pagamentos" no painel Aplicativo. Marque a opção "Mostrar eventos" de outros domínios" e clique no botão "Gravar" para começar a capturar os eventos enviados ao service worker que lida com os pagamentos.

Captura de tela do registro de eventos do gerenciador de pagamentos.
Registro de eventos do gerenciador de pagamentos.

Próximas etapas

A próxima etapa é aprender como o service worker pode orquestrar um pagamento transação no ambiente de execução.