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

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

Eiji Kitamura

Milica Mihajlija

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

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

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

กระบวนการมี 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'
});

การใส่รหัสธุรกรรม

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

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

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

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

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 ประเภทดังนี้

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

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

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

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

หมายเหตุ: มีเพียง Apple Safari เท่านั้นที่จะรองรับกิจกรรมการตรวจสอบผู้ขายได้ เบราว์เซอร์แบบ Chromium ยังไม่ได้ใช้กิจกรรมนี้ตั้งแต่เดือนพฤษภาคม 2020

ขั้นตอนที่ 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();

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

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