ขอขอบคุณที่ติดตาม Google I/O ดูเนื้อหาตามคำขอ

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

Eiji Kitamura

เผยแพร่เมื่อวันที่ 27 กันยายน 2017 อัปเดตล่าสุดเมื่อวันที่ 16 ตุลาคม 2026

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

หากคุณเพิ่งเริ่มใช้ Web Payments โปรดอ่านภาพรวมของ Web Payments ก่อน

ประเภทแอปการชำระเงิน

วิธีการชำระเงินอาจรองรับโดยแอปการชำระเงินบน Android, แอปการชำระเงินบนเว็บ หรือทั้ง 2 อย่าง ดังนี้

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

แอปการชำระเงินของ Android พร้อมใช้งานใน Chrome บน Android และใน WebView แอปการชำระเงินบนเว็บพร้อมให้บริการใน Chrome บนทุกแพลตฟอร์ม แต่ไม่พร้อมให้บริการใน WebView

หากมีแอปทั้ง 2 ประเภทสำหรับวิธีการชำระเงินและไฟล์ Manifest ของเว็บแอปตั้งค่า prefer_related_applications เป็น true ไว้ Chrome จะซ่อนแอปการชำระเงินบนเว็บ มิฉะนั้น ผู้ใช้อาจเห็นทั้ง 2 แอปใน UI ของ Payment Request และเลือกแอปใดแอปหนึ่ง

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

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

	Chromium		Safari		Firefox
	เดสก์ท็อป	Android	เดสก์ท็อป	มือถือ	เดสก์ท็อป/อุปกรณ์เคลื่อนที่
Payment Request API	✔	✔	✔	✔
Payment Handler API บนเว็บ	✔	✔
แอปการชำระเงินบน iOS/Android	✔	✔	✔*	✔*

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

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

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

แผนภาพ: วิธีที่เบราว์เซอร์ค้นพบแอปการชำระเงินจากตัวระบุวิธีการชำระเงินตาม URL

กระบวนการค้นพบจะเริ่มต้นเมื่อผู้ขายเริ่มธุรกรรม ดังนี้

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

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

ขั้นตอนที่ 1: ระบุตัวระบุวิธีการชำระเงิน

ตัวระบุวิธีการชำระเงินคือสตริงที่อิงตาม URL เช่น ตัวระบุของ Google Pay คือ https://google.com/pay นักพัฒนาแอปการชำระเงินสามารถเลือก URL ใดก็ได้เป็นตัวระบุวิธีการชำระเงิน ตราบใดที่นักพัฒนาแอปควบคุม URL นั้นได้ และสามารถแสดงเนื้อหาและส่วนหัว HTTP ใดก็ได้ ในบทความนี้ เราจะใช้ 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 HEADไปยัง URL ตัวระบุวิธีการชำระเงิน URL ตัวระบุวิธีการชำระเงินจะตอบกลับด้วยส่วนหัว HTTP Link ที่ชี้ไปยัง URL ที่เบราว์เซอร์สามารถดึงข้อมูลไฟล์ Manifest ของวิธีการชำระเงินได้

กำหนดค่าเซิร์ฟเวอร์วิธีการชำระเงินให้ตอบกลับด้วยส่วนหัว 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 อาจเป็นชื่อโดเมนที่สมบูรณ์ในตัวเองหรือ Relative Path ก็ได้ ตรวจสอบ https://bobbucks.dev/pay เพื่อดูตัวอย่างการจราจรของข้อมูลในเครือข่าย คุณยังใช้คำสั่ง curl ได้ด้วย ดังนี้

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

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

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

ช่องไฟล์ Manifest ของวิธีการชำระเงิน
ชื่อพร็อพเพอร์ตี้	คำอธิบาย
`default_applications` (ต้องระบุ)	อาร์เรย์ของ URL ที่ชี้ไปยังไฟล์ Manifest ของเว็บแอปที่โฮสต์แอปการชำระเงิน (URL อาจเป็น Relative Path) อาร์เรย์นี้ควรจะอ้างอิงไฟล์ Manifest สำหรับการพัฒนา ไฟล์ Manifest สำหรับเวอร์ชันที่ใช้งานจริง ฯลฯ
`supported_origins`	อาร์เรย์ของ URL ที่ชี้ไปยังต้นทางที่อาจโฮสต์แอปการชำระเงินของบุคคลที่สามซึ่งใช้วิธีการชำระเงินเดียวกัน โปรดทราบว่าวิธีการชำระเงินสามารถใช้ได้กับแอปการชำระเงินหลายแอป

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

[payment handler] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

เมื่อเบราว์เซอร์อ่านช่อง default_applications จะพบรายการลิงก์ไปยังไฟล์ Manifest ของเว็บแอปของแอปการชำระเงินที่รองรับ

