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