การตั้งค่าวิธีการชำระเงิน

ธุรกรรมการชำระเงินที่ใช้ Web Payments จะเริ่มด้วยการค้นพบแอปการชำระเงินของคุณ เรียนรู้วิธีตั้งค่าวิธีการชำระเงินและเตรียมแอปการชำระเงินให้พร้อมสำหรับผู้ขายและลูกค้าในการชำระเงิน

Eiji Kitamura

แอปการชำระเงินต้องเชื่อมโยงกับตัวระบุวิธีการชำระเงิน เพื่อใช้กับ Payment Request API ผู้ขายที่ต้องการผสานรวมกับแอปการชำระเงินจะใช้ตัวระบุวิธีการชำระเงินเพื่อระบุไปยังเบราว์เซอร์ บทความนี้กล่าวถึงวิธีการทำงานของการค้นพบแอปการชำระเงิน รวมถึงวิธีกำหนดค่าเพื่อให้เบราว์เซอร์ค้นพบและเรียกแอปการชำระเงินได้อย่างถูกต้อง

หากคุณยังไม่คุ้นเคยกับระบบการชำระเงินบนเว็บหรือวิธีการทำงานของธุรกรรมการชำระเงินผ่านแอปการชำระเงิน โปรดอ่านบทความต่อไปนี้ก่อน

• การส่งเสริมแอปการชำระเงินด้วย Web Payments
• ระยะเวลาของธุรกรรมการชำระเงิน

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

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

	Chromium		Safari		Firefox
	เดสก์ท็อป	Android	เดสก์ท็อป	อุปกรณ์เคลื่อนที่	เดสก์ท็อป/อุปกรณ์เคลื่อนที่
API คำขอการชำระเงิน	✔	✔	✔	✔
API เครื่องจัดการการชำระเงิน	✔	✔
แอปชำระเงินบน iOS/Android	✔	✔	✔*	✔*

หมายเหตุ: *Safari รองรับ Apple Pay แต่ไม่มีแอปการชำระเงินของบุคคลที่สาม

วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงิน

แอปการชำระเงินทุกแอปต้องมีสิ่งต่อไปนี้

• ตัวระบุวิธีการชําระเงินตาม URL
• ไฟล์ Manifest ของวิธีการชำระเงิน (ยกเว้นในกรณีที่บุคคลที่สามเป็นผู้จัดหาตัวระบุวิธีการชำระเงิน)
• ไฟล์ Manifest ของเว็บแอป

ขั้นตอนการสำรวจจะเริ่มต้นเมื่อผู้ขายเริ่มทำธุรกรรม โดยมีขั้นตอนดังนี้

1. เบราว์เซอร์จะส่งคำขอไปยัง URL ของตัวระบุวิธีการชำระเงิน และดึงข้อมูลไฟล์ Manifest วิธีการชำระเงิน
2. เบราว์เซอร์จะกำหนด URL ของไฟล์ Manifest ของเว็บแอปจากไฟล์ Manifest ของวิธีการชำระเงินและดึงไฟล์ Manifest ของเว็บแอป
3. เบราว์เซอร์จะกำหนดว่าเปิดแอปสำหรับชำระเงินของระบบปฏิบัติการหรือแอปการชำระเงินบนเว็บจากไฟล์ 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' }
  }
});

หมายเหตุ: อนุญาตการเปลี่ยนเส้นทางได้สูงสุด 3 ครั้งภายในเว็บไซต์เดียวกันสำหรับตัวระบุวิธีการชำระเงินใน Chrome

ขั้นตอนที่ 2: แสดงไฟล์ Manifest ของวิธีการชำระเงิน

ไฟล์ Manifest ของวิธีการชำระเงินคือไฟล์ JSON ที่กำหนดว่าแอปการชำระเงินใดใช้วิธีการชำระเงินนี้ได้

ระบุไฟล์ Manifest ของวิธีการชำระเงิน

เมื่อผู้ขายเริ่มทำธุรกรรมการชำระเงิน เบราว์เซอร์จะส่งคำขอ HTTP GET ไปยัง URL ตัวระบุวิธีการชำระเงิน เซิร์ฟเวอร์จะตอบกลับด้วย ส่วนเนื้อหาไฟล์ Manifest ของวิธีการชำระเงิน

ไฟล์ Manifest ของวิธีการชำระเงินมี 2 ช่อง ได้แก่ default_applications และ supported_origins

ช่องไฟล์ Manifest ของวิธีการชำระเงิน

ชื่อพร็อพเพอร์ตี้	คำอธิบาย
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 ของเว็บแอปของแอปการชำระเงินที่รองรับ

