Payment Handler API vereist CSP connect-src

Met de Payment Handler API kunnen betalingsproviders hun aangepaste betalingservaring beschikbaar maken voor verkopers, samen met de Payment Request API .

De informatie op deze pagina is alleen van toepassing op websites die zowel CSP (Content-Security-Policy) als de Payment Request API gebruiken. Als u geen van beide of slechts één van de twee gebruikt, kunt u deze instructies overslaan.

Als u wilt controleren of uw betalingsprovider de Payment Handler API gebruikt, neemt u contact met hen op en volgt u hun instructies.

Als u de Payment Handler API en CSP (Content-Security-Policy) gebruikt voor een betere bescherming, moet u ervoor zorgen dat de domeinen van HTTP-verzoeken die vanuit de browser worden verzonden, worden toegevoegd aan de connect-src richtlijn van de CSP-header .

Als uw JavaScript-code bijvoorbeeld new PaymentRequest([{supportedOrigins: 'https://example.com/pay'}], details) aanroept, moet uw CSP connect-src https://example.com of https://example.com/pay :

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

Als https://example.com/pay een cross-origin-omleiding is, moet de bestemmingsoorsprong ook in de CSP worden opgenomen. Als https://example.com/pay bijvoorbeeld omleidt naar https://pay.example.com , moeten beide oorsprongen worden opgenomen in de CSP:

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

Probeer het lokaal uit

Om de functie lokaal in te schakelen voordat deze wordt verzonden:

  1. Ga naar chrome://flags/#web-payment-api-csp in Chrome.
  2. Wijzig 'CSP-beleid voor Web Payment API' van 'Standaard' in 'Ingeschakeld'.
  3. Start Chrome opnieuw.

Controleer de verzoek-URL's

Om de URL's te controleren van de verzoeken die zijn verzonden vanuit de Payment Handler API:

  1. Schakel chrome://flags/#web-payment-api-csp .
  2. Ga naar uw betaalpagina en open de ontwikkelaarstools van Chrome.
  3. Zoek naar foutmeldingen zoals de volgende: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Voeg de opgegeven methode-ID toe aan uw CSP.

Foto door Eduardo Soares op Unsplash

,

Met de Payment Handler API kunnen betalingsproviders hun aangepaste betalingservaring beschikbaar maken voor verkopers, samen met de Payment Request API .

De informatie op deze pagina is alleen van toepassing op websites die zowel CSP (Content-Security-Policy) als de Payment Request API gebruiken. Als u geen van beide of slechts één van de twee gebruikt, kunt u deze instructies overslaan.

Als u wilt controleren of uw betalingsprovider de Payment Handler API gebruikt, neemt u contact met hen op en volgt u hun instructies.

Als u de Payment Handler API en CSP (Content-Security-Policy) gebruikt voor een betere bescherming, moet u ervoor zorgen dat de domeinen van HTTP-verzoeken die vanuit de browser worden verzonden, worden toegevoegd aan de connect-src richtlijn van de CSP-header .

Als uw JavaScript-code bijvoorbeeld new PaymentRequest([{supportedOrigins: 'https://example.com/pay'}], details) aanroept, moet uw CSP connect-src https://example.com of https://example.com/pay :

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

Als https://example.com/pay een cross-origin-omleiding is, moet de bestemmingsoorsprong ook in de CSP worden opgenomen. Als https://example.com/pay bijvoorbeeld omleidt naar https://pay.example.com , moeten beide oorsprongen worden opgenomen in de CSP:

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

Probeer het lokaal uit

Om de functie lokaal in te schakelen voordat deze wordt verzonden:

  1. Ga naar chrome://flags/#web-payment-api-csp in Chrome.
  2. Wijzig 'CSP-beleid voor Web Payment API' van 'Standaard' in 'Ingeschakeld'.
  3. Start Chrome opnieuw.

Controleer de verzoek-URL's

Om de URL's te controleren van de verzoeken die zijn verzonden vanuit de Payment Handler API:

  1. Schakel chrome://flags/#web-payment-api-csp .
  2. Ga naar uw betaalpagina en open de ontwikkelaarstools van Chrome.
  3. Zoek naar foutmeldingen zoals de volgende: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Voeg de opgegeven methode-ID toe aan uw CSP.

Foto door Eduardo Soares op Unsplash