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 hỏi những người dùng 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) chẳng hạn như ưu tiên vận chuyển. Bạn có thể đạt được điều 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 (API PR).
Cấu trúc cơ bản
Để tạo đối tượng PaymentRequest yêu cầu có 2 tham số: payment
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à tuỳ chọ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 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ợ ở
biến mảng. Mỗi phần tử trong mảng bao gồm hai 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 Phương thức thanh toán
Giá trị nhận dạng
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 đối tượng và chỉ định
thông tin thanh toán cho giao dịch. Tệp này chứa giá trị bắt buộc total,
xác định tổng số tiền phải trả từ khách hàng. Tham số này cũng có thể
liệt kê các mặt hàng đã mua (không bắt buộc).
Trong ví dụ bên dưới, danh sách các mặt hàng đã mua không bắt buộc (chỉ một mặt hàng, trong trường hợp) được hiển thị, cũng như 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.
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 đã 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. Gọi điện
canMakePayment() 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 tham số và tạo đối tượng request như dưới đây
ở trên, bạn có thể gọi phương thức show(). Phương thức này hiển thị thông tin người dùng ứ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 ứng dụng thanh toán Google Cloud. Sau khi khách hàng đồng ý thanh toán, đối tượng JSON sẽ được truyền cho người bán có 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ả trả về PSP.
Tiếp theo
Tìm hiểu thêm về Thanh toán trên web.