การอัปเดต Web Payments API

ติดตามข่าวสารเกี่ยวกับฟีเจอร์ใหม่ๆ ในการชำระเงินผ่านเว็บ

Eiji Kitamura

Danyao Wang

Rouslan Solomakhin

การชำระเงินผ่านเว็บพร้อมให้บริการแบบสาธารณะในเบราว์เซอร์มาตั้งแต่ปี 2016 ฟีเจอร์หลักอย่าง Payment Request API พร้อมให้บริการในเบราว์เซอร์หลายรุ่นแล้ว ได้แก่ Chrome, Safari, Edge และอีกไม่นานใน Firefox หากคุณเพิ่งเคยใช้การชำระเงินผ่านเว็บ โปรดดู"ภาพรวมการชำระเงินผ่านเว็บ" เพื่อเริ่มต้นใช้งาน

นับตั้งแต่เปิดตัว Payment Request API และ Payment Handler API ได้มีการเปลี่ยนแปลงข้อกำหนดเฉพาะที่เกี่ยวข้องค่อนข้างมาก การเปลี่ยนแปลงเหล่านี้จะไม่ทำให้โค้ดทำงานผิดพลาด แต่เราขอแนะนำให้คุณระวังให้ดี โพสต์นี้จะสรุปการอัปเดตเหล่านั้นและจะรวบรวมการเปลี่ยนแปลง API เหล่านั้นต่อไป

วิธีการใหม่: hasEnrolledInstrument()

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

วิธีการ hasEnrolledInstrument() ได้รับความเห็นพ้องจากเบราว์เซอร์หลักๆ ทั้งหมด Chrome ใช้วิธีการนี้ในเวอร์ชัน 74 และทั้ง Webkit และ Gecko มีข้อบกพร่องในการติดตาม แต่ยังไม่ได้ใช้วิธีการนี้ ณ เดือนมิถุนายน 2019

หากต้องการใช้เมธอด hasEnrolledInstrument() ใหม่ ให้แทนที่โค้ดที่มีลักษณะดังนี้

// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);

ด้วยโค้ดที่มีลักษณะดังนี้

// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // hasEnrolledInstrument() is available.
  request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
  request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}

canMakePayment() ไม่ได้ตรวจหาว่ามีเครื่องดนตรีอยู่หรือไม่อีกต่อไป

เนื่องจากตอนนี้ hasEnrolledInstrument() จัดการการตรวจสอบเครื่องมือการชำระเงินของผู้ใช้แล้ว ระบบจึงอัปเดต canMakePayment() ให้ตรวจสอบเฉพาะความพร้อมใช้งานของแอปการชำระเงิน

การเปลี่ยนแปลง canMakePayment() นี้เชื่อมโยงกับการติดตั้งใช้งาน hasEnrolledInstrument() ในเดือนมิถุนายน 2019 มีการนําไปใช้ใน Chrome 74 แต่ไม่ได้นําไปใช้ในเบราว์เซอร์อื่นๆ โปรดตรวจสอบว่าhasEnrolledInstrument()วิธีดังกล่าวพร้อมใช้งานในเบราว์เซอร์ของผู้ใช้หรือไม่ก่อนที่จะพยายามใช้

// Checking for payment app availability without checking for instrument presence.
if (request.hasEnrolledInstrument) {
  // `canMakePayment()` behavior change corresponds to
  // `hasEnrolledInstrument()` availability.
  request.canMakePayment().then(handlePaymentAppAvailable).catch(handleError);
} else {
  console.log("Cannot check for payment app availability without checking for instrument presence.");
}

languageCode นำออกจากวิธีการชำระเงิน basic-card

ระบบได้นำ PaymentAddress.languageCode ออกจากที่อยู่สำหรับจัดส่งและที่อยู่สำหรับการเรียกเก็บเงินของ basic-card แล้ว ที่อยู่สำหรับการเรียกเก็บเงินของวิธีการชำระเงินอื่นๆ (เช่น Google Pay) จะไม่ได้รับผลกระทบ

การเปลี่ยนแปลงนี้มีผลใน Chrome 74, Firefox และ Safari

