การลงทะเบียนแอปการชำระเงินบนเว็บ

ดูวิธีกำหนดค่าแอปการชำระเงินบนเว็บระหว่างการลงทะเบียน

Eiji Kitamura

แอปการชำระเงินบนเว็บคือ Progressive Web App (PWA) และทำงานบน Service Worker Service Worker ในแอปการชำระเงินมีบทบาทสำคัญเนื่องจากจะบันทึกคำขอการชำระเงินจากผู้ขาย เปิดแอปการชำระเงิน และเป็นตัวกลางในการสื่อสารกับผู้ขาย

หากต้องการกำหนดค่าแอปการชำระเงินบนเว็บ คุณต้องลงทะเบียนวิธีการชำระเงินที่มี และ Service Worker คุณกำหนดค่าแอปการชำระเงินบนเว็บได้ โดยใช้ไฟล์ Manifest ของเว็บแอป

การสนับสนุนเบราว์เซอร์

การชำระเงินบนเว็บประกอบด้วยเทคโนโลยีที่แตกต่างกัน 2-3 อย่าง และสถานะการรองรับจะขึ้นอยู่กับเบราว์เซอร์

Chromium Safari Firefox
เดสก์ท็อป Android เดสก์ท็อป มือถือ เดสก์ท็อป/อุปกรณ์เคลื่อนที่
Payment Request API ✔ ✔ ✔ ✔
API ตัวแฮนเดิลการชำระเงินบนเว็บ ✔ ✔
แอปการชำระเงิน iOS/Android ✔ ✔ ✔* ✔*

การกำหนดค่าแอปการชำระเงินด้วยไฟล์ Manifest ของเว็บแอป

หากต้องการกำหนดค่าแอปการชำระเงินบนเว็บแบบประกาศ ให้แสดงไฟล์ Manifest ของเว็บแอป

พร็อพเพอร์ตี้ต่อไปนี้ในไฟล์ Manifest ของเว็บแอปเกี่ยวข้องกับแอปการชำระเงินบนเว็บ

  • name
  • icons
  • serviceworker
    • src
    • scope
    • use_cache

ดูการตั้งค่าวิธีการชำระเงิน เพื่อให้มั่นใจว่าไฟล์ Manifest ของวิธีการชำระเงินชี้ไปยังไฟล์ Manifest ของเว็บแอป อย่างถูกต้อง

การลงทะเบียน Service Worker แบบทันที (JIT)

การลงทะเบียน JIT กำหนดให้แสดงเฉพาะไฟล์ Manifest ของเว็บแอป และไม่ต้องเขียนโค้ดเพิ่มเติม หากกำหนดค่าไฟล์ Manifest ของเว็บแอปและแสดงอย่างถูกต้องแล้ว คุณก็พร้อมใช้งาน เบราว์เซอร์จะจัดการส่วนที่เหลือ เอง

การแก้ไขข้อบกพร่องของแอปการชำระเงินบนเว็บ

เมื่อพัฒนาส่วนหน้าของแอปการชำระเงินบนเว็บ คุณอาจต้องสลับไปมาระหว่าง บริบทของผู้ขายและบริบทของแอปการชำระเงิน เคล็ดลับการแก้ไขข้อบกพร่องต่อไปนี้จะช่วย ประสบการณ์การพัฒนาของคุณใน Chrome

การพัฒนาบนเซิร์ฟเวอร์ภายใน

คุณใช้เซิร์ฟเวอร์ใดในการพัฒนา นักพัฒนาซอฟต์แวร์จำนวนมากมักใช้ localhost หรือสภาพแวดล้อมเซิร์ฟเวอร์ภายในบริษัท ซึ่งอาจเป็นเรื่องท้าทายเนื่องจาก ฟีเจอร์ที่มีประสิทธิภาพในเบราว์เซอร์มักต้องใช้สภาพแวดล้อมที่ปลอดภัย (HTTPS) และใบรับรองที่ถูกต้อง Payment Request API และ Web-based Payment Handler API ก็เช่นกัน โดยปกติแล้ว localhost หรือเซิร์ฟเวอร์ภายในบริษัทจะไม่มีใบรับรองที่ถูกต้อง

ข่าวดีคือเบราว์เซอร์บางตัว รวมถึง Chrome จะยกเว้นใบรับรองสำหรับ http://localhost โดยค่าเริ่มต้น นอกจากนี้ ใน Chrome คุณยังยกเว้นข้อกำหนดของใบรับรองได้โดยการเปิดอินสแตนซ์ Chrome ตัวอย่างเช่น หากต้องการยกเว้นข้อกำหนดจาก http://*.corp.company.com ให้ใช้แฟล็กต่อไปนี้

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

Windows

chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com

ดูข้อมูลเพิ่มเติมเกี่ยวกับการเรียกใช้ Chrome ด้วย Flag ของรันไทม์ได้ที่เรียกใช้ Chromium ด้วย Flag

การส่งต่อพอร์ตของเซิร์ฟเวอร์ในเครื่อง

คุณสามารถส่งต่อพอร์ตเว็บเซิร์ฟเวอร์ในเครื่องไปยังอุปกรณ์ Android ได้โดยใช้ DevTools ของ Chrome และทดสอบการทำงานจากเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ดูวิธีทำได้ที่เข้าถึงเซิร์ฟเวอร์ในเครื่อง

การแก้ไขข้อบกพร่องจากระยะไกลของเว็บไซต์ใน Chrome บน Android จาก DevTools บนเดสก์ท็อป

นอกจากนี้ คุณยังดีบัก Android Chrome ในเครื่องมือสำหรับนักพัฒนาเว็บบนเดสก์ท็อปได้ด้วย ดูวิธีทำได้ที่เริ่มต้นการแก้ไขข้อบกพร่องจากระยะไกลในอุปกรณ์ Android

การบันทึกเหตุการณ์ของเครื่องจัดการการชำระเงิน

เครื่องมือสำหรับนักพัฒนาเว็บสามารถแสดงเหตุการณ์ของ Web-based Payment Handler API เพื่อให้การพัฒนาในเครื่องง่ายขึ้น เปิดเครื่องมือสำหรับนักพัฒนาเว็บในบริบทของผู้ขาย แล้วไปที่ส่วน "Payment Handler" ในแผงแอปพลิเคชัน เลือก "แสดงเหตุการณ์ จากโดเมนอื่นๆ" แล้วคลิกปุ่ม "บันทึก" เพื่อเริ่มบันทึกเหตุการณ์ที่ส่ง ไปยัง Service Worker ที่จัดการการชำระเงิน

ภาพหน้าจอของการบันทึกเหตุการณ์ตัวแฮนเดิลการชำระเงินบนเว็บ
การบันทึกเหตุการณ์ของตัวแฮนเดิลการชำระเงินบนเว็บ

ขั้นตอนถัดไป

ขั้นตอนถัดไปคือการดูวิธีที่ Service Worker สามารถจัดการธุรกรรมการชำระเงิน ในขณะรันไทม์