การจัดการข้อมูลการชำระเงินที่ไม่บังคับด้วย Service Worker

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

Eiji Kitamura

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

การจัดการข้อมูลการชำระเงินที่ไม่บังคับกับ Service Worker
การจัดการข้อมูลการชำระเงินที่ไม่บังคับกับ Service Worker

แจ้งผู้ขายให้ทราบถึงการเปลี่ยนวิธีการชำระเงิน

แอปการชำระเงินรองรับเครื่องมือการชำระเงินหลายแบบที่มีวิธีการชำระเงินแตกต่างกัน

ลูกค้า วิธีการชำระเงิน เครื่องมือการชำระเงิน
ก ผู้ออกบัตรเครดิต 1 ****1234
ผู้ออกบัตรเครดิต 1 ****4242
ธนาคาร X ******123
B ผู้ออกบัตรเครดิต 2 ****5678
ธนาคาร X ******456

ตัวอย่างเช่น ในตารางด้านบน กระเป๋าเงินบนเว็บของลูกค้า ก มีบัตรเครดิต 2 ใบ และบัญชีธนาคาร 1 บัญชีลงทะเบียนอยู่ ในกรณีนี้ แอปมีวิธีการชำระเงิน 3 แบบ (****1234, ****4242, ******123) และวิธีการชำระเงิน 2 วิธี (ผู้ออกบัตรเครดิต 1 และธนาคาร X) สำหรับธุรกรรมการชำระเงิน แอปการชำระเงินสามารถให้ลูกค้าเลือกเครื่องมือการชำระเงินอย่างใดอย่างหนึ่งและนำไปใช้เพื่อชำระเงินให้กับผู้ขาย

UI ตัวเลือกวิธีการชำระเงิน
UI ตัวเลือกวิธีการชำระเงิน

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

เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนวิธีการชำระเงิน" ไปยังผู้ขายผ่านโปรแกรมทำงานของบริการเพื่อแจ้งตัวระบุวิธีการชำระเงินใหม่ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changePaymentMethod() ด้วยข้อมูลวิธีการชำระเงินใหม่

แจ้งผู้ขายให้ทราบถึงการเปลี่ยนวิธีการชำระเงิน
แจ้งผู้ขายเกี่ยวกับการเปลี่ยนแปลงวิธีการชำระเงิน

แอปการชำระเงินสามารถส่งออบเจ็กต์ methodDetails เป็นอาร์กิวเมนต์ที่ 2 ที่ไม่บังคับสำหรับ PaymentRequestEvent.changePaymentMethod() ได้ ออบเจ็กต์นี้อาจมีรายละเอียดวิธีการชำระเงินแบบกำหนดเองที่จำเป็นสำหรับผู้ขายในการประมวลผลเหตุการณ์การเปลี่ยนแปลง

[ตัวจัดการการชำระเงิน] service-worker.js 

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'PAYMENT_METHOD_CHANGED':
        const newMethod = e.data.paymentMethod;
        const newDetails = e.data.methodDetails;
        // Redact or check that no sensitive information is passed in
        // `newDetails`.
        // Notify the merchant of the payment method change
        details =
          await payment_request_event.changePaymentMethod(newMethod, newDetails);
      …

เมื่อผู้ขายได้รับเหตุการณ์ paymentmethodchange จาก Payment Request API ผู้ขายจะอัปเดตรายละเอียดการชำระเงินและตอบกลับด้วยออบเจ็กต์ PaymentDetailsUpdate ได้

[ผู้ขาย] 

request.addEventListener('paymentmethodchange', e => {
  if (e.methodName === 'another-pay') {
    // Apply $10 discount for example.
    const discount = {
      label: 'special discount',
      amount: {
        currency: 'USD',
        // The value being string complies the spec
        value: '-10.00'
      }
    };
    let total = 0;
    details.displayItems.push(discount);
    for (let item of details.displayItems) {
     total += parseFloat(item.amount.value);
    }
    // Convert the number back to string
    details.total.amount.value = total.toString();
  }
  // Pass a promise to `updateWith()` and send updated payment details
  e.updateWith(details);
});

เมื่อผู้ขายตอบกลับ คำสัญญาที่ PaymentRequestEvent.changePaymentMethod() ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate

[ตัวจัดการการชำระเงิน] service-worker.js 

