Payment Handler API memungkinkan penyedia pembayaran menyediakan pengalaman pembayaran kustom mereka untuk penjual, bersama dengan Payment Request API.
Informasi di halaman ini hanya berlaku untuk situs yang menggunakan CSP (Content-Security-Policy) dan Payment Request API. Jika Anda tidak menggunakan atau hanya menggunakan salah satu dari keduanya, 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
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
asal harus disertakan dalam CSP:
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
Mencobanya secara lokal
Untuk mengaktifkan fitur secara lokal sebelum dikirim:
- Buka
chrome://flags/#web-payment-api-csp
di Chrome. - Ubah "Kebijakan CSP untuk Web Payment API" dari "Default" menjadi "Enabled".
- Mulai ulang Chrome.
Memeriksa URL permintaan
Untuk memeriksa URL permintaan yang dikirim dari Payment Handler API:
- Aktifkan
chrome://flags/#web-payment-api-csp
. - Buka halaman checkout dan buka Chrome Developer Tools.
- Cari pesan error seperti berikut:
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
- Tambahkan ID metode yang ditentukan ke CSP Anda.
Foto oleh Eduardo Soares di Unsplash