Luôn cập nhật tính năng mới của Thanh toán trên web.
Thanh toán trên web đã được cung cấp công khai trong các trình duyệt kể từ năm 2016. Tính năng cốt lõi — API Yêu cầu thanh toán — hiện có trên nhiều trình duyệt: Chrome, Safari, Edge và sắp tới là Firefox. Nếu bạn mới sử dụng Thanh toán trên web, hãy xem "Tổng quan về thanh toán trên web" để bắt đầu.
Kể từ khi API Yêu cầu thanh toán ra mắt và API Trình xử lý thanh toán, đã có khá nhiều thay đổi đối với quy cách tương ứng. Những thay đổi này sẽ không làm hỏng mã làm việc của bạn, nhưng bạn nên để ý đến chúng. Bài đăng này tóm tắt các nội dung cập nhật đó và sẽ tiếp tục tích luỹ các thay đổi API đó.
Phương thức mới: hasEnrolledInstrument()
Trong phiên bản trước của API yêu cầu thanh toán, canMakePayment() được dùng để kiểm tra sự hiện diện của người dùng đối với phương thức thanh toán của họ. Trong bản cập nhật gần đây về quy cách, canMakePayment() đã được thay thế bằng hasEnrolledInstrument() mà không thay đổi chức năng của nó.
Phương thức hasEnrolledInstrument() có sự đồng thuận giữa tất cả các trình duyệt chính.
Chrome đã triển khai phương thức này trong phiên bản 74. Cả Webkit và Gecko đều gặp lỗi theo dõi nhưng chưa triển khai phương thức này kể từ tháng 6 năm 2019.
Để sử dụng phương thức hasEnrolledInstrument() mới, hãy thay thế mã có dạng như sau:
// Checking for instrument presence.
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
Với mã có dạng như sau:
// Checking for instrument presence.
if (request.hasEnrolledInstrument) {
// hasEnrolledInstrument() is available.
request.hasEnrolledInstrument().then(handleInstrumentPresence).catch(handleError);
} else {
request.canMakePayment().then(handleInstrumentPresence).catch(handleError);
}
canMakePayment() không còn kiểm tra sự hiện diện của thiết bị nữa
Vì hasEnrolledInstrument() hiện xử lý việc kiểm tra công cụ thanh toán của người dùng, nên canMakePayment() đã được cập nhật để chỉ kiểm tra tính sẵn có của ứng dụng thanh toán.
Thay đổi này đối với canMakePayment() sẽ ràng buộc với việc triển khai hasEnrolledInstrument(). Kể từ tháng 6 năm 2019, API này được triển khai trong Chrome 74 nhưng không được triển khai trong bất kỳ trình duyệt nào khác. Hãy nhớ kiểm tra xem phương thức hasEnrolledInstrument() có sẵn trong trình duyệt của người dùng hay không trước khi thử sử dụng.
// 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.");
}
Đã xoá languageCode khỏi basic-card phương thức thanh toán
PaymentAddress.languageCode đã bị xoá khỏi địa chỉ giao hàng và địa chỉ thanh toán của basic-card. Địa chỉ thanh toán của các phương thức thanh toán khác (chẳng hạn như Google Pay) sẽ không bị ảnh hưởng.
Thay đổi này đã được triển khai trong Chrome 74, Firefox và Safari.
PaymentRequest.show() nay lấy detailsPromise không bắt buộc
PaymentRequest.show() cho phép người bán trình bày giao diện người dùng yêu cầu thanh toán trước khi biết tổng số cuối cùng. Người bán có 10 giây để giải quyết detailsPromise trước khi hết thời gian chờ. Tính năng này dùng cho quá trình trả về phía máy chủ nhanh.
Tính năng này đã được chuyển vào Chrome 75 và 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()
Tính năng API Trình xử lý thanh toán PaymentRequestEvent.changePaymentMethod() cho phép các trình xử lý thanh toán (ví dụ: Google Pay) để kích hoạt trình xử lý sự kiện
onpaymentmethodchange. changePaymentMethod() trả về một lời hứa sẽ giải quyết phản hồi của người bán với thông tin giá được cập nhật (ví dụ: tính toán lại thuế).
Cả sự kiện PaymentRequestEvent.changePaymentMethod() và paymentmethodchange đều có trong Chrome 76 và Webkit đã triển khai sự kiện paymentmethodchange trong Bản xem trước công nghệ.
// 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);
});
}));
});
Ví dụ về người bán:
if (request.onpaymentmethodchange === undefined) {
// Feature not available in this browser.
return;
}
request.addEventListener('paymentmethodchange', (evt) => {
evt.updateWith(updateDetailsBasedOnPaymentMethod(evt, paymentDetails));
});
Cải thiện quy trình phát triển cục bộ
Chrome 76 bổ sung 2 điểm cải tiến nhỏ giúp tăng năng suất của nhà phát triển. Nếu môi trường phát triển cục bộ của bạn sử dụng chứng chỉ tự ký, thì giờ đây, bạn có thể sử dụng cờ dòng lệnh --ignore-certificate-errors để khiến Chrome cho phép các API thanh toán trên web trong môi trường phát triển của mình. Nếu dùng một máy chủ web cục bộ không hỗ trợ HTTPS, bạn cũng có thể sử dụng cờ --unsafely-treat-insecure-origin-as-secure=<origin> để khiến Chrome coi nguồn gốc HTTP là HTTPS.