ระยะเวลาของธุรกรรมการชำระเงิน

ดูวิธีที่ผู้ขายผสานรวมแอปการชำระเงินและวิธีการทำงานของธุรกรรมการชำระเงิน ด้วย Payment Request API

Eiji Kitamura
Milica Mihajlija

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับประโยชน์ของการใช้ Web Payments โปรดดูที่การเพิ่มประสิทธิภาพ แอปการชำระเงินด้วย Web Payments

บทความนี้จะอธิบายธุรกรรมการชำระเงินในเว็บไซต์ของผู้ขายและ ช่วยให้คุณเข้าใจวิธีการทำงานของการผสานรวมแอปการชำระเงิน

กระบวนการนี้ประกอบด้วย 6 ขั้นตอน ดังนี้

  1. ผู้ขายเริ่มทำธุรกรรมการชำระเงิน
  2. ผู้ขายแสดงปุ่มการชำระเงิน

  3. ลูกค้ากดปุ่มชำระเงิน

    แผนภาพเว็บไซต์ร้านขายชีสที่มีปุ่ม BobPay (แอปชำระเงิน)

  4. เบราว์เซอร์จะเปิดแอปการชำระเงิน

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

  5. ในกรณีที่ลูกค้าเปลี่ยนแปลงรายละเอียดใดๆ (เช่น ตัวเลือกการจัดส่ง ที่อยู่) ผู้ขายจะอัปเดตรายละเอียดธุรกรรมที่แสดงการเปลี่ยนแปลง

    แผนภาพแสดงลูกค้ากำลังเลือกตัวเลือกการจัดส่งอื่นในแอป BobPay แผนภาพที่ 2 แสดงผู้ขายกำลังอัปเดตค่าใช้จ่ายทั้งหมดที่แสดงใน BobPay

  6. หลังจากที่ลูกค้ายืนยันการซื้อ ผู้ขายจะตรวจสอบการชำระเงิน และทำธุรกรรมให้เสร็จสมบูรณ์

    แผนภาพแสดงลูกค้าที่กำลังกด

ขั้นตอนที่ 1: ผู้ขายเริ่มธุรกรรมการชำระเงิน

เมื่อลูกค้าตัดสินใจซื้อ ผู้ขายจะเป็นผู้เริ่มการชำระเงิน โดยการสร้าง PaymentRequest ออบเจ็กต์ ออบเจ็กต์นี้มีข้อมูลสำคัญเกี่ยวกับธุรกรรม ดังนี้

  • วิธีการชำระเงินที่ยอมรับและข้อมูลวิธีการชำระเงินเพื่อประมวลผลธุรกรรม
  • รายละเอียด เช่น ราคารวม (ต้องระบุ) และข้อมูลเกี่ยวกับสินค้า
  • ตัวเลือกที่ผู้ขายจะขอข้อมูลการจัดส่งได้ เช่น การจัดส่ง ที่อยู่และตัวเลือกการจัดส่ง
  • นอกจากนี้ ผู้ขายยังขอที่อยู่สำหรับการเรียกเก็บเงิน ชื่อผู้ชำระเงิน อีเมล และ หมายเลขโทรศัพท์
  • นอกจากนี้ ผู้ขายยังระบุการจัดส่งที่ไม่บังคับได้ด้วย ประเภท (shipping, delivery หรือ pickup) ใน PaymentRequest แอปการชำระเงิน สามารถใช้ข้อมูลดังกล่าวเป็นคำแนะนำในการแสดงป้ายกำกับที่ถูกต้องใน UI ได้
const request = new PaymentRequest([{
  supportedMethods: 'https://bobpay.xyz/pay',
  data: {
    transactionId: '****'
  }
}], {
  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' }
  }
}, {
  requestShipping: true,
  requestBillingAddress: true,
  requestPayerEmail: true,
  requestPayerPhone: true,
  requestPayerName: true,
  shippingType: 'delivery'
});
รวมรหัสธุรกรรม

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

ผู้ขายสามารถส่งรหัสธุรกรรมเป็นส่วนหนึ่งของ PaymentMethodData data ของออบเจ็กต์

ให้ข้อมูลธุรกรรมแล้ว เบราว์เซอร์จะดำเนินการค้นพบ กระบวนการของแอปชำระเงินที่ระบุในPaymentRequest โดยอิงตามการชำระเงิน ตัวระบุเมธอด ด้วยวิธีนี้ เบราว์เซอร์จะสามารถกำหนดแอปการชำระเงินที่จะ เปิดใช้ทันทีที่ผู้ขายพร้อมทำธุรกรรม

หากต้องการเรียนรู้เกี่ยวกับวิธีการทำงานของกระบวนการค้นหาโดยละเอียด โปรดดูการตั้งค่า การชำระเงิน

