Payment Handler API vereist CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Met de Payment Handler API kunnen betalingsaanbieders hun aangepaste betaalervaring beschikbaar stellen aan handelaren, 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 beide gebruikt, kunt u deze instructies overslaan.

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

Als u de Payment Handler API en CSP (Content-Security-Policy) gebruikt voor betere beveiliging, 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 bevatten:

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

Als https://example.com/pay een cross-origin redirect is, moet de bestemmingsbron ook in de CSP worden opgenomen. Als https://example.com/pay bijvoorbeeld doorverwijst naar https://pay.example.com , moeten beide bronnen in de CSP worden opgenomen:

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 geleverd:

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

Controleer de aanvraag-URL's

Om de URL's van de verzoeken te controleren die via de Payment Handler API worden verzonden:

  1. Schakel chrome://flags/#web-payment-api-csp .
  2. Ga naar de afrekenpagina en open de ontwikkelaarstools van Chrome.
  3. Let op 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