เรียนรู้วิธีการทำงานของ Payment Request API ในระดับสูง
API คำขอการชำระเงิน
เมื่อลูกค้าพยายามซื้อสินค้าจากเว็บไซต์ เว็บไซต์ต้องขอให้ลูกค้าระบุข้อมูลการชำระเงิน รวมถึงข้อมูลอื่นๆ เช่น ค่ากำหนดการจัดส่ง (ไม่บังคับ) ซึ่งทำได้อย่างง่ายดายและรวดเร็วโดยใช้ Payment Request API (PR API)
โครงสร้างพื้นฐาน
การสร้างออบเจ็กต์ PaymentRequest
ต้องใช้พารามิเตอร์ 2 ตัว ได้แก่ วิธีการชำระเงินและรายละเอียดการชำระเงิน นอกจากนี้ คุณจะใช้พารามิเตอร์ payment options ที่ 3 หรือไม่ก็ได้ คำขอพื้นฐานอาจมีลักษณะดังนี้
const request = new PaymentRequest(paymentMethods, paymentDetails);
มาดูวิธีสร้างและใช้งานพารามิเตอร์แต่ละรายการกัน
วิธีการชำระเงิน
พารามิเตอร์แรก paymentMethods คือรายการวิธีการชำระเงินที่รองรับในตัวแปรอาร์เรย์ องค์ประกอบแต่ละรายการในอาร์เรย์ประกอบด้วย 2 คอมโพเนนต์ ได้แก่ supportedMethods
และ data
(ไม่บังคับ)
สำหรับ supportedMethods
ผู้ขายต้องระบุตัวระบุวิธีการชำระเงิน เช่น https://bobbucks.dev/pay
การมีอยู่และเนื้อหาของ data
ขึ้นอยู่กับเนื้อหาของ supportedMethods
และการออกแบบของผู้ให้บริการแอปการชำระเงิน
ข้อมูลทั้ง 2 อย่างนี้ควรมาจากผู้ให้บริการแอปการชำระเงิน
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
รายละเอียดการชำระเงิน
ระบบจะส่งพารามิเตอร์ที่ 2 ซึ่งก็คือ paymentDetails เป็นออบเจ็กต์และระบุรายละเอียดการชำระเงินสำหรับธุรกรรม ซึ่งมีค่า total
ที่จำเป็น ซึ่งระบุจำนวนเงินทั้งหมดที่ต้องชำระจากลูกค้า พารามิเตอร์นี้ยังสามารถ
แสดงรายการที่ซื้อได้ด้วย
ในตัวอย่างด้านล่าง ลิสต์รายการที่ซื้อหรือไม่ก็ได้ (ในกรณีนี้คือสินค้า 1 รายการ) จะแสดงขึ้น ตามจำนวนเงินรวมที่ต้องชำระ ในทั้ง 2 กรณี หน่วยสกุลเงินจะระบุด้วยจำนวนเงินแต่ละรายการ
const paymentDetails = {
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' }
}
};
ตรวจสอบว่าวิธีการชำระเงินพร้อมให้บริการหรือไม่
Chrome จะตรวจสอบว่าผู้ใช้และสภาพแวดล้อมพร้อมสำหรับการชำระเงินหรือไม่ในระหว่างการสร้างออบเจ็กต์ PaymentRequest
หากต้องการตรวจสอบว่าผู้ใช้และสภาพแวดล้อมพร้อมชำระเงินหรือไม่ โปรดโทรหา canMakePayment()
ก่อนเรียกใช้กระบวนการชำระเงิน การเรียกใช้ canMakePayment()
จะแสดงผล true
หากเบราว์เซอร์รองรับวิธีการชำระเงินอย่างน้อย 1 วิธีที่ระบุในออบเจ็กต์
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
ดูข้อมูลเพิ่มเติมเกี่ยวกับ PaymentRequest.canMakePayment() ใน MDN
เมธอด show()
หลังจากตั้งค่าพารามิเตอร์ 2 รายการและสร้างออบเจ็กต์ request
ดังที่แสดงด้านบนแล้ว คุณจะเรียกใช้เมธอด show()
ได้ ซึ่งจะแสดงอินเทอร์เฟซผู้ใช้ของแอปการชำระเงิน
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
หน้าตาของอินเทอร์เฟซผู้ใช้ของแอปการชำระเงินจะขึ้นอยู่กับผู้ให้บริการแอปการชำระเงินนั้นๆ หลังจากที่ลูกค้าตกลงที่จะชำระเงินแล้ว ระบบจะส่งออบเจ็กต์ JSON ไปยังผู้ขายซึ่งมีข้อมูลที่จำเป็นทั้งหมดในการโอนเงิน จากนั้นผู้ขายจะส่งเงินจำนวนดังกล่าวไปยัง PSP เพื่อประมวลผลการชำระเงิน
สุดท้าย คุณอาจปิด UI คำขอการชำระเงินโดยดำเนินการด้วย response.complete('success')
หรือ response.complete('fail')
ให้เสร็จสมบูรณ์ ทั้งนี้ขึ้นอยู่กับผลลัพธ์ที่ PSP แสดงผล
รายการถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับการชำระเงินผ่านเว็บ