Payment Handler API จำเป็นต้องใช้ CSP connect-src

Eiji Kitamura
Rouslan Solomakhin
Rouslan Solomakhin
GitHub

Payment Handler API ช่วยให้ผู้ให้บริการชำระเงินสามารถมอบประสบการณ์การชำระเงินที่กำหนดเอง ผู้ขาย รวมถึง Payment Request API

ข้อมูลในหน้านี้ใช้กับเว็บไซต์ที่ใช้ทั้ง CSP (Content-Security-Policy) เท่านั้น และ Payment Request API หากคุณไม่ได้ใช้ทั้ง 2 อย่างข้างต้นหรือใช้เพียงอย่างใดอย่างหนึ่ง คุณ ก็สามารถข้ามวิธีการเหล่านี้ได้

หากต้องการตรวจสอบว่าผู้ให้บริการชำระเงินใช้ 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

ลองใช้งานในเครื่อง

วิธีเปิดใช้ฟีเจอร์ในเครื่องก่อนส่ง

  1. ไปที่ chrome://flags/#web-payment-api-csp ใน Chrome
  2. เปลี่ยน "นโยบาย CSP สำหรับ API การชำระเงินบนเว็บ" จาก "ค่าเริ่มต้น" เป็น "เปิดใช้"
  3. รีสตาร์ท Chrome

ตรวจสอบ URL ของคำขอ

วิธีตรวจสอบ URL ของคำขอที่ส่งจาก Payment Handler API

  1. เปิดใช้ chrome://flags/#web-payment-api-csp
  2. ไปที่หน้าชำระเงินและเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome
  3. มองหาข้อความแสดงข้อผิดพลาดดังตัวอย่างต่อไปนี้ text RangeError: Failed to construct 'PaymentRequest': https://example.com/pay payment method identifier violates Content Security Policy.
  4. เพิ่มตัวระบุเมธอดที่ระบุใน CSP

รูปภาพโดย Eduardo Soares ใน Unsplash