วิธีการทำงานของ Payment Request API

ดูวิธีการทํางานของ Payment Request API ในระดับสูง

เมื่อลูกค้าพยายามซื้อบางอย่างจากเว็บไซต์ เว็บไซต์ต้องขอให้ลูกค้าระบุข้อมูลการชำระเงินและข้อมูลอื่นๆ (ไม่บังคับ) เช่น ความต้องการในการจัดส่ง ซึ่งทำได้ง่ายๆ และรวดเร็วโดยใช้ Payment Request API (PR API)

โครงสร้างพื้นฐาน

การสร้างออบเจ็กต์ PaymentRequest ต้องใช้พารามิเตอร์ 2 รายการ ได้แก่ payment methods และ payment details นอกจากนี้ คุณยังระบุพารามิเตอร์ตัวเลือกการชําระเงินที่ 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 รายการ) จะแสดงพร้อมกับจำนวนเงินทั้งหมดที่ต้องชำระ ไม่ว่าจะในกรณีใด ระบบจะระบุหน่วยสกุลเงินพร้อมกับจำนวนเงินแต่ละรายการ

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 แสดง

ถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับการชำระเงินผ่านเว็บ