ภาพรวม Payment Request API

Eiji Kitamura

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

ถัดไป

ดูข้อมูลเพิ่มเติมเกี่ยวกับ Web Payments