ดูวิธีที่ผู้ขายผสานรวมแอปการชำระเงินและวิธีที่ธุรกรรมการชำระเงินทำงานร่วมกับ Payment Request API
Web Payments API เป็นฟีเจอร์การชำระเงินโดยเฉพาะที่มีมาในเบราว์เซอร์เป็นครั้งแรก เมื่อใช้การชำระเงินบนเว็บ การผสานรวมผู้ขายกับแอปการชำระเงินจะเป็นเรื่องง่ายขึ้นในขณะที่ลูกค้าได้รับประสบการณ์การใช้งานที่มีประสิทธิภาพและปลอดภัยมากขึ้น
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับประโยชน์ของการใช้การชำระเงินบนเว็บ โปรดดูการส่งเสริมแอปการชำระเงินด้วยการชำระเงินบนเว็บ
บทความนี้จะอธิบายเกี่ยวกับธุรกรรมการชำระเงินบนเว็บไซต์ของผู้ขาย และช่วยให้คุณเข้าใจวิธีการทำงานของการผสานรวมแอปการชำระเงิน
กระบวนการมี 6 ขั้นตอนดังนี้
- ผู้ขายเริ่มทำธุรกรรมการชำระเงิน
- ผู้ขายจะแสดงปุ่มการชำระเงิน
ลูกค้ากดปุ่มการชำระเงิน
เบราว์เซอร์เปิดแอปการชำระเงิน
หากลูกค้าเปลี่ยนแปลงรายละเอียดใดๆ (เช่น ตัวเลือกการจัดส่งหรือที่อยู่) ผู้ขายจะอัปเดตรายละเอียดธุรกรรมที่แสดงถึงการเปลี่ยนแปลงดังกล่าว
หลังจากที่ลูกค้ายืนยันการซื้อแล้ว ผู้ขายจะตรวจสอบการชำระเงินและทำธุรกรรมให้เสร็จสมบูรณ์
ขั้นตอนที่ 1: ผู้ขายเริ่มทำธุรกรรมการชำระเงิน
เมื่อลูกค้าตัดสินใจซื้อ ผู้ขายจะเริ่มธุรกรรมการชำระเงินโดยสร้างออบเจ็กต์ PaymentRequest
ออบเจ็กต์นี้มีข้อมูลสำคัญเกี่ยวกับธุรกรรม ดังนี้
- วิธีการชำระเงินที่ยอมรับได้และข้อมูลของวิธีการชำระเงินสำหรับดำเนินการธุรกรรม
- รายละเอียด เช่น ราคารวม (ต้องระบุ) และข้อมูลเกี่ยวกับสินค้า
- ตัวเลือกที่ผู้ขายสามารถขอข้อมูลการจัดส่ง เช่น ที่อยู่สำหรับจัดส่งและตัวเลือกการจัดส่ง
- นอกจากนี้ ผู้ขายยังขอที่อยู่สำหรับการเรียกเก็บเงิน ชื่อ อีเมล และหมายเลขโทรศัพท์ของผู้ชำระเงินได้ด้วย
- นอกจากนี้ ผู้ขายยังระบุประเภทการจัดส่งที่ไม่บังคับ (
shipping
,delivery
หรือpickup
) ไว้ในPaymentRequest
ได้อีกด้วย แอปการชำระเงินสามารถใช้ข้อมูลนี้เป็นคำแนะนำเพื่อแสดงป้ายกำกับที่ถูกต้องใน UI ของแอป
const request = new PaymentRequest([{
supportedMethods: 'https://bobpay.xyz/pay',
data: {
transactionId: '****'
}
}], {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
}, {
requestShipping: true,
requestBillingAddress: true,
requestPayerEmail: true,
requestPayerPhone: true,
requestPayerName: true,
shippingType: 'delivery'
});
เครื่องจัดการการชำระเงินบางรายอาจกำหนดให้ผู้ขายระบุรหัสธุรกรรมที่ออกไว้ล่วงหน้าเป็นส่วนหนึ่งของข้อมูลธุรกรรม การผสานรวมทั่วไปจะรวมถึงการสื่อสารระหว่างเซิร์ฟเวอร์ของผู้ขายและตัวแฮนเดิลการชำระเงินเพื่อจองราคารวม ซึ่งจะช่วยป้องกันไม่ให้ลูกค้าที่เป็นอันตรายชักจูงราคาและโกงผู้ขายด้วยการตรวจสอบความถูกต้องของธุรกรรม
ผู้ขายสามารถส่งรหัสธุรกรรมไปเป็นส่วนหนึ่งของพร็อพเพอร์ตี้ data
ของออบเจ็กต์ PaymentMethodData
ได้
ให้ข้อมูลธุรกรรมแล้ว เบราว์เซอร์จะผ่านขั้นตอนการค้นพบแอปการชำระเงินที่ระบุใน PaymentRequest
ตามตัวระบุวิธีการชำระเงิน ด้วยวิธีนี้ เบราว์เซอร์จะสามารถกำหนดแอปการชำระเงินที่จะเปิดทันทีที่ผู้ขายพร้อมทำธุรกรรม
หากต้องการเรียนรู้วิธีการทำงานของกระบวนการสำรวจโดยละเอียด ให้ไปที่การตั้งค่าวิธีการชำระเงิน
ขั้นตอนที่ 2: ผู้ขายแสดงปุ่มการชำระเงิน
ผู้ขายรองรับวิธีการชำระเงินได้หลายวิธี แต่ควรแสดงปุ่มการชำระเงินเฉพาะปุ่มที่ลูกค้าใช้ได้จริงเท่านั้น การแสดงปุ่มการชำระเงินที่ใช้งานไม่ได้ทำให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี หากผู้ขายคาดการณ์ได้ว่าวิธีการชำระเงินที่ระบุในออบเจ็กต์ PaymentRequest
ใช้ไม่ได้กับลูกค้า ลูกค้าอาจเสนอโซลูชันสำรองหรือไม่แสดงปุ่มนั้นเลยก็ได้
เมื่อใช้อินสแตนซ์ PaymentRequest
ผู้ขายสามารถตรวจสอบว่าลูกค้ามีแอปการชำระเงินให้ใช้งานหรือไม่
ลูกค้ามีแอปการชำระเงินให้ใช้ไหม
วิธีการ
canMakePayment()
ของ PaymentRequest
จะส่งคืน true
หากมีแอปการชำระเงินอยู่ในอุปกรณ์ของลูกค้า "พร้อมใช้งาน" หมายความว่าระบบจะพบแอปการชำระเงินที่รองรับวิธีการชำระเงิน และมีการติดตั้งแอปการชำระเงินเฉพาะแพลตฟอร์ม หรือแอปการชำระเงินบนเว็บพร้อมลงทะเบียน
const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
// Fallback to other means of payment or hide the button.
}
ขั้นตอนที่ 3: ลูกค้ากดปุ่มการชำระเงิน
เมื่อลูกค้ากดปุ่มการชำระเงิน ผู้ขายจะเรียกเมธอด show()
ของอินสแตนซ์ PaymentRequest
ซึ่งจะทริกเกอร์การเปิดตัว UI การชำระเงินทันที
ในกรณีที่มีการกำหนดราคารวมสุดท้ายแบบไดนามิก (เช่น ดึงจากเซิร์ฟเวอร์) ผู้ขายจะเลื่อนการเปิดตัว UI การชำระเงินออกไปจนกว่าจะทราบจำนวนเงินรวม
เลื่อนการเปิดตัว UI การชำระเงิน
ลองดูการสาธิตการเลื่อน UI การชำระเงินจนกว่าจะมีการกำหนดราคารวมสุดท้าย
ผู้ขายส่งคำสัญญาไปยังวิธีการชำระเงิน show()
เพื่อเลื่อน UI การชำระเงิน
เบราว์เซอร์จะแสดงสัญญาณบอกสถานะการโหลดจนกว่าเวลาที่สัญญาไว้จะได้รับการแก้ไข และธุรกรรมนั้นพร้อมที่จะเริ่มต้น
const getTotalAmount = async () => {
// Fetch the total amount from the server, etc.
};
try {
const result = await request.show(getTotalAmount());
// Process the result…
} catch(e) {
handleError(e);
}
หากไม่มีการระบุสัญญาเป็นอาร์กิวเมนต์สำหรับ show()
เบราว์เซอร์จะเปิด UI การชำระเงินทันที
ขั้นตอนที่ 4: เบราว์เซอร์เปิดแอปการชำระเงิน
เบราว์เซอร์สามารถเปิดแอปการชำระเงินเฉพาะแพลตฟอร์มหรือแอปการชำระเงินบนเว็บ (คุณสามารถดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Chrome กำหนดว่าจะเปิดแอปการชำระเงินใด)
โดยส่วนใหญ่แล้ว วิธีสร้างแอปสำหรับการชำระเงินจะขึ้นอยู่กับนักพัฒนาแอป แต่ทั้งนี้ เหตุการณ์ที่เกิดจากและถึงผู้ขาย ตลอดจนโครงสร้างของข้อมูลที่ส่งผ่านพร้อมกับเหตุการณ์เหล่านั้นจะเป็นมาตรฐาน
เมื่อเปิดแอปการชำระเงิน แอปจะได้รับข้อมูลธุรกรรมที่ส่งไปยังออบเจ็กต์ PaymentRequest
ในขั้นตอนที่ 1 ซึ่งรวมถึงข้อมูลต่อไปนี้
- ข้อมูลวิธีการชำระเงิน
- ราคารวม
- ตัวเลือกการชำระเงิน
แอปการชำระเงินจะใช้ข้อมูลธุรกรรมดังกล่าวเพื่อติดป้ายกำกับ UI
ขั้นตอนที่ 5: วิธีที่ผู้ขายอัปเดตรายละเอียดธุรกรรมตามการดำเนินการของลูกค้า
ลูกค้ามีตัวเลือกในการเปลี่ยนรายละเอียดธุรกรรม เช่น วิธีการชำระเงินและตัวเลือกการจัดส่งในแอปการชำระเงิน ขณะที่ลูกค้าทำการเปลี่ยนแปลง ผู้ขายจะได้รับเหตุการณ์การเปลี่ยนแปลงและอัปเดตรายละเอียดธุรกรรม
ผู้ขายรับเหตุการณ์ได้ 4 ประเภทดังนี้
- เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน
- เหตุการณ์การเปลี่ยนแปลงที่อยู่สำหรับจัดส่ง
- เหตุการณ์การเปลี่ยนแปลงตัวเลือกการจัดส่ง
- เหตุการณ์การตรวจสอบผู้ขาย
เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน
แอปการชำระเงินรองรับวิธีการชำระเงินหลายวิธี และผู้ขายอาจเสนอส่วนลดพิเศษโดยขึ้นอยู่กับการเลือกของลูกค้า เพื่อให้ครอบคลุม Use Case นี้ เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงินสามารถแจ้งให้ผู้ขายทราบถึงวิธีการชำระเงินใหม่ เพื่อให้ผู้ขายอัปเดตราคารวมที่มีส่วนลดและส่งกลับไปยังแอปการชำระเงินได้
request.addEventListener('paymentmethodchange', e => {
e.updateWith({
// Add discount etc.
});
});
เหตุการณ์การเปลี่ยนแปลงที่อยู่สำหรับจัดส่ง
แอปการชำระเงินสามารถระบุที่อยู่สำหรับจัดส่งของลูกค้าหรือไม่ก็ได้ ความสะดวกสำหรับลูกค้าเพราะไม่ต้องป้อนรายละเอียดใดๆ ลงในแบบฟอร์มด้วยตนเอง และสามารถจัดเก็บที่อยู่สำหรับจัดส่งไว้ในแอปการชำระเงินที่ต้องการ แทนที่จะเก็บไว้ในเว็บไซต์ผู้ขายหลายๆ เว็บไซต์
หากลูกค้าอัปเดตที่อยู่สำหรับจัดส่งในแอปการชำระเงินหลังจากที่เริ่มทำธุรกรรมแล้ว ระบบจะส่งเหตุการณ์ 'shippingaddresschange'
ไปยังผู้ขาย เหตุการณ์นี้จะช่วยผู้ขายในการกำหนดค่าจัดส่งตามที่อยู่ใหม่ อัปเดตราคารวม และส่งคืนไปยังแอปการชำระเงิน
request.addEventListener('shippingaddresschange', e => {
e.updateWith({
// Update the details
});
});
หากผู้ขายจัดส่งสินค้าไปยังที่อยู่ที่อัปเดตไม่ได้ ผู้ขายสามารถแสดงข้อความแสดงข้อผิดพลาดได้โดยเพิ่มพารามิเตอร์ข้อผิดพลาดลงในรายละเอียดธุรกรรมที่ส่งไปยังแอปการชำระเงิน
เหตุการณ์การเปลี่ยนแปลงตัวเลือกการจัดส่ง
ผู้ขายสามารถเสนอตัวเลือกการจัดส่งหลายรายการให้กับลูกค้าและมอบสิทธิ์ตัวเลือกดังกล่าวให้กับแอปการชำระเงินได้ ตัวเลือกการจัดส่งจะแสดงเป็นรายการราคาและชื่อบริการที่ลูกค้าสามารถเลือกได้ เช่น
- การจัดส่งแบบมาตรฐาน - ฟรี
- จัดส่งด่วน - 5 USD
เมื่อลูกค้าอัปเดตตัวเลือกการจัดส่งในแอปการชำระเงิน ระบบจะส่งเหตุการณ์ 'shippingoptionchange'
ไปยังผู้ขาย จากนั้นผู้ขายจะกำหนดค่าจัดส่ง อัปเดตราคารวม และส่งกลับไปยังแอปการชำระเงินได้
request.addEventListener('shippingoptionchange', e => {
e.updateWith({
// Update the details
});
});
ผู้ขายสามารถแก้ไขตัวเลือกการจัดส่งแบบไดนามิกตามที่อยู่จัดส่งของลูกค้าได้เช่นกัน ซึ่งจะเป็นประโยชน์เมื่อผู้ขายต้องการเสนอตัวเลือกการจัดส่งที่แตกต่างกันให้ลูกค้าภายในประเทศและต่างประเทศ
เหตุการณ์การตรวจสอบผู้ขาย
แอปการชำระเงินสามารถยืนยันผู้ขายก่อนดำเนินการตามขั้นตอนการชำระเงินเพื่อความปลอดภัยที่มากขึ้น การออกแบบกลไกการตรวจสอบจะขึ้นอยู่กับแอปการชำระเงิน แต่กิจกรรมการตรวจสอบผู้ขายจะทำหน้าที่แจ้งให้ผู้ขายทราบ URL ที่พวกเขาสามารถใช้เพื่อตรวจสอบตนเองได้
request.addEventListener('merchantvalidation', e => {
e.updateWith({
// Use `e.validateURL` to validate
});
});
ขั้นตอนที่ 6: ผู้ขายตรวจสอบการชำระเงินและทำธุรกรรมให้เสร็จสมบูรณ์
เมื่อลูกค้าอนุมัติการชำระเงินเรียบร้อยแล้ว เมธอด show()
จะแสดงสัญญาที่แปลงไปยัง PaymentResponse
ออบเจ็กต์ PaymentResponse
มีข้อมูลต่อไปนี้
- รายละเอียดผลการชำระเงิน
- ที่อยู่สำหรับจัดส่ง
- ตัวเลือกการจัดส่ง
- ข้อมูลติดต่อ
ในตอนนี้ UI ของเบราว์เซอร์อาจยังคงแสดงสัญญาณบอกสถานะการโหลด ซึ่งหมายความว่าธุรกรรมยังไม่เสร็จสมบูรณ์
หากแอปการชำระเงินสิ้นสุดลงเนื่องจากการชำระเงินไม่สำเร็จหรือเกิดข้อผิดพลาด สัญญาที่ส่งกลับมาจาก show()
จะปฏิเสธ และเบราว์เซอร์จะยุติธุรกรรมการชำระเงิน
การประมวลผลและตรวจสอบการชำระเงิน
details
ใน PaymentResponse
คือออบเจ็กต์ข้อมูลเข้าสู่ระบบการชำระเงินที่แสดงผลจากแอปการชำระเงิน ซึ่งผู้ขายจะใช้ข้อมูลเข้าสู่ระบบดังกล่าวในการประมวลผลหรือตรวจสอบการชำระเงินได้ วิธีการทำงานของกระบวนการที่สำคัญนี้จะขึ้นอยู่กับตัวแฮนเดิลการชำระเงิน
ทำธุรกรรมให้เสร็จสมบูรณ์หรือลองทำธุรกรรมอีกครั้ง
หลังจากที่ผู้ขายพิจารณาว่าธุรกรรมดังกล่าวสำเร็จหรือล้มเหลว ผู้ขายจะทำสิ่งใดได้
- เรียกใช้เมธอด
.complete()
เพื่อทำธุรกรรมให้เสร็จสมบูรณ์และปิดตัวบ่งชี้การโหลด - ให้ลูกค้าลองอีกครั้งโดยเรียกใช้เมธอด
retry()
async function doPaymentRequest() {
try {
const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await validateResponse(response);
} catch (err) {
// AbortError, SecurityError
console.error(err);
}
}
async function validateResponse(response) {
try {
const errors = await checkAllValuesAreGood(response);
if (errors.length) {
await response.retry(errors);
return validateResponse(response);
}
await response.complete("success");
} catch (err) {
// Something went wrong…
await response.complete("fail");
}
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();
ขั้นตอนถัดไป
- ดูวิธีประกาศตัวระบุวิธีการชำระเงินโดยละเอียดในการตั้งค่าวิธีการชำระเงิน
- เรียนรู้วิธีสร้างแอปการชำระเงินเฉพาะแพลตฟอร์มได้ในคู่มือสำหรับนักพัฒนาแอปการชำระเงิน Android
- เรียนรู้วิธีสร้างแอปการชำระเงินบนเว็บในคู่มือสำหรับนักพัฒนาแอปการชำระเงินบนเว็บ