Nắm bắt thông tin mới về tính năng Thanh toán trên web.
Tính năng 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 tính năng Thanh toán trên web, hãy xem bài viết "Tổng quan về khoản thanh toán trên web" để bắt đầu.
Kể từ khi ra mắt API Yêu cầu thanh toán và API Trình xử lý thanh toán, thông số kỹ thuật tương ứng đã có khá nhiều thay đổi. Những thay đổi này sẽ không làm hỏng mã đang hoạt động của bạn, nhưng bạn nên chú ý đến chúng. Bài đăng này tóm tắt những nội dung cập nhật đó và sẽ tiếp tục tích luỹ những thay đổi về 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 xem người dùng có phương thức thanh toán hay không. Trong bản cập nhật gần đây cho thông số kỹ thuật, 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 củ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 và cả Webkit lẫn Gecko đều có 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 công cụ
Vì hasEnrolledInstrument() hiện xử lý việc kiểm tra phương thức thanh toán của người dùng, nên canMakePayment() đã được cập nhật để chỉ kiểm tra xem ứng dụng thanh toán có sẵn hay không.
Thay đổi này đối với canMakePayment() bị ràng buộc với việc triển khai hasEnrolledInstrument(). Kể từ tháng 6 năm 2019, tính năng này được triển khai trong Chrome 74 nhưng không có trong bất kỳ trình duyệt nào khác. Hãy nhớ kiểm tra xem trình duyệt của người dùng có phương thức hasEnrolledInstrument() hay không trước khi tìm cách sử dụng phương thức đó.
// 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 phương thức thanh toán của basic-card
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() hiện sử dụng detailsPromise không bắt buộc
PaymentRequest.show() cho phép người bán hiển thị giao diện người dùng yêu cầu thanh toán trước khi biết tổng số tiền cuối cùng. Người bán có 10 giây để phân giải detailsPromise trước khi hết thời gian chờ. Tính năng này dành cho tính năng trả về nhanh phía máy chủ.
Tính năng này đã có trong 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 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 phân giải thành một phản hồi của người bán có thông tin giá được cập nhật (ví dụ: tính thuế lại).
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 hoạt động phát triển cục bộ
Chrome 76 bổ sung hai điểm cải tiến nhỏ về 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 để Chrome cho phép các API Thanh toán trên web trong môi trường phát triển của bạn. Nếu phát triển bằng cách sử 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.