ธุรกรรมการชำระเงินที่ใช้ Web Payments จะเริ่มด้วยการค้นพบแอปการชำระเงินของคุณ เรียนรู้วิธีตั้งค่าวิธีการชำระเงินและเตรียมแอปการชำระเงินให้พร้อมสำหรับผู้ขายและลูกค้าในการชำระเงิน
แอปการชำระเงินต้องเชื่อมโยงกับตัวระบุวิธีการชำระเงิน เพื่อใช้กับ Payment Request API ผู้ขายที่ต้องการผสานรวมกับแอปการชำระเงินจะใช้ตัวระบุวิธีการชำระเงินเพื่อระบุไปยังเบราว์เซอร์ บทความนี้กล่าวถึงวิธีการทำงานของการค้นพบแอปการชำระเงิน รวมถึงวิธีกำหนดค่าเพื่อให้เบราว์เซอร์ค้นพบและเรียกแอปการชำระเงินได้อย่างถูกต้อง
หากคุณยังไม่คุ้นเคยกับระบบการชำระเงินบนเว็บหรือวิธีการทำงานของธุรกรรมการชำระเงินผ่านแอปการชำระเงิน โปรดอ่านบทความต่อไปนี้ก่อน
การสนับสนุนเบราว์เซอร์
Web Payments ประกอบด้วยเทคโนโลยีบางอย่างที่แตกต่างกัน และสถานะการสนับสนุนจะขึ้นอยู่กับเบราว์เซอร์
วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงิน
แอปการชำระเงินทุกแอปต้องมีสิ่งต่อไปนี้
- ตัวระบุวิธีการชําระเงินตาม URL
- ไฟล์ Manifest ของวิธีการชำระเงิน (ยกเว้นในกรณีที่บุคคลที่สามเป็นผู้จัดหาตัวระบุวิธีการชำระเงิน)
- ไฟล์ Manifest ของเว็บแอป
![แผนภาพ: วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงินจากตัวระบุวิธีการชําระเงินตาม URL](https://web.dev/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=6&hl=th)
ขั้นตอนการสำรวจจะเริ่มต้นเมื่อผู้ขายเริ่มทำธุรกรรม โดยมีขั้นตอนดังนี้
- เบราว์เซอร์จะส่งคำขอไปยัง URL ของตัวระบุวิธีการชำระเงิน และดึงข้อมูลไฟล์ Manifest วิธีการชำระเงิน
- เบราว์เซอร์จะกำหนด URL ของไฟล์ Manifest ของเว็บแอปจากไฟล์ Manifest ของวิธีการชำระเงินและดึงไฟล์ Manifest ของเว็บแอป
- เบราว์เซอร์จะกำหนดว่าเปิดแอปสำหรับชำระเงินของระบบปฏิบัติการหรือแอปการชำระเงินบนเว็บจากไฟล์ Manifest ของเว็บแอป
ส่วนถัดไปจะอธิบายรายละเอียดวิธีตั้งค่าวิธีการชำระเงินของคุณเองเพื่อให้เบราว์เซอร์ค้นพบได้
ขั้นตอนที่ 1: ระบุตัวระบุวิธีการชำระเงิน
ตัวระบุวิธีการชำระเงินเป็นสตริงที่อิงตาม URL เช่น ตัวระบุของ Google Pay คือ https://google.com/pay
นักพัฒนาแอปการชำระเงินสามารถเลือก URL ใดก็ได้เป็นตัวระบุวิธีการชำระเงิน ตราบใดที่มีการควบคุมและแสดงเนื้อหาที่กำหนดเองได้ ในบทความนี้ เราจะใช้ https://bobbucks.dev/pay
เป็นตัวระบุวิธีการชำระเงิน
วิธีที่ผู้ขายใช้ตัวระบุวิธีการชำระเงิน
ออบเจ็กต์ PaymentRequest
สร้างขึ้นด้วยรายการตัวระบุวิธีการชำระเงินซึ่งระบุแอปการชำระเงินที่ผู้ขายตัดสินใจยอมรับ ตัวระบุวิธีการชำระเงินได้รับการตั้งค่าเป็นค่าสำหรับพร็อพเพอร์ตี้ supportedMethods
เช่น
[merchant] ขอให้ชำระเงิน:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
ขั้นตอนที่ 2: แสดงไฟล์ Manifest ของวิธีการชำระเงิน
ไฟล์ Manifest ของวิธีการชำระเงินคือไฟล์ JSON ที่กำหนดว่าแอปการชำระเงินใดใช้วิธีการชำระเงินนี้ได้
ระบุไฟล์ Manifest ของวิธีการชำระเงิน
เมื่อผู้ขายเริ่มทำธุรกรรมการชำระเงิน เบราว์เซอร์จะส่งคำขอ HTTP
GET
ไปยัง URL ตัวระบุวิธีการชำระเงิน
เซิร์ฟเวอร์จะตอบกลับด้วย
ส่วนเนื้อหาไฟล์ Manifest ของวิธีการชำระเงิน
ไฟล์ Manifest ของวิธีการชำระเงินมี 2 ช่อง ได้แก่ default_applications
และ supported_origins
ชื่อพร็อพเพอร์ตี้ | คำอธิบาย |
---|---|
default_applications (ต้องระบุ) |
อาร์เรย์ของ URL ที่ชี้ไปยังไฟล์ Manifest ของเว็บแอปซึ่งเป็นที่ที่โฮสต์แอปการชำระเงิน (URL อาจเป็นรายการแบบสัมพัทธ์ได้) อาร์เรย์นี้ควรอ้างอิงไฟล์ Manifest สำหรับการพัฒนา, ไฟล์ Manifest ของเวอร์ชันที่ใช้งานจริง ฯลฯ |
supported_origins |
อาร์เรย์ของ URL ที่ชี้ไปยังต้นทางที่อาจโฮสต์แอปการชำระเงินของบุคคลที่สามที่ใช้วิธีการชำระเงินเดียวกัน โปรดทราบว่าแอปการชำระเงินหลายแอปใช้วิธีการชำระเงินได้ |
ไฟล์ Manifest ของวิธีการชำระเงินควรมีลักษณะดังนี้
[เครื่องจัดการการชำระเงิน] /payment-manifest.json:
{
"default_applications": ["https://bobbucks.dev/manifest.json"],
"supported_origins": [
"https://alicepay.friendsofalice.example"
]
}
เมื่อเบราว์เซอร์อ่านช่อง default_applications
เบราว์เซอร์จะแสดงรายการลิงก์ไปยังไฟล์ Manifest ของเว็บแอปของแอปการชำระเงินที่รองรับ
เลือกกำหนดเส้นทางเบราว์เซอร์ให้ค้นหาไฟล์ Manifest ของวิธีการชำระเงินในตำแหน่งอื่น
URL ของตัวระบุวิธีการชำระเงินอาจตอบกลับด้วยส่วนหัว Link
ที่ชี้ไปยัง URL อื่นที่เบราว์เซอร์ดึงข้อมูลไฟล์ Manifest วิธีการชำระเงินได้ ซึ่งจะมีประโยชน์เมื่อไฟล์ Manifest ของวิธีการชำระเงินโฮสต์อยู่ที่เซิร์ฟเวอร์อื่น หรือเมื่อบุคคลที่สามเป็นผู้ให้บริการแอปการชำระเงิน
กำหนดค่าเซิร์ฟเวอร์วิธีการชำระเงินให้ตอบกลับด้วยส่วนหัว HTTP Link
ด้วยแอตทริบิวต์ rel="payment-method-manifest"
และ URL ไฟล์ Manifest ของวิธีการชำระเงิน
ตัวอย่างเช่น หากไฟล์ Manifest อยู่ที่ https://bobbucks.dev/payment-manifest.json
ส่วนหัวการตอบกลับจะมีสิ่งต่อไปนี้
Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
URL อาจเป็นชื่อโดเมนแบบเต็มหรือเส้นทางที่เกี่ยวข้องก็ได้ ตรวจสอบ https://bobbucks.dev/pay/
เพื่อหาการจราจรของข้อมูลในเครือข่ายเพื่อดูตัวอย่าง คุณจะใช้คำสั่ง curl
ได้เช่นกัน ดังนี้
curl --include https://bobbucks.dev/pay
ขั้นตอนที่ 3: แสดงไฟล์ Manifest ของเว็บแอป
ไฟล์ Manifest ของเว็บแอปใช้เพื่อกำหนดเว็บแอปตามชื่อที่แนะนำ ซึ่งเป็นไฟล์ Manifest ที่ใช้กันอย่างแพร่หลายเพื่อกำหนด Progressive Web App (PWA)
ไฟล์ Manifest ของเว็บแอปโดยทั่วไปจะมีลักษณะดังนี้
[เครื่องจัดการการชำระเงิน] /manifest.json:
{
"name": "Pay with Bobpay",
"short_name": "Bobpay",
"description": "This is an example of the Payment Handler API.",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"serviceworker": {
"src": "service-worker.js",
"scope": "/",
"use_cache": false
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"related_applications": [
{
"platform": "play",
"id": "com.example.android.samplepay",
"min_version": "1",
"fingerprints": [
{
"type": "sha256_cert",
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
}
]
}
]
}
ข้อมูลที่อธิบายในไฟล์ Manifest ของเว็บแอปยังใช้เพื่อกำหนดลักษณะที่แอปการชำระเงินจะปรากฏใน UI คำขอการชำระเงินด้วย
ชื่อพร็อพเพอร์ตี้ | คำอธิบาย |
---|---|
name (ต้องระบุ)
|
ใช้เป็นชื่อแอปการชำระเงิน |
icons (ต้องระบุ)
|
ใช้เป็นไอคอนแอปการชำระเงิน เฉพาะ Chrome เท่านั้นที่ใช้ไอคอนเหล่านี้ เบราว์เซอร์อื่นๆ อาจใช้ไอคอนเหล่านั้นเป็นไอคอนสำรองหากคุณไม่ได้ระบุให้เป็นส่วนหนึ่งของเครื่องมือการชำระเงิน |
serviceworker
|
ใช้เพื่อตรวจหา Service Worker ที่ทำงานเป็นแอปการชำระเงินบนเว็บ |
serviceworker.src |
URL ที่จะใช้ดาวน์โหลดสคริปต์ Service Worker |
serviceworker.scope |
สตริงที่แสดงถึง URL ที่กำหนดขอบเขตการลงทะเบียนของ Service Worker |
serviceworker.use_cache |
URL ที่จะใช้ดาวน์โหลดสคริปต์ Service Worker |
related_applications
|
ใช้เพื่อตรวจหาแอปที่ทำหน้าที่เป็นแอปการชำระเงินจากระบบปฏิบัติการ ดูรายละเอียดเพิ่มเติมได้ที่คู่มือนักพัฒนาแอปสำหรับการชำระเงิน Android |
prefer_related_applications
|
ใช้เพื่อระบุว่าควรเปิดแอปการชำระเงินแอปใดเมื่อทั้งแอปการชำระเงินจากระบบปฏิบัติการและแอปการชำระเงินบนเว็บพร้อมใช้งาน |
![แอปการชำระเงินที่มีไอคอน](https://web.dev/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=6&hl=th)
พร็อพเพอร์ตี้ name
ของไฟล์ Manifest ของเว็บแอปใช้เป็นชื่อแอปการชำระเงิน และใช้พร็อพเพอร์ตี้ icons
เป็นไอคอนแอปการชำระเงิน
วิธีที่ Chrome กำหนดแอปการชำระเงินที่จะเปิดใช้งาน
การเปิดตัวแอปการชำระเงินเฉพาะแพลตฟอร์ม
หากต้องการเปิดตัวแอปการชำระเงินเฉพาะแพลตฟอร์ม จะต้องเป็นไปตามเงื่อนไขต่อไปนี้
- มีการระบุช่อง
related_applications
ในไฟล์ Manifest ของเว็บแอปและ- รหัสแพ็กเกจและการจับคู่ลายเซ็นของแอปที่ติดตั้งไว้ ส่วนเวอร์ชันต่ำสุด (
min_version
) ในไฟล์ Manifest ของเว็บแอปน้อยกว่าหรือเท่ากับเวอร์ชันของแอปพลิเคชันที่ติดตั้ง
- รหัสแพ็กเกจและการจับคู่ลายเซ็นของแอปที่ติดตั้งไว้ ส่วนเวอร์ชันต่ำสุด (
- ช่อง
prefer_related_applications
คือtrue
- มีการติดตั้งแอปการชำระเงินเฉพาะแพลตฟอร์มแล้ว และมีคุณสมบัติดังนี้
- ตัวกรอง Intent ของ
org.chromium.action.PAY
- ตัวระบุวิธีการชำระเงินที่ระบุเป็นค่าสำหรับพร็อพเพอร์ตี้
org.chromium.default_payment_method_name
- ตัวกรอง Intent ของ
อ่านแอปการชำระเงิน Android: คู่มือสำหรับนักพัฒนาซอฟต์แวร์ เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีตั้งค่าแอปเหล่านี้
[เครื่องจัดการการชำระเงิน] /manifest.json
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "xyz.bobpay.app",
"min_version": "1",
"fingerprints": [{
"type": "sha256_cert",
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
}]
}]
หากเบราว์เซอร์ระบุว่าแอปการชำระเงินเฉพาะแพลตฟอร์มพร้อมใช้งาน ขั้นตอนการสำรวจจะสิ้นสุดลงที่นี่ หรือไปยังขั้นตอนถัดไปคือ การเปิดตัวแอปการชำระเงินบนเว็บ
การเปิดตัวแอปการชำระเงินบนเว็บ
ควรระบุแอปการชำระเงินบนเว็บในช่อง serviceworker
ของไฟล์ Manifest ของเว็บแอป
[เครื่องจัดการการชำระเงิน] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
เบราว์เซอร์จะเปิดแอปการชำระเงินบนเว็บโดยการส่งเหตุการณ์ paymentrequest
ไปยัง Service Worker โดยไม่จำเป็นต้องลงทะเบียนล่วงหน้า ซึ่งลงทะเบียนได้ทันท่วงที
ทำความเข้าใจการเพิ่มประสิทธิภาพพิเศษ
วิธีที่เบราว์เซอร์สามารถข้าม UI คำขอการชำระเงินและเปิดแอปการชำระเงินโดยตรง
ใน Chrome เมื่อมีการเรียกเมธอด show()
ของ PaymentRequest
แล้ว Payment
Request API จะแสดง UI ที่ได้จากเบราว์เซอร์ที่เรียกว่า "UI คำขอการชำระเงิน" UI นี้ช่วยให้ผู้ใช้เลือกแอปการชำระเงินได้ หลังจากกดปุ่มดำเนินการต่อใน UI คำขอการชำระเงิน ระบบจะเปิดแอปการชำระเงินที่เลือก
การแสดง UI คำขอการชำระเงินก่อนเปิดตัวแอปการชำระเงินจะเพิ่มจำนวนขั้นตอนที่ผู้ใช้ต้องดำเนินการเพื่อทำการชำระเงิน เพื่อเพิ่มประสิทธิภาพกระบวนการนี้ เบราว์เซอร์จะมอบสิทธิ์ดำเนินการตามข้อมูลดังกล่าวให้กับแอปการชำระเงินและเปิดแอปการชำระเงินโดยตรงโดยไม่ต้องแสดง UI คำขอการชำระเงินเมื่อมีการเรียกใช้ show()
หากต้องการเปิดใช้งานแอปการชำระเงินโดยตรง จะต้องเป็นไปตามเงื่อนไขต่อไปนี้
show()
จะทำงานด้วยท่าทางสัมผัสของผู้ใช้ (เช่น การคลิกเมาส์)- แอปสำหรับการชำระเงินมีเพียงแอปเดียวที่มีลักษณะดังนี้
- รองรับตัวระบุวิธีการชำระเงินที่ขอ
แอปการชำระเงินบนเว็บมีการลงทะเบียนแบบ Just-In-Time (JIT) เมื่อใด
สามารถเปิดแอปการชำระเงินบนเว็บได้โดยที่ผู้ใช้ไม่ต้องไปที่เว็บไซต์แอปการชำระเงินและลงทะเบียนโปรแกรมทำงานอย่างชัดเจนก่อน ผู้ให้บริการจะลงทะเบียนได้ในทันทีเมื่อผู้ใช้เลือกที่จะชำระเงินด้วยแอปการชำระเงินบนเว็บ ช่วงเวลาการลงทะเบียนมี 2 รูปแบบดังนี้
- หาก UI คำขอการชำระเงินแสดงต่อผู้ใช้ แสดงว่าแอปได้รับการลงทะเบียนในเวลาที่เหมาะสมและเปิดขึ้นเมื่อผู้ใช้คลิกดำเนินการต่อ
- หากข้าม UI คำขอการชำระเงิน แอปการชำระเงินจะได้รับการลงทะเบียนอย่างทันท่วงทีและเปิดใช้งานโดยตรง การข้าม UI คำขอการชำระเงินเพื่อเปิดตัวแอปที่ลงทะเบียนตามเวลาจริงจะต้องมีท่าทางสัมผัสของผู้ใช้ ซึ่งจะป้องกันการลงทะเบียนโปรแกรมทำงานแบบข้ามต้นทางโดยไม่คาดคิด
ขั้นตอนถัดไป
ตอนนี้คุณทำให้แอปการชำระเงินค้นพบได้แล้ว ลองเรียนรู้วิธีพัฒนาแอปการชำระเงินเฉพาะแพลตฟอร์มและแอปการชำระเงินบนเว็บ