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

Rouslan Solomakhin
Rouslan Solomakhin

A Payment Handler API permite que os provedores de pagamentos disponibilizem a experiência de pagamento personalizada para os comerciantes, junto com a API Payment Request.

As informações nesta página se aplicam apenas a sites que usam CSP (política de segurança de conteúdo) e a API Payment Request. Se você não usa nenhum ou apenas um dos dois, pule estas instruções.

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

Se você estiver usando a API Payment Handler e a CSP (Política de Segurança de Conteúdo) para uma proteção melhor, verifique se os domínios das solicitações HTTP enviadas pelo navegador são adicionados à diretiva connect-src do cabeçalho CSP.

Por exemplo, se o código do JavaScript invocar new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), o connect-src do CSP precisará 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 entre origens, a origem de destino também precisará ser incluída no CSP. Por exemplo, se https://example.com/pay redirecionar para https://pay.example.com, ambas as origens precisarão ser incluídas na CSP:

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

Testar localmente

Para ativar o recurso localmente antes do envio:

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

Verificar os URLs de solicitação

Para verificar os URLs das solicitações enviadas pela API Payment Handler:

  1. Ative 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 esta: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Adicione o identificador do método especificado ao CSP.

Foto de Eduardo Soares no Unsplash