ขั้นตอนที่ 2: ผู้ขายแสดงปุ่มการชำระเงิน

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

เมื่อใช้อินสแตนซ์ PaymentRequest ผู้ขายจะสอบถามว่าลูกค้ามี แอปการชำระเงินที่พร้อมใช้งาน

ลูกค้ามีแอปการชำระเงินที่พร้อมใช้งานหรือไม่

canMakePayment() วิธี PaymentRequest แสดงผล true หากมีแอปการชำระเงินให้บริการใน อุปกรณ์ของลูกค้า "พร้อมใช้งาน" หมายความว่าแอปการชำระเงินที่รองรับ พบวิธีการชำระเงินและมีการติดตั้งแอปการชำระเงินเฉพาะแพลตฟอร์มแล้ว หรือ แอปการชำระเงินบนเว็บพร้อมที่จะ ลงทะเบียนแล้ว

const canMakePayment = await request.canMakePayment();
if (!canMakePayment) {
  // Fallback to other means of payment or hide the button.
}

ขั้นตอนที่ 3: ลูกค้ากดปุ่มการชำระเงิน

เมื่อลูกค้ากดปุ่มการชำระเงิน ผู้ขายจะโทรหา show() ของอินสแตนซ์ PaymentRequest ซึ่งจะทริกเกอร์การเปิดตัวทันที UI การชำระเงิน

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

เลื่อนการเปิดตัว UI การชำระเงิน

ดูตัวอย่างการเลื่อนการชำระเงิน UI จนกว่าราคารวมสุดท้ายจะเท่ากับ กำหนดไว้

หากต้องการเลื่อน UI การชำระเงิน ผู้ขายจะต้องส่งสัญญาไปยังเมธอด show() เบราว์เซอร์จะแสดงสัญญาณบอกสถานะการโหลดจนกว่าสัญญาจะได้รับการแก้ไข และ ธุรกรรมพร้อมที่จะเริ่มต้นแล้ว

const getTotalAmount = async () => {
  // Fetch the total amount from the server, etc.
};

try {
  const result = await request.show(getTotalAmount());
  // Process the result…
} catch(e) {
  handleError(e);
}

ถ้าไม่มีการระบุค่าเป็นอาร์กิวเมนต์สำหรับ show() เบราว์เซอร์จะ เปิดใช้ UI การชำระเงินทันที

ขั้นตอนที่ 4: เบราว์เซอร์จะเปิดแอปการชำระเงิน

เบราว์เซอร์สามารถเปิดแอปการชำระเงินเฉพาะแพลตฟอร์มหรือแอปการชำระเงินบนเว็บ (คุณสามารถดูข้อมูลเพิ่มเติม เกี่ยวกับวิธีที่ Chrome กําหนดแอปการชําระเงินที่จะ เปิด)

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

เมื่อแอปการชำระเงินเปิดขึ้น แอปจะได้รับธุรกรรม ข้อมูล ผ่านไปยังออบเจ็กต์ PaymentRequest ในขั้นตอนที่ 1 ดังต่อไปนี้

  • ข้อมูลวิธีการชำระเงิน
  • ราคารวม
  • ตัวเลือกการชำระเงิน

แอปการชำระเงินใช้ข้อมูลธุรกรรมในการติดป้ายกำกับ UI

ขั้นตอนที่ 5: วิธีที่ผู้ขายอัปเดตรายละเอียดธุรกรรมตามการกระทำของลูกค้า

ลูกค้ามีตัวเลือกในการเปลี่ยนแปลงรายละเอียดธุรกรรม เช่น การชำระเงิน วิธีการจัดส่งและตัวเลือกการจัดส่ง ในแอปการชำระเงิน ขณะที่ลูกค้าทำการเปลี่ยนแปลง ผู้ขายจะได้รับเหตุการณ์การเปลี่ยนแปลงและอัปเดตรายละเอียดธุรกรรม

ผู้ขายจะรับเหตุการณ์ได้ 4 ประเภทดังนี้

  • เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน
  • เหตุการณ์การเปลี่ยนที่อยู่สำหรับจัดส่ง
  • เหตุการณ์การเปลี่ยนตัวเลือกการจัดส่ง
  • เหตุการณ์การตรวจสอบผู้ขาย

เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงิน

แอปการชำระเงินรองรับวิธีการชำระเงินหลายวิธี และผู้ขายอาจเสนอ ส่วนลดพิเศษตามการเลือกของลูกค้า เพื่อให้ครอบคลุมกรณีการใช้งานนี้ เหตุการณ์การเปลี่ยนแปลงวิธีการชำระเงินสามารถแจ้งผู้ขายเกี่ยวกับการชำระเงินใหม่ได้ เพื่อที่ลูกค้าจะอัปเดตราคารวมที่มีส่วนลดและส่งคืนได้ กลับไปที่แอปการชำระเงิน