หมายเหตุ: Chrome รองรับแอปการชำระเงินเริ่มต้น 1 แอปต่อวิธีการชำระเงิน 1 วิธีตั้งแต่ Chrome 83

เลือกกำหนดเส้นทางเบราว์เซอร์ให้ค้นหาไฟล์ 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

หมายเหตุ: ดูข้อมูลเพิ่มเติมเกี่ยวกับแนวทางปฏิบัติเกี่ยวกับวิธีการชำระเงินได้ในเอกสารประกอบของ W3C

ขั้นตอนที่ 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 คำขอการชำระเงินด้วย

ช่องสําคัญเกี่ยวกับไฟล์ Manifest ของเว็บแอป

ชื่อพร็อพเพอร์ตี้	คำอธิบาย
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	ใช้เพื่อระบุว่าควรเปิดแอปการชำระเงินแอปใดเมื่อทั้งแอปการชำระเงินจากระบบปฏิบัติการและแอปการชำระเงินบนเว็บพร้อมใช้งาน

ป้ายกำกับและไอคอนแอปการชำระเงิน

พร็อพเพอร์ตี้ 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

อ่านแอปการชำระเงิน 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 คำขอการชำระเงินก่อนเปิดตัวแอปการชำระเงินจะเพิ่มจำนวนขั้นตอนที่ผู้ใช้ต้องดำเนินการเพื่อทำการชำระเงิน เพื่อเพิ่มประสิทธิภาพกระบวนการนี้ เบราว์เซอร์จะมอบสิทธิ์ดำเนินการตามข้อมูลดังกล่าวให้กับแอปการชำระเงินและเปิดแอปการชำระเงินโดยตรงโดยไม่ต้องแสดง UI คำขอการชำระเงินเมื่อมีการเรียกใช้ show()

ข้าม UI คำขอการชำระเงินแล้วเปิดแอปการชำระเงินโดยตรง

หากต้องการเปิดใช้งานแอปการชำระเงินโดยตรง จะต้องเป็นไปตามเงื่อนไขต่อไปนี้

• show() จะทำงานด้วยท่าทางสัมผัสของผู้ใช้ (เช่น การคลิกเมาส์)
• แอปสำหรับการชำระเงินมีเพียงแอปเดียวที่มีลักษณะดังนี้
  • รองรับตัวระบุวิธีการชำระเงินที่ขอ

หมายเหตุ: ปัจจุบัน Safari รองรับเฉพาะ Apple Pay ดังนั้นจึงเปิดแอปโดยตรงเสมอ โดยข้าม UI คำขอการชำระเงิน

แอปการชำระเงินบนเว็บมีการลงทะเบียนแบบ Just-In-Time (JIT) เมื่อใด

สามารถเปิดแอปการชำระเงินบนเว็บได้โดยที่ผู้ใช้ไม่ต้องไปที่เว็บไซต์แอปการชำระเงินและลงทะเบียนโปรแกรมทำงานอย่างชัดเจนก่อน ผู้ให้บริการจะลงทะเบียนได้ในทันทีเมื่อผู้ใช้เลือกที่จะชำระเงินด้วยแอปการชำระเงินบนเว็บ ช่วงเวลาการลงทะเบียนมี 2 รูปแบบดังนี้

• หาก UI คำขอการชำระเงินแสดงต่อผู้ใช้ แสดงว่าแอปได้รับการลงทะเบียนในเวลาที่เหมาะสมและเปิดขึ้นเมื่อผู้ใช้คลิกดำเนินการต่อ
• หากข้าม UI คำขอการชำระเงิน แอปการชำระเงินจะได้รับการลงทะเบียนอย่างทันท่วงทีและเปิดใช้งานโดยตรง การข้าม UI คำขอการชำระเงินเพื่อเปิดตัวแอปที่ลงทะเบียนตามเวลาจริงจะต้องมีท่าทางสัมผัสของผู้ใช้ ซึ่งจะป้องกันการลงทะเบียนโปรแกรมทำงานแบบข้ามต้นทางโดยไม่คาดคิด

หมายเหตุ: แม้ว่าตัวระบุวิธีการชำระเงินรายการเดียวจะรองรับแอปการชำระเงินหลายแอปได้ แต่การลงทะเบียน JIT จะเกิดขึ้นก็ต่อเมื่อไฟล์ Manifest ของวิธีการชำระเงินชี้ไปยังแอปการชำระเงินแอปเดียว

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

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

• แอปการชำระเงินสำหรับ Android: คู่มือสำหรับนักพัฒนาซอฟต์แวร์
• คู่มือนักพัฒนาแอปการชำระเงินบนเว็บ