ธุรกรรมการชำระเงินที่ใช้ Web Payments จะเริ่มต้นด้วยการค้นพบ แอปการชำระเงิน ดูวิธีตั้งค่าวิธีการชำระเงินและดาวน์โหลดแอปการชำระเงิน พร้อมให้ผู้ขายและลูกค้าชำระเงิน
เพื่อใช้กับ Payment Request API แอปการชำระเงินต้องเชื่อมโยงกับ ตัวระบุวิธีการชำระเงิน ผู้ขายที่ต้องการผสานรวมกับแอปการชำระเงิน จะใช้ตัวระบุวิธีการชำระเงินเพื่อระบุให้เบราว์เซอร์ทราบ ช่วงเวลานี้ จะพูดถึงวิธีการทำงานของการค้นพบแอปการชำระเงิน และวิธีกำหนดค่า เพื่อให้เบราว์เซอร์ค้นพบและเรียกแอปการชำระเงินได้อย่างถูกต้อง
หากคุณยังใหม่ต่อแนวคิดของ Web Payments หรือวิธีการทำงานของธุรกรรมการชำระเงิน ผ่านแอปการชำระเงิน โปรดอ่านบทความต่อไปนี้ก่อน
การสนับสนุนเบราว์เซอร์
Web Payments ประกอบด้วยเทคโนโลยี 2-3 รูปแบบและการสนับสนุน สถานะ ขึ้นอยู่กับเบราว์เซอร์
วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงิน
แอปการชำระเงินทุกแอปต้องมีสิ่งต่อไปนี้
- ตัวระบุวิธีการชําระเงินตาม URL
- ไฟล์ Manifest ของวิธีการชำระเงิน (ยกเว้นเมื่อตัวระบุวิธีการชำระเงินคือ จากบุคคลที่สาม)
- ไฟล์ Manifest ของเว็บแอป
![แผนภาพ: วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงินจากตัวระบุวิธีการชําระเงินตาม URL](https://web.dev/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=9&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=9&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 คุณไม่จำเป็นต้องลงทะเบียน Service Worker ใน
ที่ประสบความสำเร็จ ซึ่งลงทะเบียนได้ทันท่วงที
ทำความเข้าใจการเพิ่มประสิทธิภาพพิเศษ
วิธีที่เบราว์เซอร์สามารถข้าม UI คำขอการชำระเงินและเปิดแอปการชำระเงินโดยตรง
ใน Chrome เมื่อมีการเรียกวิธีการชำระเงิน show()
ของ PaymentRequest
API คำขอจะแสดง UI จากเบราว์เซอร์ที่เรียกว่า "UI คำขอการชำระเงิน" ช่วงเวลานี้
UI ช่วยให้ผู้ใช้เลือกแอปการชำระเงินได้ หลังจากกดปุ่มดำเนินการต่อ
ใน UI คำขอการชำระเงิน ระบบจะเปิดแอปการชำระเงินที่เลือก
การแสดง UI คำขอการชำระเงินก่อนเปิดตัวแอปการชำระเงินจะช่วยเพิ่ม
จำนวนขั้นตอนที่ผู้ใช้ต้องดำเนินการเพื่อทำการชำระเงิน เพื่อเพิ่มประสิทธิภาพกระบวนการ
เบราว์เซอร์จะมอบสิทธิ์
การเติมข้อมูลให้กับแอปการชำระเงิน
เปิดแอปการชำระเงินโดยตรงโดยไม่แสดง UI คำขอการชำระเงินเมื่อ
โทรหา show()
หากต้องการเปิดใช้งานแอปการชำระเงินโดยตรง จะต้องเป็นไปตามเงื่อนไขต่อไปนี้
show()
จะทำงานด้วยท่าทางสัมผัสของผู้ใช้ (เช่น การคลิกเมาส์)- แอปสำหรับการชำระเงินมีเพียงแอปเดียวที่มีลักษณะดังนี้
- รองรับตัวระบุวิธีการชำระเงินที่ขอ
แอปการชำระเงินบนเว็บมีการลงทะเบียนแบบ Just-In-Time (JIT) เมื่อใด
สามารถเปิดแอปการชำระเงินบนเว็บได้โดยไม่ต้องที่ผู้ใช้เข้าชมก่อนอย่างชัดเจน ไปยังเว็บไซต์แอปการชำระเงินและลงทะเบียน Service Worker บริการ ผู้ปฏิบัติงานจะได้รับการลงทะเบียนทันทีเมื่อผู้ใช้เลือกที่จะชำระเงินด้วย แอปชำระเงินบนเว็บ เวลาลงทะเบียนจะมีด้วยกัน 2 รูปแบบ ได้แก่
- หาก UI คำขอการชำระเงินแสดงต่อผู้ใช้ แสดงว่ามีการลงทะเบียนแอปแล้ว ทันทีและเปิดใช้เมื่อผู้ใช้คลิกต่อไป
- หากข้าม UI คำขอการชำระเงิน ระบบจะลงทะเบียนแอปการชำระเงิน ที่ทันท่วงทีและเปิดตัวโดยตรง ข้าม UI คำขอการชำระเงินเพื่อเปิดใช้งาน แอปที่ลงทะเบียนแบบทันท่วงทีต้องใช้ท่าทางสัมผัสของผู้ใช้ ซึ่งจะป้องกัน การลงทะเบียน Service Worker แบบข้ามต้นทางที่ไม่คาดคิด
ขั้นตอนถัดไป
ตอนนี้คุณทำให้แอปการชำระเงินค้นพบได้แล้ว ลองเรียนรู้วิธีพัฒนาแพลตฟอร์มเฉพาะแพลตฟอร์ม แอปการชำระเงินและแอปชำระเงินบนเว็บ