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

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

API คำขอการชำระเงิน

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

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

การสร้างออบเจ็กต์ PaymentRequest ต้องใช้พารามิเตอร์ 2 ตัว ได้แก่ วิธีการชำระเงินและรายละเอียดการชำระเงิน นอกจากนี้ พารามิเตอร์ตัวเลือกการชำระเงินที่ 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 ที่จำเป็น ซึ่งระบุจำนวนเงินรวมที่ต้องชำระจากลูกค้า พารามิเตอร์นี้ยังสามารถ แสดงรายการที่ซื้อได้ด้วย

ในตัวอย่างด้านล่าง ระบบจะแสดงรายการการซื้อที่ไม่บังคับ (ในกรณีนี้มีเพียงสินค้าเดียว) เนื่องจากเป็นยอดรวมที่ต้องชำระ ในทั้งสองกรณี จะมีการระบุหน่วยสกุลเงิน พร้อมกับจำนวนเงินแต่ละรายการ

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' }
  }
};

ตรวจสอบว่าวิธีการชำระเงินพร้อมใช้งานหรือไม่

ก่อนเรียกใช้ขั้นตอนการชำระเงิน ผู้ขายสามารถตรวจสอบว่าผู้ใช้และสภาพแวดล้อมพร้อมสำหรับการชำระเงินหรือไม่

การเรียกใช้ canMakePayment() จะตรวจสอบว่าเบราว์เซอร์รองรับวิธีการชำระเงินอย่างน้อย 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 แสดงผล

ถัดไป

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