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

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

Eiji Kitamura

Milica Mihajlija

Web Payments API เป็นฟีเจอร์การชำระเงินเฉพาะที่ฝังอยู่ในเบราว์เซอร์เป็นครั้งแรก 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'
});

รวมถึงรหัสธุรกรรม

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

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

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

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 การชำระเงินทันที

หมายเหตุ: หากตัวแฮนเดิลการชำระเงินออกแบบมาเพื่อแสดงผลรหัสธุรกรรมเมื่อตั้งค่าราคารวม คุณสามารถส่งรหัสเป็นส่วนหนึ่งของผลลัพธ์ของ Promise ได้

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

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

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

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

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

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

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