ติดตามข่าวสารเกี่ยวกับสิ่งใหม่ๆ ในการชำระเงินบนเว็บ
การชำระเงินบนเว็บมีให้ใช้งานแบบสาธารณะในเบราว์เซอร์มาตั้งแต่ปี 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 ได้เช่นกัน