…
        // Notify the merchant of the payment method change
        details = await payment_request_event.changePaymentMethod(newMethod, newDetails);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต

แจ้งให้ผู้ขายทราบถึงการเปลี่ยนที่อยู่สำหรับจัดส่ง

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

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

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

UI เครื่องมือเลือกที่อยู่สำหรับจัดส่ง
UI เครื่องมือเลือกที่อยู่สำหรับจัดส่ง

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

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

เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงที่อยู่จัดส่ง" ไปให้ผู้ขายจากโปรแกรมทำงานของบริการเพื่อแจ้งที่อยู่สำหรับจัดส่งใหม่ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changeShippingAddress() ด้วยออบเจ็กต์ที่อยู่ใหม่

แจ้งให้ผู้ขายทราบถึงการเปลี่ยนที่อยู่สำหรับจัดส่ง
แจ้งผู้ขายเกี่ยวกับการเปลี่ยนที่อยู่สำหรับจัดส่ง

[ตัวจัดการการชำระเงิน] service-worker.js 

...
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_ADDRESS_CHANGED':
        const newAddress = e.data.shippingAddress;
        details =
          await payment_request_event.changeShippingAddress(newAddress);
      …

ผู้ขายจะได้รับเหตุการณ์ shippingaddresschange จาก Payment Request API เพื่อให้ตอบกลับด้วย PaymentDetailsUpdate ที่อัปเดตใหม่

[ผู้ขาย] 

request.addEventListener('shippingaddresschange', e => {
  // Read the updated shipping address and update the request.
  const addr = request.shippingAddress;
  const details = getPaymentDetailsFromShippingAddress(addr);
  // `updateWith()` sends back updated payment details
  e.updateWith(details);
});

เมื่อผู้ขายตอบกลับ คำสัญญา PaymentRequestEvent.changeShippingAddress() ที่ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate

[ตัวจัดการการชำระเงิน] service-worker.js 

…
        // Notify the merchant of the shipping address change
        details = await payment_request_event.changeShippingAddress(newAddress);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต

แจ้งให้ผู้ขายทราบถึงการเปลี่ยนแปลงตัวเลือกการจัดส่ง

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

  • จัดส่งฟรี
  • การจัดส่งด่วน
  • การจัดส่งระหว่างประเทศ
  • การจัดส่งระหว่างประเทศแบบพรีเมียม

แต่ละหลังมีค่าใช้จ่ายเฉพาะตัว ปกติแล้ววิธี/ตัวเลือกที่เร็วกว่าจะมีราคาสูงกว่า

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

UI ตัวเลือกการจัดส่ง
UI ตัวเลือกการจัดส่ง

รายการตัวเลือกการจัดส่งที่ระบุใน Payment Request API ของผู้ขาย จะนำไปใช้กับ Service Worker ของแอปการชำระเงินเป็นพร็อพเพอร์ตี้ของ PaymentRequestEvent

[ผู้ขาย] 

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay',
  data: { transactionId: '****' }
}], {
  displayItems: [{
    label: 'Anvil L/S Crew Neck - Grey M x1',
    amount: { currency: 'USD', value: '22.15' }
  }],
  shippingOptions: [{
    id: 'standard',
    label: 'Standard',
    amount: { value: '0.00', currency: 'USD' },
    selected: true
  }, {
    id: 'express',
    label: 'Express',
    amount: { value: '5.00', currency: 'USD' }
  }],
  total: {
    label: 'Total due',
    amount: { currency: 'USD', value : '22.15' }
  }
}, {  requestShipping: true });

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

เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงตัวเลือกการจัดส่ง" จากโปรแกรมทำงานไปยังผู้ขายได้ โปรแกรมทำงานของบริการควรเรียกใช้ PaymentRequestEvent.changeShippingOption() ด้วยรหัสตัวเลือกการจัดส่งใหม่

แจ้งให้ผู้ขายทราบถึงการเปลี่ยนแปลงตัวเลือกการจัดส่ง
แจ้งผู้ขายเกี่ยวกับการเปลี่ยนแปลงตัวเลือกการจัดส่ง

[ตัวจัดการการชำระเงิน] service-worker.js 

