L'API Payment Handler consente ai fornitori di servizi di pagamento di mettere a disposizione dei commercianti la loro esperienza di pagamento personalizzata, insieme all'API Payment Request.
Le informazioni contenute in questa pagina si applicano solo ai siti web che utilizzano sia CSP (Content-Security-Policy) sia l'API Payment Request. Se utilizzi nessuna delle due o solo una delle due, puoi saltare queste istruzioni.
Per verificare se il tuo fornitore di servizi di pagamento utilizza l'API Payment Handler, contattalo e segui le sue istruzioni.
Se utilizzi l'API Payment Handler e il CSP (Content-Security-Policy) per una maggiore protezione, devi assicurarti che i domini delle richieste HTTP inviate dal browser vengano aggiunti all'istruzione connect-src
dell'intestazione CSP.
Ad esempio, se il codice JavaScript richiama new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details)
, l'connect-src
CSP deve includere https://example.com
o
https://example.com/pay
:
Content-Security-Policy: connect-src https://example.com/pay
Se https://example.com/pay
è un reindirizzamento multiorigine, anche l'origine di destinazione deve essere inclusa nel CSP. Ad esempio, se
https://example.com/pay
reindirizza a https://pay.example.com
, entrambe
le origini devono essere incluse nel CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Provalo a livello locale
Per abilitare la funzionalità localmente prima che venga spedita:
- Vai a
chrome://flags/#web-payment-api-csp
su Chrome. - Modifica il criterio "CSP per l'API Web Payment" da "Predefinito" ad "Abilitato".
- Riavvia Chrome.
Controlla gli URL delle richieste
Per controllare gli URL delle richieste inviate dall'API Payment Handler:
- Attiva
chrome://flags/#web-payment-api-csp
. - Vai alla pagina di pagamento e apri gli Strumenti per sviluppatori di Chrome.
- Cerca messaggi di errore come i seguenti:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
- Aggiungi l'identificatore del metodo specificato al tuo CSP.
Foto di Eduardo Soares su Unsplash