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

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

Eiji Kitamura

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

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

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

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

Chromium Safari Firefox
เดสก์ท็อป Android เดสก์ท็อป อุปกรณ์เคลื่อนที่ เดสก์ท็อป/อุปกรณ์เคลื่อนที่
Payment Request API ✔ ✔ ✔ ✔
Payment Handler 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 และ 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 โดยใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome และทดสอบวิธีการทํางานจากเบราว์เซอร์บนอุปกรณ์เคลื่อนที่ ดูวิธีดำเนินการได้ที่เข้าถึงเซิร์ฟเวอร์ในเครื่อง

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

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

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

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

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

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

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