…
// Received a message from the frontend
self.addEventListener('message', async e => {
  let details;
  try {
    switch (e.data.type) {
      …
      case 'SHIPPING_OPTION_CHANGED':
        const newOption = e.data.shippingOptionId;
        details =
          await payment_request_event.changeShippingOption(newOption);
      …

ผู้ขายจะได้รับเหตุการณ์ shippingoptionchange จาก Payment Request API ผู้ขายควรใช้ข้อมูลดังกล่าวในการอัปเดตราคารวม และตอบกลับด้วย PaymentDetailsUpdate ที่อัปเดต

[ผู้ขาย] 

request.addEventListener('shippingoptionchange', e => {
  // selected shipping option
  const shippingOption = request.shippingOption;
  const newTotal = {
    currency: 'USD',
    label: 'Total due',
    value: calculateNewTotal(shippingOption),
  };
  // `updateWith()` sends back updated payment details
  e.updateWith({ total: newTotal });
});

เมื่อผู้ขายตอบกลับ คำสัญญาที่ PaymentRequestEvent.changeShippingOption() ส่งคืนจะยุติได้ด้วยออบเจ็กต์ PaymentRequestDetailsUpdate

[ตัวจัดการการชำระเงิน] service-worker.js 

…
        // Notify the merchant of the shipping option change
        details = await payment_request_event.changeShippingOption(newOption);
        // Provided the new payment details,
        // send a message back to the frontend to update the UI
        postMessage('UPDATE_REQUEST', details);
        break;
…

ใช้ออบเจ็กต์เพื่ออัปเดต UI บนฟรอนท์เอนด์ โปรดดูแสดงรายละเอียดการชำระเงิน ที่อัปเดต

แสดงรายละเอียดการชำระเงินที่อัปเดต

เมื่อผู้ขายอัปเดตรายละเอียดการชำระเงินเสร็จแล้ว คำสัญญาที่ส่งกลับมาจาก .changePaymentMethod(), .changeShippingAddress() และ .changeShippingOption() จะแก้ไขโดยใช้ออบเจ็กต์ PaymentRequestDetailsUpdate ทั่วไป เครื่องจัดการการชำระเงินสามารถใช้ผลลัพธ์เพื่อแสดงราคารวมที่อัปเดตและตัวเลือกการจัดส่งไปยัง UI ได้

ผู้ขายอาจแสดงข้อผิดพลาดด้วยเหตุผลต่อไปนี้

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

ใช้พร็อพเพอร์ตี้ต่อไปนี้เพื่อแสดงสถานะข้อผิดพลาด

  • error: สตริงข้อผิดพลาดที่มนุษย์อ่านได้ สตริงนี้แสดงต่อลูกค้าได้ดีที่สุด
  • shippingAddressErrors: AddressErrors ออบเจ็กต์ที่มีสตริงข้อผิดพลาดโดยละเอียดต่อพร็อพเพอร์ตี้ที่อยู่ วิธีนี้มีประโยชน์หากคุณต้องการเปิดแบบฟอร์มที่ให้ลูกค้าแก้ไขที่อยู่ได้ และคุณต้องนำลูกค้าไปยังช่องที่ไม่ถูกต้องโดยตรง
  • paymentMethodErrors: ออบเจ็กต์ข้อผิดพลาดเฉพาะสำหรับวิธีการชำระเงิน คุณสามารถขอให้ผู้ขายระบุข้อผิดพลาดที่มีโครงสร้างได้ แต่ผู้เขียนข้อกำหนดของการชำระเงินบนเว็บแนะนำให้เก็บสตริงที่เรียบง่ายไว้

รหัสตัวอย่าง

โค้ดตัวอย่างส่วนใหญ่ที่คุณเห็นในเอกสารฉบับนี้เป็นข้อความที่ตัดตอนมาจากแอปตัวอย่างที่ใช้งานได้ต่อไปนี้

https://paymenthandler-demo.glitch.me

โปรแกรมทำงานของบริการ [การชำระเงิน]

ฟรอนท์เอนด์ [ตัวจัดการการชำระเงิน]

โดยทำดังนี้

  1. ไปที่ https://paymentrequest-demo.glitch.me/
  2. ไปที่ด้านล่างสุดของหน้า
  3. กดเพิ่มปุ่มการชำระเงิน
  4. ป้อน https://paymenthandler-demo.glitch.me ลงในช่องตัวระบุวิธีการชำระเงิน
  5. กดปุ่มชำระเงินถัดจากช่อง