L'API Payment Handler richiederà CSP connect-src

Eiji Kitamura

Rouslan Solomakhin

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

Nota: un identificatore del metodo di pagamento URL sono consentiti fino a 3 reindirizzamenti allo stesso sito. Se si verificano reindirizzamenti, tutti gli URL devono essere presenti nel CSP.

Provalo a livello locale

Per abilitare la funzionalità localmente prima che venga spedita:

1. Vai a chrome://flags/#web-payment-api-csp su Chrome.
2. Modifica il criterio "CSP per l'API Web Payment" da "Predefinito" ad "Abilitato".
3. Riavvia Chrome.

Controlla gli URL delle richieste

Per controllare gli URL delle richieste inviate dall'API Payment Handler:

1. Attiva chrome://flags/#web-payment-api-csp.
2. Vai alla pagina di pagamento e apri gli Strumenti per sviluppatori di Chrome.
3. Cerca messaggi di errore come i seguenti: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
4. Aggiungi l'identificatore del metodo specificato al tuo CSP.

Foto di Eduardo Soares su Unsplash