Tìm hiểu tổng quan về cách hoạt động của API Yêu cầu thanh toán.
Payment Request API
Khi khách hàng cố gắng mua 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à thông tin khác (không bắt buộc) như lựa chọn ưu tiên về phương thức giao hàng. Bạn có thể thực hiện việc này một cách dễ dàng và nhanh chóng bằng cách sử dụng API Yêu cầu thanh toán (PR API).
Cấu trúc cơ bản
Để tạo đối tượng PaymentRequest, bạn cần có hai tham số: phương thức thanh toán và thông tin thanh toán. Ngoài ra, thông số các lựa chọn thanh toán thứ ba là không bắt buộc. 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 thông 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 dạng mảng. Mỗi phần tử trong mảng bao gồm hai thành phần là supportedMethods và data (không bắt buộc).
Đối với supportedMethods, người bán cần chỉ định một Mã nhận dạng phương thức thanh toá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 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 đố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ể chọn liệt kê các mặt hàng đã mua bằng thông số này.
Trong ví dụ bên dưới, danh sách các mặt hàng đã mua không bắt buộc (trong trường hợp này chỉ là một mặt hàng) sẽ xuất hiện, như là tổng số tiền đến hạn bắt buộc. Trong cả hai trường hợp, đơn vị tiền tệ được chỉ định với 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ó dùng được hay không
Chrome kiểm tra xem người dùng và môi trường có sẵn sàng thanh toán hay không 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. Việc gọi canMakePayment() 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 2 thông số và tạo đối tượng request như minh hoạ ở trên, bạn có thể gọi phương thức show() để cho thấy 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 hoàn toàn phụ 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, trong đó chứa tất cả thông tin cần thiết để chuyển tiền. Sau đó, người bán có thể gửi thông tin này đến 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ề Thanh toán trên web.