A API Payment Handler exigirá o CSP connect-src.

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

API Payment Handler os provedores de pagamento podem oferecer uma experiência de pagamento personalizada para comerciantes, além da API Payment Request.

As informações nesta página só se aplicam a sites que usam a Política de Segurança de Conteúdo (CSP) e a API Payment Request. Se você não usar uma das duas ou nenhuma delas, pode pular essas instruções.

Para verificar se seu provedor de pagamento está usando a API Payment Handler, entre em contato com ele e siga as instruções.

Se você usa a API Payment Handler e a CSP (Política de Segurança de Conteúdo) para você precisa garantir que os domínios das solicitações HTTP enviadas no navegador são adicionados à diretiva connect-src do cabeçalho CSP.

Por exemplo, se o código JavaScript invocar new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), o connect-src da sua CSP precisa incluir https://example.com ou https://example.com/pay:

Content-Security-Policy: connect-src https://example.com/pay

Se https://example.com/pay for um redirecionamento de origem cruzada, o destino e origem de redirecionamento também devem ser incluídas no CSP. Por exemplo, se https://example.com/pay redireciona para https://pay.example.com, e então os dois origens precisam ser incluídas no CSP:

Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com

Teste localmente

Para ativar o recurso localmente antes de ser enviado:

  1. Acesse chrome://flags/#web-payment-api-csp no Chrome.
  2. Alteração da "Política de CSP para a API Web Payment" de "Padrão" para "Ativado".
  3. Reinicie o Chrome.

Verificar os URLs das solicitações

Para verificar os URLs das solicitações enviadas pela API Payment Handler, faça o seguinte:

  1. Ativar chrome://flags/#web-payment-api-csp.
  2. Acesse a página de finalização da compra e abra as Ferramentas para desenvolvedores do Chrome.
  3. Procure mensagens de erro como estas: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Adicione o identificador de método especificado à sua CSP.

Foto de Eduardo Soares no Unsplash (links em inglês)