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

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

Eiji Kitamura

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

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

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

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

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

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

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

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

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

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

การลงทะเบียน JIT กำหนดให้แสดงเฉพาะไฟล์ Manifest ของเว็บแอปเท่านั้นและไม่ต้องเขียนโค้ดเพิ่มเติม หากคุณกำหนดค่าไฟล์ 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

Windows

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

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

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

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

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

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

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

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

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

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

• การจัดระเบียบธุรกรรมการชำระเงินด้วยผู้ให้บริการ