วิธีเปลี่ยนแอปสำหรับการชำระเงินบนเว็บให้เป็น Web Payments และมอบประสบการณ์ใช้งานที่ดีขึ้นให้กับลูกค้า
เมื่อแอปการชำระเงินบนเว็บได้รับคำขอการชำระเงินและเริ่มทำธุรกรรมการชำระเงิน โปรแกรมทำงานของบริการจะทำหน้าที่เป็นศูนย์กลางสำหรับการสื่อสารระหว่างผู้ขายกับแอปการชำระเงิน โพสต์นี้อธิบายวิธีที่แอปการชำระเงินสามารถส่งข้อมูลเกี่ยวกับวิธีการชำระเงิน ที่อยู่สำหรับจัดส่ง หรือข้อมูลติดต่อไปยังผู้ขายโดยใช้โปรแกรมทำงานของบริการ
แจ้งผู้ขายให้ทราบถึงการเปลี่ยนวิธีการชำระเงิน
แอปการชำระเงินรองรับเครื่องมือการชำระเงินหลายแบบที่มีวิธีการชำระเงินแตกต่างกัน
ลูกค้า | วิธีการชำระเงิน | เครื่องมือการชำระเงิน |
---|---|---|
ก | ผู้ออกบัตรเครดิต 1 | ****1234 |
ผู้ออกบัตรเครดิต 1 | ****4242 |
|
ธนาคาร X | ******123 |
|
B | ผู้ออกบัตรเครดิต 2 | ****5678 |
ธนาคาร X | ******456 |
ตัวอย่างเช่น ในตารางด้านบน กระเป๋าเงินบนเว็บของลูกค้า ก มีบัตรเครดิต 2 ใบ และบัญชีธนาคาร 1 บัญชีลงทะเบียนอยู่ ในกรณีนี้ แอปมีวิธีการชำระเงิน 3 แบบ (****1234
, ****4242
, ******123
) และวิธีการชำระเงิน 2 วิธี (ผู้ออกบัตรเครดิต 1 และธนาคาร X) สำหรับธุรกรรมการชำระเงิน แอปการชำระเงินสามารถให้ลูกค้าเลือกเครื่องมือการชำระเงินอย่างใดอย่างหนึ่งและนำไปใช้เพื่อชำระเงินให้กับผู้ขาย
แอปการชำระเงินสามารถแจ้งให้ผู้ขายทราบว่าลูกค้าเลือกวิธีการชำระเงินใดก่อนที่จะส่งการตอบกลับการชำระเงินแบบเต็ม ซึ่งจะมีประโยชน์เมื่อผู้ขายต้องการใช้งานแคมเปญส่วนลดสำหรับแบรนด์ของวิธีการชำระเงินที่เจาะจง เป็นต้น
เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนวิธีการชำระเงิน" ไปยังผู้ขายผ่านโปรแกรมทำงานของบริการเพื่อแจ้งตัวระบุวิธีการชำระเงินใหม่ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changePaymentMethod()
ด้วยข้อมูลวิธีการชำระเงินใหม่
แอปการชำระเงินสามารถส่งออบเจ็กต์ methodDetails
เป็นอาร์กิวเมนต์ที่ 2 ที่ไม่บังคับสำหรับ PaymentRequestEvent.changePaymentMethod()
ได้ ออบเจ็กต์นี้อาจมีรายละเอียดวิธีการชำระเงินแบบกำหนดเองที่จำเป็นสำหรับผู้ขายในการประมวลผลเหตุการณ์การเปลี่ยนแปลง
[ตัวจัดการการชำระเงิน] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_METHOD_CHANGED':
const newMethod = e.data.paymentMethod;
const newDetails = e.data.methodDetails;
// Redact or check that no sensitive information is passed in
// `newDetails`.
// Notify the merchant of the payment method change
details =
await payment_request_event.changePaymentMethod(newMethod, newDetails);
…
เมื่อผู้ขายได้รับเหตุการณ์ paymentmethodchange
จาก Payment
Request API ผู้ขายจะอัปเดตรายละเอียดการชำระเงินและตอบกลับด้วยออบเจ็กต์ PaymentDetailsUpdate
ได้
[ผู้ขาย]
request.addEventListener('paymentmethodchange', e => {
if (e.methodName === 'another-pay') {
// Apply $10 discount for example.
const discount = {
label: 'special discount',
amount: {
currency: 'USD',
// The value being string complies the spec
value: '-10.00'
}
};
let total = 0;
details.displayItems.push(discount);
for (let item of details.displayItems) {
total += parseFloat(item.amount.value);
}
// Convert the number back to string
details.total.amount.value = total.toString();
}
// Pass a promise to `updateWith()` and send updated payment details
e.updateWith(details);
});
เมื่อผู้ขายตอบกลับ คำสัญญาที่ PaymentRequestEvent.changePaymentMethod()
ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate
[ตัวจัดการการชำระเงิน] service-worker.js
…
// Notify the merchant of the payment method change
details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต
แจ้งให้ผู้ขายทราบถึงการเปลี่ยนที่อยู่สำหรับจัดส่ง
แอปการชำระเงินสามารถระบุที่อยู่สำหรับจัดส่งของลูกค้าแก่ผู้ขายโดยเป็นส่วนหนึ่งของธุรกรรมการชำระเงิน
ซึ่งจะเป็นประโยชน์สำหรับผู้ขายเนื่องจากสามารถมอบสิทธิ์การเก็บรวบรวมที่อยู่ให้กับแอปการชำระเงิน และเนื่องจากข้อมูลที่อยู่จะระบุอยู่ในรูปแบบข้อมูลมาตรฐาน ผู้ขายจึงคาดหวังได้ว่าจะได้รับที่อยู่สำหรับจัดส่งในโครงสร้างที่สอดคล้องกัน
นอกจากนี้ ลูกค้ายังสามารถลงทะเบียนข้อมูลที่อยู่กับแอปการชำระเงินที่ต้องการ และนำข้อมูลนั้นมาใช้ซ้ำกับผู้ขายรายต่างๆ ได้
แอปการชำระเงินจะมี UI เพื่อแก้ไขที่อยู่สำหรับจัดส่งหรือเลือกข้อมูลที่อยู่ที่ลงทะเบียนล่วงหน้าในธุรกรรมการชำระเงินของลูกค้าได้ เมื่อมีการระบุที่อยู่สำหรับจัดส่งชั่วคราว แอปการชำระเงินสามารถแจ้งให้ผู้ขายทราบถึงข้อมูลที่อยู่ที่มีการปกปิด ซึ่งทำให้ผู้ขายได้รับ ประโยชน์หลายประการ เช่น
- ผู้ขายสามารถระบุได้ว่าลูกค้ามีคุณสมบัติตามข้อจำกัดระดับภูมิภาคในการจัดส่งสินค้าหรือไม่ (เช่น ภายในประเทศเท่านั้น)
- ผู้ขายสามารถเปลี่ยนรายการตัวเลือกการจัดส่งตามภูมิภาคของที่อยู่สำหรับจัดส่งได้ (เช่น การจัดส่งด่วนระหว่างประเทศหรือแบบด่วน)
- ผู้ขายใช้ค่าจัดส่งใหม่โดยอิงตามที่อยู่และอัปเดตราคารวมได้
เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงที่อยู่จัดส่ง" ไปให้ผู้ขายจากโปรแกรมทำงานของบริการเพื่อแจ้งที่อยู่สำหรับจัดส่งใหม่ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changeShippingAddress()
ด้วยออบเจ็กต์ที่อยู่ใหม่
[ตัวจัดการการชำระเงิน] service-worker.js
...
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_ADDRESS_CHANGED':
const newAddress = e.data.shippingAddress;
details =
await payment_request_event.changeShippingAddress(newAddress);
…
ผู้ขายจะได้รับเหตุการณ์ shippingaddresschange
จาก Payment
Request API เพื่อให้ตอบกลับด้วย PaymentDetailsUpdate
ที่อัปเดตใหม่
[ผู้ขาย]
request.addEventListener('shippingaddresschange', e => {
// Read the updated shipping address and update the request.
const addr = request.shippingAddress;
const details = getPaymentDetailsFromShippingAddress(addr);
// `updateWith()` sends back updated payment details
e.updateWith(details);
});
เมื่อผู้ขายตอบกลับ คำสัญญา PaymentRequestEvent.changeShippingAddress()
ที่ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate
[ตัวจัดการการชำระเงิน] service-worker.js
…
// Notify the merchant of the shipping address change
details = await payment_request_event.changeShippingAddress(newAddress);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต
แจ้งให้ผู้ขายทราบถึงการเปลี่ยนแปลงตัวเลือกการจัดส่ง
ตัวเลือกการจัดส่งคือวิธีการนำส่งที่ผู้ขายใช้ในการจัดส่งสินค้าที่ซื้อไปให้กับลูกค้า ตัวเลือกการจัดส่งทั่วไปมีดังนี้
- จัดส่งฟรี
- การจัดส่งด่วน
- การจัดส่งระหว่างประเทศ
- การจัดส่งระหว่างประเทศแบบพรีเมียม
แต่ละหลังมีค่าใช้จ่ายเฉพาะตัว ปกติแล้ววิธี/ตัวเลือกที่เร็วกว่าจะมีราคาสูงกว่า
ผู้ขายที่ใช้ Payment Request API สามารถมอบสิทธิ์นี้ให้แก่แอปการชำระเงิน ซึ่งแอปการชำระเงินจะใช้ข้อมูลดังกล่าวในการสร้าง UI และให้ ลูกค้าเลือกตัวเลือกการจัดส่งได้
รายการตัวเลือกการจัดส่งที่ระบุใน Payment Request API ของผู้ขาย
จะนำไปใช้กับ Service Worker ของแอปการชำระเงินเป็นพร็อพเพอร์ตี้ของ
PaymentRequestEvent
[ผู้ขาย]
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay',
data: { transactionId: '****' }
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
shippingOptions: [{
id: 'standard',
label: 'Standard',
amount: { value: '0.00', currency: 'USD' },
selected: true
}, {
id: 'express',
label: 'Express',
amount: { value: '5.00', currency: 'USD' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, { requestShipping: true });
แอปการชำระเงินสามารถแจ้งให้ผู้ขายทราบว่าลูกค้าเลือกตัวเลือกการจัดส่งใด ข้อมูลนี้สำคัญทั้งกับผู้ขายและลูกค้า เพราะการเปลี่ยนตัวเลือกการจัดส่งจะเปลี่ยนแปลงราคารวมด้วย ผู้ขายต้อง ทราบราคาล่าสุดสำหรับการยืนยันการชำระเงินในภายหลัง และลูกค้าจะต้องทราบถึงการเปลี่ยนแปลงด้วย
เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงตัวเลือกการจัดส่ง" จากโปรแกรมทำงานไปยังผู้ขายได้ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changeShippingOption()
ด้วยรหัสตัวเลือกการจัดส่งใหม่
[ตัวจัดการการชำระเงิน] service-worker.js
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'SHIPPING_OPTION_CHANGED':
const newOption = e.data.shippingOptionId;
details =
await payment_request_event.changeShippingOption(newOption);
…
ผู้ขายจะได้รับเหตุการณ์ shippingoptionchange
จาก Payment
Request API ผู้ขายควรใช้ข้อมูลดังกล่าวในการอัปเดตราคารวม และตอบกลับด้วย PaymentDetailsUpdate
ที่อัปเดต
[ผู้ขาย]
request.addEventListener('shippingoptionchange', e => {
// selected shipping option
const shippingOption = request.shippingOption;
const newTotal = {
currency: 'USD',
label: 'Total due',
value: calculateNewTotal(shippingOption),
};
// `updateWith()` sends back updated payment details
e.updateWith({ total: newTotal });
});
เมื่อผู้ขายตอบกลับ คำสัญญาที่ PaymentRequestEvent.changeShippingOption()
ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate
[ตัวจัดการการชำระเงิน] service-worker.js
…
// Notify the merchant of the shipping option change
details = await payment_request_event.changeShippingOption(newOption);
// Provided the new payment details,
// send a message back to the frontend to update the UI
postMessage('UPDATE_REQUEST', details);
break;
…
ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต
แสดงรายละเอียดการชำระเงินที่อัปเดต
เมื่อผู้ขายอัปเดตรายละเอียดการชำระเงินเสร็จแล้ว คำสัญญาที่ส่งกลับมาจาก .changePaymentMethod()
, .changeShippingAddress()
และ .changeShippingOption()
จะแก้ไขโดยใช้ออบเจ็กต์ PaymentRequestDetailsUpdate
ทั่วไป เครื่องจัดการการชำระเงินสามารถใช้ผลลัพธ์เพื่อแสดงราคารวมที่อัปเดตและตัวเลือกการจัดส่งไปยัง UI ได้
ผู้ขายอาจแสดงข้อผิดพลาดด้วยเหตุผลต่อไปนี้
- ระบบไม่ยอมรับวิธีการชำระเงิน
- ที่อยู่สำหรับจัดส่งอยู่นอกภูมิภาคที่รองรับ
- ที่อยู่สำหรับจัดส่งมีข้อมูลที่ไม่ถูกต้อง
- ไม่สามารถเลือกตัวเลือกการจัดส่งสำหรับที่อยู่สำหรับจัดส่งที่ระบุหรือด้วยเหตุผลอื่นๆ
ใช้พร็อพเพอร์ตี้ต่อไปนี้เพื่อแสดงสถานะข้อผิดพลาด
error
: สตริงข้อผิดพลาดที่มนุษย์อ่านได้ สตริงนี้แสดงต่อลูกค้าได้ดีที่สุดshippingAddressErrors
:AddressErrors
ออบเจ็กต์ที่มีสตริงข้อผิดพลาดโดยละเอียดต่อพร็อพเพอร์ตี้ที่อยู่ วิธีนี้มีประโยชน์หากคุณต้องการเปิดแบบฟอร์มที่ให้ลูกค้าแก้ไขที่อยู่ได้ และคุณต้องนำลูกค้าไปยังช่องที่ไม่ถูกต้องโดยตรงpaymentMethodErrors
: ออบเจ็กต์ข้อผิดพลาดเฉพาะสำหรับวิธีการชำระเงิน คุณสามารถขอให้ผู้ขายระบุข้อผิดพลาดที่มีโครงสร้างได้ แต่ผู้เขียนข้อกำหนดของการชำระเงินบนเว็บแนะนำให้เก็บสตริงที่เรียบง่ายไว้
รหัสตัวอย่าง
โค้ดตัวอย่างส่วนใหญ่ที่คุณเห็นในเอกสารฉบับนี้เป็นข้อความที่ตัดตอนมาจากแอปตัวอย่างที่ใช้งานได้ต่อไปนี้
https://paymenthandler-demo.glitch.me
โปรแกรมทำงานของบริการ [การชำระเงิน]
ฟรอนท์เอนด์ [ตัวจัดการการชำระเงิน]
โดยทำดังนี้
- ไปที่ https://paymentrequest-demo.glitch.me/
- ไปที่ด้านล่างสุดของหน้า
- กดเพิ่มปุ่มการชำระเงิน
- ป้อน
https://paymenthandler-demo.glitch.me
ลงในช่องตัวระบุวิธีการชำระเงิน - กดปุ่มชำระเงินถัดจากช่อง