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

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

Eiji Kitamura

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

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

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

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

	Chromium		Safari		Firefox
	เดสก์ท็อป	Android	เดสก์ท็อป	อุปกรณ์เคลื่อนที่	เดสก์ท็อป/อุปกรณ์เคลื่อนที่
API คำขอการชำระเงิน	✔	✔	✔	✔
API ของเครื่องจัดการการชำระเงิน	✔	✔
แอปการชำระเงินของ iOS/Android	✔	✔	✔*	✔*

หมายเหตุ: *Safari รองรับ Apple Pay แต่ไม่มีแอปการชำระเงินของบุคคลที่สาม

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

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

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

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

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

การลงทะเบียน Service Worker ให้ทันเวลา (JIT)

คำสำคัญ: โดยทั่วไปโปรแกรมทำงานของบริการจะได้รับการลงทะเบียนโดยใช้ JavaScript แต่เบราว์เซอร์ยังสามารถลงทะเบียนได้โดยอัตโนมัติเมื่อผู้ใช้เลือกชำระเงินด้วยแอปชำระเงินบนเว็บบนเว็บไซต์ของผู้ขาย วิธีนี้เรียกว่าการลงทะเบียนแบบทันท่วงที (JIT)

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

ข้อควรระวัง: แม้ว่าตัวระบุวิธีการชำระเงินเพียงวิธีเดียวจะรองรับแอปการชำระเงินได้หลายแอป แต่การลงทะเบียน JIT จะเกิดขึ้นต่อเมื่อไฟล์ Manifest ของวิธีการชำระเงินชี้ไปยังแอปการชำระเงินแอปเดียว

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

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

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

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

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

• --ignore-certificate-errors
• --unsafely-treat-insecure-origin-as-secure=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

หน้าต่าง

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

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

การส่งต่อพอร์ตเซิร์ฟเวอร์ภายใน

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

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

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

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

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

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

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

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

• การจัดการธุรกรรมการชำระเงินกับผู้ปฏิบัติงาน บริการ