request.addEventListener('paymentmethodchange', e => {
  e.updateWith({
    // Add discount etc.
  });
});

เหตุการณ์การเปลี่ยนที่อยู่สำหรับจัดส่ง

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

หากลูกค้าอัปเดตที่อยู่สำหรับจัดส่งในแอปการชำระเงินหลังจากวันที่ เริ่มต้นธุรกรรมแล้ว ระบบจะส่งเหตุการณ์ 'shippingaddresschange' ไปยังผู้ขาย เหตุการณ์นี้ช่วยให้ผู้ขายกำหนดค่าจัดส่งได้ตาม ในที่อยู่ใหม่ อัปเดตราคารวม แล้วส่งคืนไปยังแอปการชำระเงิน

request.addEventListener('shippingaddresschange', e => {
  e.updateWith({
    // Update the details
  });
});

ผู้ขายอาจแสดงข้อผิดพลาดได้หากผู้ขายจัดส่งไปยังที่อยู่ที่อัปเดตไม่ได้ ด้วยการเพิ่มพารามิเตอร์ข้อผิดพลาดลงในรายละเอียดธุรกรรมที่ส่งคืนไปยัง แอปการชำระเงิน

เหตุการณ์การเปลี่ยนตัวเลือกการจัดส่ง

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

  • การจัดส่งแบบมาตรฐาน - ฟรี
  • การจัดส่งด่วน - 5 USD

เมื่อลูกค้าอัปเดตตัวเลือกการจัดส่งในแอปการชำระเงิน ระบบจะดำเนินการ ระบบจะส่งเหตุการณ์ 'shippingoptionchange' รายการไปยังผู้ขาย ผู้ขายสามารถ จากนั้นให้กำหนดค่าจัดส่ง อัปเดตราคารวม แล้วส่งกลับไปยัง แอปการชำระเงิน

request.addEventListener('shippingoptionchange', e => {
  e.updateWith({
    // Update the details
  });
});

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

เหตุการณ์การตรวจสอบผู้ขาย

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

request.addEventListener('merchantvalidation', e => {
  e.updateWith({
    // Use `e.validateURL` to validate
  });
});

ขั้นตอนที่ 6: ผู้ขายตรวจสอบการชำระเงินและทำธุรกรรมให้เสร็จสมบูรณ์

เมื่อลูกค้าอนุมัติการชำระเงินเรียบร้อยแล้ว วิธีshow() จะแสดงคำมั่นสัญญาที่แก้ไข PaymentResponse ออบเจ็กต์ PaymentResponse มีข้อมูลต่อไปนี้

  • รายละเอียดผลลัพธ์การชำระเงิน
  • ที่อยู่สำหรับจัดส่ง
  • ตัวเลือกการจัดส่ง
  • ข้อมูลติดต่อ

ณ จุดนี้ UI ของเบราว์เซอร์อาจยังคงแสดงสัญญาณบอกสถานะการโหลด ซึ่งหมายความว่า ธุรกรรมยังไม่เสร็จสมบูรณ์

หากแอปการชำระเงินสิ้นสุดลงเนื่องจากการชำระเงินล้มเหลวหรือข้อผิดพลาด สัญญาที่ส่งคืนจาก show() ถูกปฏิเสธ และเบราว์เซอร์จะสิ้นสุดการชำระเงิน ธุรกรรม

การประมวลผลและการตรวจสอบการชำระเงิน

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

การดำเนินการหรือทำธุรกรรมอีกครั้ง

หลังจากที่ผู้ขายพิจารณาว่าธุรกรรมเสร็จสมบูรณ์หรือล้มเหลว พวกเขาสามารถทำอย่างใดอย่างหนึ่งต่อไปนี้

  • เรียกใช้เมธอด .complete() เพื่อทำธุรกรรมให้เสร็จสมบูรณ์และปิด สัญญาณบอกสถานะการโหลด
  • ให้ลูกค้าลองอีกครั้งโดยเรียกใช้เมธอด retry()
async function doPaymentRequest() {
  try {
    const request = new PaymentRequest(methodData, details, options);
    const response = await request.show();
    await validateResponse(response);
  } catch (err) {
    // AbortError, SecurityError
    console.error(err);
  }
}

async function validateResponse(response) {
  try {
    const errors = await checkAllValuesAreGood(response);
    if (errors.length) {
      await response.retry(errors);
      return validateResponse(response);
    }
    await response.complete("success");
  } catch (err) {
    // Something went wrong…
    await response.complete("fail");
  }
}
// Must be called as a result of a click
// or some explicit user action.
doPaymentRequest();

ขั้นตอนถัดไป