Payment Handler API akan memerlukan connect-src CSP

Rouslan Solomakhin
Rouslan Solomakhin

Dengan Payment Handler API, penyedia pembayaran dapat menyediakan pengalaman pembayaran kustom untuk penjual, bersama dengan Payment Request API.

Informasi di halaman ini hanya berlaku untuk situs yang menggunakan CSP (Kebijakan Keamanan Konten) dan Payment Request API. Jika tidak menggunakan salah satu atau hanya salah satu, Anda dapat melewati petunjuk ini.

Untuk memeriksa apakah penyedia pembayaran Anda menggunakan Payment Handler API, hubungi mereka dan ikuti petunjuknya.

Jika menggunakan Payment Handler API dan CSP (Kebijakan Keamanan Konten) untuk perlindungan yang lebih baik, Anda harus memastikan domain permintaan HTTP yang dikirim dari browser ditambahkan ke perintah connect-src pada header CSP.

Misalnya, jika kode JavaScript Anda memanggil new PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details), connect-src CSP Anda harus menyertakan https://example.com atau https://example.com/pay:

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

Jika https://example.com/pay adalah pengalihan lintas origin, origin tujuan juga harus disertakan dalam CSP. Misalnya, jika https://example.com/pay mengalihkan ke https://pay.example.com, kedua origin harus disertakan dalam CSP:

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

Cobalah secara lokal

Untuk mengaktifkan fitur secara lokal sebelum dikirim:

  1. Buka chrome://flags/#web-payment-api-cspdi Chrome.
  2. Ubah "CSP policy for Web Payment API" dari "Default" menjadi "Enabled".
  3. Mulai ulang Chrome.

Memeriksa URL permintaan

Untuk memeriksa URL permintaan yang dikirim dari Payment Handler API:

  1. Aktifkan chrome://flags/#web-payment-api-csp.
  2. Buka halaman checkout dan buka Developer Tools Chrome.
  3. Cari pesan error seperti berikut: text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. Tambahkan ID metode yang ditentukan ke CSP Anda.

Foto oleh Eduardo Soares di Unsplash