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

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

Eiji Kitamura

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

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

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

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

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

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

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

• ตัวระบุวิธีการชำระเงินตาม 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' }
  }
});

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

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

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

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

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

ไฟล์ Manifest ของวิธีการชำระเงินควรมีลักษณะดังนี้

[payment handler] /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 ของเว็บแอปโดยทั่วไปจะมีลักษณะดังนี้

[payment handler] /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 ของไฟล์ 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 โดยไม่จำเป็นต้องลงทะเบียน Service Worker ล่วงหน้า ซึ่งลงทะเบียนได้ทันเวลา

ทำความเข้าใจการเพิ่มประสิทธิภาพพิเศษ

วิธีที่เบราว์เซอร์ข้าม UI คำขอการชำระเงินและเปิดแอปการชำระเงินโดยตรง

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

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

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

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

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

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

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

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

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

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