ขั้นตอนที่ 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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome จะอ่านช่องต่างๆ โดยขึ้นอยู่กับประเภทของแอปการชำระเงิน สำหรับแอปการชำระเงิน Android นั้น Chrome จะอ่านเฉพาะ related_applications สำหรับแอปการชำระเงินบนเว็บ Chrome จะอ่าน name, icons, serviceworker, payment และ prefer_related_applications

ช่องไฟล์ Manifest ของเว็บแอปที่สำคัญ
ชื่อพร็อพเพอร์ตี้	คำอธิบาย
`name` (ต้องระบุ)	ใช้เป็นชื่อแอปการชำระเงิน
`icons` (ต้องระบุ)	ใช้เป็นไอคอนแอปการชำระเงิน มีเพียง Chrome เท่านั้นที่ใช้ไอคอนเหล่านี้ เบราว์เซอร์อื่นๆ อาจใช้เป็นไอคอนสำรองหากคุณไม่ได้ระบุไว้เป็นส่วนหนึ่งของเครื่องมือการชำระเงิน
`serviceworker`	แอปการชำระเงินบนเว็บเท่านั้น กำหนด Service Worker ที่ทำงานเป็นแอปการชำระเงิน
`serviceworker.src`	URL สำหรับดาวน์โหลดสคริปต์ Service Worker
`serviceworker.scope`	สตริงที่แสดง URL ซึ่งกำหนดขอบเขตการลงทะเบียนของ Service Worker
`serviceworker.use_cache`	เบราว์เซอร์จะใช้แคช HTTP ได้หรือไม่เมื่อดึงข้อมูลสคริปต์ Service Worker
`payment.supported_delegations`	แอปการชำระเงินบนเว็บเท่านั้น ข้อมูลการจัดส่งและข้อมูลติดต่อที่แอปการชำระเงินสามารถระบุได้ ได้แก่ `shippingAddress`, `payerName`, `payerEmail` หรือ `payerPhone` แอปการชำระเงินของ Android จะประกาศข้อมูลนี้ใน `AndroidManifest.xml` แทน
`related_applications`	แอปการชำระเงินของ Android เท่านั้น ระบุแอปและใบรับรองการลงนาม ดูรายละเอียดเพิ่มเติมได้ในคู่มือนักพัฒนาแอปการชำระเงินใน Android
`prefer_related_applications`	ตั้งค่าเป็น `true` เพื่อซ่อนแอปการชำระเงินบนเว็บเมื่อติดตั้งแอปการชำระเงินบน Android

ระบบจะใช้พร็อพเพอร์ตี้ name ของไฟล์ Manifest ของเว็บแอปเป็นชื่อแอปการชำระเงิน และใช้พร็อพเพอร์ตี้ icons เป็นไอคอนแอปการชำระเงิน

วิธีที่ Chrome กำหนดแอปการชำระเงินที่จะเปิด

การเปิดแอปการชำระเงินเฉพาะแพลตฟอร์ม

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

ช่อง related_applications จะระบุไว้ในไฟล์ Manifest ของเว็บแอป และ
- รหัสแพ็กเกจและลายเซ็นของแอปที่ติดตั้งตรงกัน ขณะที่เวอร์ชันขั้นต่ำ (min_version) ในไฟล์ Manifest ของเว็บแอปน้อยกว่าหรือเท่ากับเวอร์ชันของแอปพลิเคชันที่ติดตั้ง
มีการติดตั้งแอปการชำระเงินเฉพาะแพลตฟอร์มและมีคุณสมบัติต่อไปนี้
- ตัวกรอง Intent ของ org.chromium.intent.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"
  }]
}]

หาก prefer_related_applications เป็น true และแอปการชำระเงินเฉพาะแพลตฟอร์มพร้อมใช้งาน Chrome จะซ่อนแอปการชำระเงินบนเว็บ มิฉะนั้น Chrome จะมองหาแอปการชำระเงินบนเว็บด้วย

การเปิดแอปการชำระเงินบนเว็บ

คุณควรระบุแอปการชำระเงินบนเว็บในช่อง serviceworker ของไฟล์ Manifest ของเว็บแอป

[payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

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

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

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

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

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

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

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

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

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

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

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

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

สร้างแอปการชำระเงินบนเว็บ

เมื่อผู้ขายเรียกใช้ show() Chrome จะส่งเหตุการณ์ paymentrequest ไปยัง Service Worker เรียกใช้ openWindow() ภายใน respondWith() เพื่อแสดง UI การชำระเงิน จากนั้นแก้ไขด้วยการตอบกลับการชำระเงิน

ดู API แบบเต็มได้ที่ Web-Based Payment Handler API ใน MDN