Tìm hiểu tổng quan cách hoạt động của API yêu cầu thanh toán.
API yêu cầu thanh toán
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à các thông tin khác (không bắt buộc) như lựa chọn ưu tiên về thông tin vận chuyển. 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).
Cấu trúc cơ bản
Để tạo đố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, 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 xét cách tạo và sử dụng mỗi 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 Giá trị 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.
}
}];
Chi tiết về việc 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. Mã này chứa giá trị bắt buộc total. Giá trị này xác định tổng số tiền phải trả từ khách hàng. Tham số này cũng có thể tuỳ ý liệt kê các mặt hàng đã mua.
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ệ đều đượ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 sẽ kiểm tra xem người dùng và môi trường đã sẵn sàng thanh toán trong quá trình tạo đối tượng PaymentRequest hay chưa.
Để 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 hai 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 sẽ 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, đối tượng JSON sẽ được chuyển đến người bán 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 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ề Thanh toán trên web.