ดูวิธีกำหนดค่าแอปการชำระเงินบนเว็บระหว่างการลงทะเบียน
แอปการชำระเงินบนเว็บคือ Progressive Web App (PWA) และทำงานทับโปรแกรมทำงานของบริการ พนักงานบริการในแอปการชำระเงินมีบทบาทสำคัญเนื่องจากจะบันทึกคำขอการชำระเงินจากผู้ขาย เปิดแอปการชำระเงิน และเป็นสื่อกลางในการสื่อสารกับผู้ขาย
หากต้องการกำหนดค่าแอปการชำระเงินบนเว็บ คุณจะต้องลงทะเบียนวิธีการชำระเงินที่ใช้ได้และ Service Worker คุณสามารถกำหนดค่าแอปการชำระเงินบนเว็บ อย่างชัดเจนด้วยไฟล์ Manifest ของเว็บแอป
การสนับสนุนเบราว์เซอร์
การชำระเงินบนเว็บประกอบด้วยเทคโนโลยีต่างๆ 2-3 อย่าง และสถานะการสนับสนุนจะขึ้นอยู่กับเบราว์เซอร์
การกำหนดค่าแอปการชำระเงินด้วยไฟล์ 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
ให้ใช้แฟล็กต่อไปนี้
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 ที่จัดการการชำระเงิน
![ภาพหน้าจอของการบันทึกเหตุการณ์ของเครื่องจัดการการชำระเงิน](https://web.dev/static/articles/registering-a-web-based-payment-app/image/a-screenshot-payment-han-2353defdf5615.png?authuser=6&hl=th)
ขั้นตอนถัดไป
ขั้นตอนถัดไปคือการเรียนรู้ว่า Service Worker จะจัดระเบียบธุรกรรมการชำระเงินระหว่างรันไทม์ได้อย่างไร