Share
Trang chủ / Tất cả hướng dẫn / Lập trình web / Làm quen với Payment Request API

Làm quen với Payment Request API

Payment Request API là một API mới cho phép bạn lấy thông tin thanh toán của người dùng, bạn có thể dùng thông tin này để gửi trực tiếp tới các cổng thanh toán như Stripe. Mục đích của nó là để cải thiện trải nghiệm người dùng về thanh toán, giúp người dùng lưu và sử dụng thông tin thanh toán của họ một cách tiện lợi hơn. Bản thân API này đang được phát triển bởi W3C và tham gia chính của Google và Microsoft.

Tại thời điểm viết bài này API này vẫn còn rất mới và chỉ hỗ trợ bởi Chrome và Edge 15+. Chrome 60 đã có hỗ trợ Payment Request API, nhưng bạn phải enable flag Web Payments bằng tay. Lưu ý là Payment Request API chỉ hoạt động với website có https.

Kiểm tra xem API có hỗ trợ không

API còn khá mới, để đảm bảo code không bị error thì bạn nên kiểu tra xem browser có hỗ trợ hay không, như cách truyền thống vẫn dùng:

if (window.PaymentRequest) {
    // Yep, we can go ahead! Our code goes here.
} else {
    // No support. Proceed the old school way
}

Payment Request Object

Đầu tiên bạn tạo object paymentRequest và truyền vào cho nó một array xác định các payment method mà bạn muốn. Tiếp theo là object paymentDetails chứa thông tin chi tiết về payment, và cuối cùng là paymentRequest, là instance của class PaymentRequest, tham số đầu tiên của nó là paymentMethods, tham số thứ hai là paymentDetails:

const paymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
];

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  }
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails
);

Lư ý rằng ‘basic-card’ có nghĩa là bạn sẽ chấp nhận các loại thẻ credit và debit. Bạn có thể giới hạn loại thẻ bằng cách sau:

const paymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

Payment Details

Các field bắt buộc phải có là: total, label, amount, currency và value.

Bạn cũng có thể thêm các item tùy chọn khác để browser hiển thị trên UI:

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  },
  displayItems: [
    {
      label: 'Promo code',
      amount: {
        currency: 'USD',
        value: -10
      }
    },
    {
      label: 'Taxes',
      amount: {
        currency: 'USD',
        value: 12
      }
    }
  ]
};

Không gian để hiển thị trên browser rất giới hạn, nện bạn chỉ nên show ra các thông tin quan trọng như tổng, thuế và shiping. Một lưu ý nữa là API này không thực hiện bất kỳ tính toán nào cả, displayItems chỉ là để hiển thị ra thôi, vì vậy bạn phải tự mình tính toán tất cả.

Ngoài ra PaymentRequest còn chấp nhận một tham số thứ ba nữa là options.

const options = {
  requestPayerName: true,
  requestPayerEmail: true
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

Hiển thị UI và lấy thông tin

API cung cấp hàm show để hiển thị UI. Hàm này trả về Promise.

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return paymentResponse.complete().then(() => {
      // call backend API to process payment with data from `paymentResponse`
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });

Rất đơn giản đúng không. Với đoạn code trên, Browser sẽ hiển tụi một form, khi bạn lấy xong thông tin thanh toán, browser sẽ không tự đóng, bạn cần phải gọi hàm complete. Hàm này cũng trả về Promises. Việc này là vì bạn cần phải request tới server của bạn và xử lý, có thể việc này sẽ lâu.

Browser Support

Tổng kết

Dù ở thời điểm hiện tại, API này chỉ có 30% user sử dụng được. Nhưng hy vọng tương lai sẽ có nhiều browser hỗ trợ hơn. API này cũng tiết kiệm thời gian kha khá của người dùng, tuy nhiên. Payment là một flow quan trọng, vì vậy bạn phải luôn chuẩn bị fallback.