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

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

Eiji Kitamura

Danyao Wang

Rouslan Solomakhin

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

นับตั้งแต่ที่ API คำขอการชำระเงินและ 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 ในตัวอย่างเทคโนโลยี

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