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

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

Eiji Kitamura

เผยแพร่: 27 กันยายน 2017, อัปเดตล่าสุด: 1 กรกฎาคม 2025

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

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

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

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

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

	Chromium		Safari		Firefox
	เดสก์ท็อป	Android	เดสก์ท็อป	มือถือ	เดสก์ท็อป/อุปกรณ์เคลื่อนที่
Payment Request API	✔	✔	✔	✔
Web-based Payment Handler 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 ใดก็ได้เป็นตัวระบุวิธีการชำระเงิน ตราบใดที่ควบคุม URL นั้นได้และแสดงเนื้อหาและส่วนหัว HTTP ที่กำหนดเองได้ ในบทความนี้ เราจะใช้ https://bobbucks.dev/pay เป็นตัวระบุวิธีการชำระเงิน

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

วิธีที่ผู้ขายใช้ตัวระบุวิธีการชำระเงิน

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

[ผู้ขาย] ขอชำระเงิน:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

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

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

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

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

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

กำหนดค่าเซิร์ฟเวอร์วิธีการชำระเงินให้ตอบกลับด้วยส่วนหัว HTTP Link ที่มีแอตทริบิวต์ rel="payment-method-manifest" และ URL ของไฟล์ Manifest ของวิธีการชำระเงิน ตัวอย่างเช่น หากไฟล์ Manifest อยู่ที่ https://bobbucks.dev/pay/payment-manifest.json ส่วนหัวของการตอบกลับจะมีลักษณะดังนี้

Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"

URL อาจเป็นชื่อโดเมนที่สมบูรณ์ในตัวเองหรือเส้นทางแบบสัมพัทธ์ก็ได้ ตรวจสอบ https://bobbucks.dev/payการจราจรของข้อมูลในเครือข่ายเพื่อดูตัวอย่าง คุณยังใช้คำสั่ง curl ได้ด้วย

curl --include https://bobbucks.dev/pay

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

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

หมายเหตุ: ระบบอาจไม่ส่งคำขอไปยังตัวระบุวิธีการชำระเงิน ทั้งนี้ขึ้นอยู่กับการผสมผสานระหว่างตัวระบุและเบราว์เซอร์ เช่น Chrome จะไม่ส่งคำขอสำหรับ https://play.google.com/billing และในบางกรณี https://google.com/pay

ไฟล์ 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 รายการ

ขั้นตอนที่ 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: คู่มือสำหรับนักพัฒนาแอป

[payment handler] /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 แล้ว Payment Request API จะแสดง UI ที่เบราว์เซอร์จัดหาให้ซึ่งเรียกว่า "Payment Request UI" UI นี้ช่วยให้ผู้ใช้เลือกแอปการชำระเงินได้ หลังจากกดปุ่มต่อไป ใน UI คำขอการชำระเงิน ระบบจะเปิดแอปการชำระเงินที่เลือก

UI คำขอการชำระเงินจะแทรกแซงก่อนเปิดตัวแอปการชำระเงิน

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

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

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

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

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

เมื่อใดที่แอปการชำระเงินบนเว็บจะได้รับการลงทะเบียนแบบทันที (JIT)

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

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

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

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

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

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