Khi khách hàng cố gắng mua một mặt hàng trên trang web của bạn, trang web đó phải yêu cầu khách hàng cung cấp thông tin thanh toán và có thể là thông tin khác, chẳng hạn như lựa chọn ưu tiên về việc vận chuyển. Bạn có thể đạt được điều này một cách nhanh chóng bằng cách sử dụng Payment Request API (PR API).
Cấu trúc thanh toán cơ bản
Để tạo một đối tượng PaymentRequest, bạn cần có 2 tham số: phương thức thanh toán và thông tin thanh toán. Ngoài ra, bạn không bắt buộc phải sử dụng tham số thứ ba là các lựa chọn thanh toán. Bạn có thể tạo một yêu cầu cơ bản như sau:
const request = new PaymentRequest(paymentMethods, paymentDetails);
Hãy xem cách tạo và sử dụng từng tham số.
Phương thức thanh toán
Tham số đầu tiên, paymentMethods, là danh sách các phương thức thanh toán được hỗ trợ trong một biến mảng. Mỗi phần tử trong mảng bao gồm 2 thành phần, supportedMethods và data (không bắt buộc).
Đối với supportedMethods, người bán cần chỉ định một Payment Method Identifier (Mã nhận dạng phương thức thanh toán) chẳng hạn như https://bobbucks.dev/pay. Sự tồn tại và nội dung của data phụ thuộc vào nội dung của supportedMethods và thiết kế của nhà cung cấp ứng dụng thanh toán.
Cả hai thông tin này đều phải do nhà cung cấp ứng dụng thanh toán cung cấp.
// Supported payment methods
const paymentMethods = [{
supportedMethods: 'https://bobbucks.dev/pay',
data: {
... // Optional parameters defined by the payment app provider.
}
}];
Thông tin thanh toán
Tham số thứ hai, paymentDetails, được truyền dưới dạng một đối tượng và chỉ định thông tin thanh toán cho giao dịch. Thuộc tính này chứa giá trị bắt buộc total, chỉ định tổng số tiền khách hàng phải trả. Bạn cũng có thể tuỳ ý liệt kê các mặt hàng đã mua bằng thông số này.
Trong ví dụ sau, danh sách các mặt hàng đã mua không bắt buộc (chỉ có một mặt hàng trong trường hợp này) sẽ xuất hiện, cũng như tổng số tiền phải trả bắt buộc. Trong cả hai trường hợp, đơn vị tiền tệ đều được chỉ định cho từng số tiền riêng lẻ.
const paymentDetails = {
displayItems: [{
label: 'Anvil L/S Crew Neck - Grey M x1',
amount: { currency: 'USD', value: '22.15' }
}],
total: {
label: 'Total due',
amount: { currency: 'USD', value : '22.15' }
}
};
Kiểm tra xem phương thức thanh toán có được hỗ trợ hay không
Chrome kiểm tra xem người dùng và môi trường đã sẵn sàng thanh toán hay chưa trong quá trình tạo đối tượng PaymentRequest.
Để kiểm tra xem người dùng và môi trường đã sẵn sàng thanh toán hay chưa, hãy gọi canMakePayment() trước khi gọi quy trình thanh toán. Khi gọi canMakePayment(), hệ thống sẽ trả về true nếu trình duyệt hỗ trợ ít nhất một phương thức thanh toán được chỉ định trong đối tượng.
request.canMakePayment().then(result => {
if (result) {
// This browser supports the specified payment method.
} else {
// This browser does NOT support the specified payment method.
}
}).catch(e => {
// An exception
});
Tìm hiểu thêm về PaymentRequest.canMakePayment() trên MDN
Phương thức show()
Sau khi đặt hai thông số và tạo đối tượng request, bạn có thể gọi phương thức show(). Phương thức này sẽ hiển thị giao diện người dùng của ứng dụng thanh toán.
request.show().then(response => {
// [process payment]
// send to a PSP etc.
response.complete('success');
});
Giao diện người dùng của ứng dụng thanh toán sẽ trông như thế nào hoàn toàn tuỳ thuộc vào nhà cung cấp ứng dụng thanh toán. Sau khi khách hàng đồng ý thanh toán, một đối tượng JSON sẽ được chuyển đến người bán. Đối tượng này chứa tất cả thông tin bắt buộc để chuyển tiền. Sau đó, người bán có thể gửi mã này cho PSP để xử lý khoản thanh toán.
Cuối cùng, bạn có thể đóng Giao diện người dùng Yêu cầu thanh toán bằng cách hoàn tất quy trình bằng response.complete('success') hoặc response.complete('fail'), tuỳ thuộc vào kết quả mà PSP trả về.
Tiếp theo
Tìm hiểu thêm về Web Payments.