Payment Handler API ช่วยให้ลูกค้าชำระเงินสามารถให้บริการการชำระเงินที่กำหนดเองแก่ผู้ขายได้ เช่นเดียวกับ Payment Request API
ข้อมูลในหน้านี้ใช้กับเว็บไซต์ที่ใช้ทั้ง CSP (Content-Security-Policy) และ Payment Request API เท่านั้น หากไม่ได้ใช้หรือใช้เพียงอย่างใดอย่างหนึ่ง คุณก็ข้ามวิธีการเหล่านี้ได้
หากต้องการตรวจสอบว่าผู้ให้บริการชำระเงินใช้ Payment Handler API หรือไม่ โปรดติดต่อผู้ให้บริการและทำตามวิธีการ
หากคุณใช้ Payment Handler API และ CSP (Content-Security-Policy) เพื่อการป้องกันที่ดียิ่งขึ้น คุณต้องตรวจสอบว่าได้เพิ่มโดเมนของคำขอ HTTP ที่ส่งจากเบราว์เซอร์ลงในคำสั่ง connect-src ของส่วนหัว CSP
ตัวอย่างเช่น หากโค้ด JavaScript เรียกใช้ new
PaymentRequest([{supportedOrigins: ‘https://example.com/pay’}], details) connect-src ของ CSP ต้องมี 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 - เปลี่ยน "นโยบาย CSP สําหรับ 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