Payment Handler API ช่วยให้ผู้ให้บริการชำระเงินสามารถทำให้ประสบการณ์การชำระเงินที่กำหนดเองพร้อมใช้งานสำหรับผู้ขาย รวมถึง Payment Request API
ข้อมูลในหน้านี้ใช้เฉพาะกับเว็บไซต์ที่ใช้ทั้ง CSP (Content-Security-Policy) และ Payment Request API ถ้าไม่ได้ใช้ทั้ง 2 อย่างหรือใช้เพียงวิธีเดียว ก็ข้ามวิธีการเหล่านี้ได้เลย
หากต้องการตรวจสอบว่าผู้ให้บริการชำระเงินใช้ Payment Handler API หรือไม่ ให้ติดต่อผู้ให้บริการดังกล่าวและทำตามวิธีการ
หากใช้ Payment Handler API และ CSP (นโยบายรักษาความปลอดภัยเนื้อหา) เพื่อการปกป้องที่ดียิ่งขึ้น คุณต้องตรวจสอบว่าได้เพิ่มโดเมนของคำขอ HTTP ที่ส่งจากเบราว์เซอร์ลงในคำสั่ง connect-src ของส่วนหัว CSP แล้ว
เช่น หากโค้ด JavaScript เรียกใช้ new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) แล้ว CSP connect-src ก็ต้องมี https://example.com หรือ https://example.com/pay ดังนี้
Content-Security-Policy: connect-src https://example.com/pay
หาก https://example.com/pay เป็นการเปลี่ยนเส้นทางแบบข้ามต้นทาง ต้นทางปลายทางควรรวมอยู่ใน CSP ด้วย เช่น หาก https://example.com/pay เปลี่ยนเส้นทางไปยัง https://pay.example.com ต้นทางทั้ง 2 รายการจะต้องรวมอยู่ใน CSP ดังนี้
Content-Security-Policy: connect-src https://example.com/pay https://pay.example.com
ลองใช้ในเครื่อง
หากต้องการเปิดใช้ฟีเจอร์ในเครื่องก่อนจัดส่ง ให้ทำดังนี้
- ไปที่
chrome://flags/#web-payment-api-cspใน Chrome - เปลี่ยน "นโยบาย CSE สำหรับ Web Payment API" จาก "ค่าเริ่มต้น" เป็น "เปิดใช้งาน"
- รีสตาร์ท Chrome
ตรวจสอบ URL ของคำขอ
วิธีตรวจสอบ URL ของคำขอที่ส่งจาก Payment Handler API
- เปิดใช้
chrome://flags/#web-payment-api-csp - ไปที่หน้าชำระเงินแล้วเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome
- มองหาข้อความแสดงข้อผิดพลาดดังตัวอย่างต่อไปนี้
text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy. - เพิ่มตัวระบุเมธอดที่ระบุลงใน CSP
รูปภาพโดย Eduardo Soares ใน Unsplash