ตอนนี้ PaymentRequest.show() ใช้ detailsPromise ที่ไม่บังคับ

PaymentRequest.show() อนุญาตให้ผู้ขายแสดง UI คำขอการชำระเงินก่อนที่จะทราบยอดรวมสุดท้าย ผู้ขายมีเวลา 10 วินาทีในการแก้ไข detailsPromise ก่อนหมดเวลา ฟีเจอร์นี้มีไว้สำหรับการส่งข้อมูลไปมาอย่างรวดเร็วฝั่งเซิร์ฟเวอร์

ฟีเจอร์นี้พร้อมให้ใช้งานใน Chrome 75 และ Safari แล้ว

// Not implemented in Chrome 74 and older.
// There's no way to feature-detect this, so check a few
// older versions of Chrome that you're seeing hit your servers.
if (/Chrome\/((6[0-9])|(7[0-4]))/g.exec(navigator.userAgent) !== null) {
  return;
}

// Supported in Chrome 75+.
request.show(new Promise(function(resolveDetailsPromise, rejectDetailsPromise) {
  // Find out the exact total amount and call
  // `resolveDetailsPromise(details)`.
  // Use a 3 second timeout as an example.
  window.setTimeout(function() {
    resolveDetailsPromise(details);
  }, 3000); // 3 seconds.
}))
.then(handleResponse)
.catch(handleError);

PaymentRequestEvent.changePaymentMethod()

ฟีเจอร์ Payment Handler API PaymentRequestEvent.changePaymentMethod() อนุญาตให้เครื่องจัดการการชําระเงิน (เช่น Google Pay) เพื่อเรียกใช้เครื่องจัดการเหตุการณ์ onpaymentmethodchange changePaymentMethod() จะส่งคืนสัญญาที่ตกลงกับการตอบกลับผู้ขายด้วยข้อมูลราคาที่อัปเดต (เช่น การคำนวณภาษีใหม่)

ทั้ง PaymentRequestEvent.changePaymentMethod() และเหตุการณ์ paymentmethodchange มีให้บริการใน Chrome 76 และ Webkit ได้ใช้เหตุการณ์ paymentmethodchange ใน Technology Preview แล้ว

// In service worker context, `self` is the global object.
self.addEventListener('paymentrequest', (evt) => {
  evt.respondWith(new Promise((confirmPaymentFunction, rejectPaymentFunction) => {
    if (evt.changePaymentMethod === undefined) {
      // Not implemented in this version of Chrome.
      return;
    }
    // Notify merchant that the user selected a different payment method.
    evt.changePaymentMethod('https://paymentapp.com', {country: 'US'})
    .then((responseFromMerchant) => {
      if (responseFromMerchant === null) {
        // Merchant ignored the 'paymentmethodchange' event.
        return;
      }
      handleResponseFromMerchant(responseFromMerchant);
    })
    .catch((error) => {
      handleError(error);
    });
  }));
});

ตัวอย่างผู้ขาย

if (request.onpaymentmethodchange === undefined) {
  // Feature not available in this browser.
  return;
}

request.addEventListener('paymentmethodchange', (evt) => {
  evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});

การพัฒนาในท้องถิ่นที่ได้รับการปรับปรุง

Chrome 76 ได้เพิ่มการปรับปรุงเล็กๆ น้อยๆ 2 อย่างเพื่อเพิ่มประสิทธิภาพการทำงานของนักพัฒนาซอฟต์แวร์ หากสภาพแวดล้อมการพัฒนาในเครื่องใช้ใบรับรองที่ลงนามด้วยตนเอง ตอนนี้คุณใช้ Flag บรรทัดคำสั่ง --ignore-certificate-errors เพื่อทำให้ Chrome อนุญาต Web Payments API ในสภาพแวดล้อมการพัฒนาได้แล้ว หากพัฒนาโดยใช้เว็บเซิร์ฟเวอร์ในเครื่องที่ไม่รองรับ HTTPS คุณจะใช้แฟล็ก --unsafely-treat-insecure-origin-as-secure=<origin> เพื่อทำให้ Chrome ถือว่าต้นทาง HTTP เป็น HTTPS ได้เช่นกัน