L'API Payment Handler richiederà CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

L'API Payment Gestori consente ai fornitori di servizi di pagamento di rendere disponibile la propria esperienza di pagamento personalizzata oltre all'API Payment Request.

Le informazioni in questa pagina riguardano solo i siti web che utilizzano CSP (Content-Security-Policy) e l'API Payment Request. Se non utilizzi nessuno dei due o solo uno dei due, puoi saltare queste istruzioni.

Per verificare se il tuo fornitore di servizi di pagamento utilizza l'API Payment Gestori, contattalo e segui le relative istruzioni.

Se utilizzi l'API Payment Gestori e CSP (Content-Security-Policy) per devi assicurarti che i domini delle richieste HTTP inviate il browser viene aggiunto all'istruzione connect-src dell'intestazione CSP.

Ad esempio, se il codice JavaScript richiama new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), il tuo CSP connect-src 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, la destinazione devono essere incluse anche nel CSP. Ad esempio, se https://example.com/pay reindirizza a https://pay.example.com, quindi entrambi che devono essere incluse nel CSP:

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

Fai una prova locale

Per attivare la funzionalità localmente prima che venga spedita:

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

Controlla gli URL delle richieste

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

  1. Attiva chrome://flags/#web-payment-api-csp.
  2. Vai alla pagina di pagamento e apri Strumenti per sviluppatori di Chrome.
  3. Cerca messaggi di errore simili ai 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