Cách hoạt động của API yêu cầu thanh toán

Tìm hiểu cách hoạt động của API yêu cầu thanh toán (ở cấp độ tổng quát).

Eiji Kitamura

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ề 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 API yêu cầu thanh toán (PR API).

Cấu trúc cơ bản

Việc tạo đối tượng PaymentRequest 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 thông số tuỳ chọn thanh toán thứ ba. 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 cùng xem cách tạo và sử dụng từng thông số.

Phương thức thanh toán

Thông 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 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ã 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. Phương thức 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ả của 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 không bắt buộc đã mua (trong trường hợp này chỉ là một mặt hàng) đượ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 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 này có hoạt động không

Trước khi gọi quy trình thanh toán, người bán có thể kiểm tra xem người dùng và môi trường đã sẵn sàng để thanh toán hay chưa.

Việc gọi canMakePayment() sẽ kiểm tra xem trình duyệt có hỗ trợ ít nhất một phương thức thanh toán được chỉ định trong đối tượng hay khô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ố này và tạo đối tượng request như trình bày ở trên, bạn có thể gọi phương thức show() để 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ẽ 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, đối tượng JSON sẽ được chuyển đến người bán 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 khoản thanh toán 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.