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

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

Eiji Kitamura

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

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

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

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

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

	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 ของวิธีการชำระเงิน

เมื่อผู้ขายทำธุรกรรมการชำระเงิน เบราว์เซอร์จะส่งคำขอ HTTPGET ไปยัง 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) เมื่อใด

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

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

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

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

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

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