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

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

Eiji Kitamura

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

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

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

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

request.show().then(response => {
  // [process payment]
  // send to a PSP etc.
  response.complete('success');
});

หน้าตาของอินเทอร์เฟซผู้ใช้ของแอปการชำระเงินขึ้นอยู่กับแอปการชำระเงินทั้งหมด หลังจากที่ลูกค้าตกลงที่จะชำระเงิน ระบบจะส่งออบเจ็กต์ JSON ให้แก่ผู้ขายซึ่งมีข้อมูลที่จำเป็นทั้งหมดในการโอนเงิน จากนั้นผู้ขายจะส่งเงินจำนวนดังกล่าวไปยัง PSP เพื่อประมวลผลการชำระเงิน

ท้ายที่สุด คุณสามารถปิด UI คำขอการชำระเงิน โดยดำเนินการตามกระบวนการให้เสร็จสมบูรณ์ด้วย response.complete('success') หรือ response.complete('fail') ขึ้นอยู่กับ ผลลัพธ์ที่ PSP แสดงผล

รายการถัดไป

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