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

Eiji Kitamura

Rouslan Solomakhin

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

As informações nesta página se aplicam apenas a sites que usam a CSP (Content-Security-Policy) e a API Payment Request. Se você não usar nenhuma ou apenas uma das duas, 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 melhorar a proteção, verifique se os domínios das solicitações HTTP enviadas do navegador estão adicionados à diretiva connect-src do cabeçalho da CSP.

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

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

Observação:é permitido usar um identificador de forma de pagamento do URL até três redirecionamentos para o mesmo site. Se ocorrer algum redirecionamento, todos os URLs precisarão estar na CSP.

Teste localmente

Para ativar o recurso localmente antes do envio:

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

Verificar os URLs das solicitações

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

1. Ative a 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