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

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

Eiji Kitamura

คำเตือน: การสนับสนุนด้านการจัดส่งและที่อยู่ใน Payment Request API เคยถูกนำออกจากข้อกำหนดและจาก Chrome แต่กำลังเปลี่ยนกลับในข้อกำหนด ดังนั้นเราได้เปลี่ยนกลับเอกสารเกี่ยวกับการจัดส่งและที่อยู่ด้วย

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

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

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

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

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

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

UI เครื่องมือเลือกวิธีการชำระเงิน

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

เมื่อใช้ Payment Handler API แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงวิธีการชำระเงิน" ไปยังผู้ขายผ่าน Service Worker เพื่อแจ้งตัวระบุวิธีการชำระเงินใหม่ Service Worker ควรเรียกใช้ 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 ได้

[merchant]

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

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

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

Payment Handler API จะทำให้แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงที่อยู่ในการจัดส่ง" จาก Service Worker ไปยังผู้ขายเพื่อแจ้งที่อยู่สำหรับจัดส่งใหม่ เซอร์วิสเวิร์กควรเรียกใช้ 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);
      …

คีย์เวิร์ด: ที่อยู่ที่ถูกปกปิด ในกรณีนี้ คุณไม่จำเป็นต้องแจ้งที่อยู่สำหรับจัดส่งแบบเต็มให้ผู้ขายทราบเนื่องจากมีความเสี่ยงต่อความเป็นส่วนตัวของลูกค้า ผู้ขายได้รับเฉพาะบางส่วนของที่อยู่ที่ต้องใช้ในการกำหนดค่าจัดส่ง กล่าวคือ เบราว์เซอร์จะล้างช่อง organization, phone, recipient, addressLine ออกจากแอปการชำระเงินที่ระบุไว้ก่อนเพิ่มเหตุการณ์ shippingaddresschange ใน DOM ของผู้ขาย

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

[merchant]

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 เครื่องมือเลือกตัวเลือกการจัดส่ง

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

[merchant]

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 แอปการชำระเงินสามารถส่งเหตุการณ์ "การเปลี่ยนแปลงตัวเลือกการจัดส่ง" ไปยังผู้ขายจาก Service Worker Service Worker ควรเรียกใช้ PaymentRequestEvent.changeShippingOption() ด้วยรหัสตัวเลือกการจัดส่งใหม่

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

[payment handler] 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

[merchant]

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

หมายเหตุ: ระบบจะส่งออบเจ็กต์ PaymentRequestDetailsUpdate จากผู้ขาย ซึ่งประกอบด้วยข้อมูลที่ถูกต้องที่ผู้ขายใส่ไว้ในออบเจ็กต์ PaymentDetailsUpdate ผ่าน Payment Request API วิธีที่ดีที่สุดในการช่วยให้มั่นใจว่าผู้ขายจะให้ข้อมูลที่คุณต้องการคือให้เอกสารประกอบที่ดีสำหรับนักพัฒนาแอป หรือให้ไลบรารี JavaScript เพื่อควบคุมข้อมูล หรือทั้ง 2 อย่าง

ผู้ขายอาจแสดงข้อผิดพลาดเนื่องจากสาเหตุ 2-3 ประการ ดังนี้

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

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

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

โค้ดตัวอย่าง

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

https://paymenthandler-demo.glitch.me

[payment handler] service worker

[payment handler] frontend

วิธีลองใช้

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