วงจรชีวิตของธุรกรรมการชำระเงิน

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

Eiji Kitamura

Milica Mihajlija

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

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

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

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

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

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

   

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

   

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

   

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

เมื่อได้รับข้อมูลธุรกรรมแล้ว เบราว์เซอร์จะเข้าสู่กระบวนการค้นหาแอปการชำระเงินที่ระบุไว้ใน 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 การชำระเงิน ผู้ขายจะส่ง Promise ไปยังเมธอด 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);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เมื่อลูกค้าอนุมัติการชำระเงินเรียบร้อยแล้ว เมธอด show() จะแสดงผลเป็น Promise ที่แปลงเป็น 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();

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

• ดูวิธีประกาศตัวระบุวิธีการชำระเงินโดยละเอียดได้ในการตั้งค่าวิธีการชำระเงิน
• ดูวิธีสร้างแอปการชำระเงินเฉพาะแพลตฟอร์มได้ในคู่มือสำหรับนักพัฒนาแอปการชำระเงินของ Android
• ดูวิธีสร้างแอปการชำระเงินบนเว็บได้ในคู่มือนักพัฒนาแอปการชำระเงินบนเว็บ