API yêu cầu thanh toán cung cấp một tiêu chuẩn trên nhiều trình duyệt cho phép bạn thu thập các khoản thanh toán, địa chỉ và thông tin liên hệ từ khách hàng của mình. Sau đó, bạn có thể sử dụng thông tin này để xử lý đơn đặt hàng của họ.
Nó cũng tạo điều kiện thuận lợi cho việc trao đổi thông tin này giữa trình duyệt và trang web. Ý tưởng cơ bản đằng sau điều này là cải thiện trải nghiệm mua sắm trực tuyến của người dùng bằng cách giúp người dùng dễ dàng lưu trữ thông tin liên hệ và thanh toán trong trình duyệt.
Hỗ trợ trình duyệt API yêu cầu thanh toán
API yêu cầu thanh toán vẫn đang được phát triển tích cực và chỉ được hỗ trợ bởi một số phiên bản mới nhất của trình duyệt hiện đại.
Trước khi bắt đầu thực hiện yêu cầu thanh toán, bạn nên phát hiện tính năng để đảm bảo rằng API được trình duyệt hỗ trợ:
if (window.PaymentRequest) {
// Yes, we can use the API
} else {
// No, fallback to the checkout page
window.location.href="https://www.freecodecamp.org/checkout"
}
Lưu ý rằng bạn chỉ có thể sử dụng API yêu cầu thanh toán trên các trang web phục vụ hơn https.
Bây giờ hãy xem API hữu ích này hoạt động như thế nào.
Cách tạo đối tượng PaymentRequest
Một yêu cầu thanh toán luôn được bắt đầu bằng cách tạo một đối tượng mới của PaymentRequest – sử dụng PaymentRequest() người xây dựng. Hàm tạo nhận hai tham số bắt buộc và một tham số tùy chọn:
paymentMethodsxác định hình thức thanh toán nào được chấp nhận. Ví dụ: bạn chỉ có thể chấp nhận thẻ tín dụng Visa và MasterCard.paymentDetailschứa tổng số tiền đến hạn thanh toán, thuế, chi phí vận chuyển, mặt hàng trưng bày, v.v.optionslà một đối số tùy chọn được sử dụng để yêu cầu chi tiết bổ sung từ người dùng, chẳng hạn như tên, email, điện thoại, v.v.
Tiếp theo, chúng tôi sẽ tạo một yêu cầu thanh toán mới chỉ với các tham số bắt buộc.
Làm thế nào để sử dụng paymentMethods tham số
const paymentMethods = [
{
supportedMethods: ['basic-card']
}
]
const paymentDetails = {
total: {
label: 'Total Amount',
amount: {
currency: 'USD',
value: 8.49
}
}
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails)
chú ý supportedMethods tham số trong paymentMethods vật. Khi nó được đặt thành basic-cardcả thẻ ghi nợ và thẻ tín dụng của tất cả các mạng sẽ được chấp nhận.
Nhưng bạn có thể giới hạn các mạng và loại thẻ được hỗ trợ. Ví dụ: chỉ các thẻ tín dụng Visa, MasterCard và Discover sau đây được chấp nhận:
const paymentMethods = [
{
supportedMethods: ['basic-card'],
data: {
supportedNetworks: ['visa', 'mastercard', 'discover'],
supportedTypes: ['credit']
}
}
]
// ...
Làm thế nào để sử dụng paymentDetails vật
Tham số thứ hai được truyền cho PaymentRequest hàm tạo là đối tượng chi tiết thanh toán. Nó chứa tổng số thứ tự và một mảng các mục hiển thị tùy chọn. Các total tham số phải bao gồm một label tham số và một amount tham số với currency và value.
Bạn cũng có thể thêm các mục hiển thị bổ sung để cung cấp bảng phân tích cấp cao về tổng số:
const paymentDetails = {
total: {
label: 'Total Amount',
amount: {
currency: 'USD',
value: 8.49
}
},
displayItems: [
{
label: '15% Discount',
amount: {
currency: 'USD',
value: -1.49
}
},
{
label: 'Tax',
amount: {
currency: 'USD',
value: 0.79
}
}
]
}
Các displayItems tham số không có nghĩa là hiển thị một danh sách dài các mục. Do không gian bị giới hạn cho giao diện người dùng thanh toán của trình duyệt trên thiết bị di động, nên bạn nên sử dụng tham số này để chỉ hiển thị các trường cấp cao nhất như tổng phụ, giảm giá, thuế, chi phí vận chuyển, v.v.
Hãy ghi nhớ rằng PaymentRequest API không thực hiện bất kỳ tính toán nào. Vì vậy, ứng dụng web của bạn chịu trách nhiệm cung cấp tính toán trước total số lượng.
Làm thế nào để sử dụng options đối số để yêu cầu chi tiết bổ sung
Bạn có thể sử dụng tham số tùy chọn thứ ba để yêu cầu thông tin bổ sung từ người dùng, chẳng hạn như tên, địa chỉ email và số điện thoại:
// ...
const options = {
requestPayerName: true,
requestPayerPhone: true,
requestPayerEmail: true
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)
Theo mặc định, tất cả các giá trị này là falsenhưng thêm bất kỳ trong số chúng vào options đối tượng có giá trị true sẽ dẫn đến một bước bổ sung trong giao diện người dùng thanh toán. Nếu người dùng đã lưu trữ các chi tiết này trong trình duyệt, chúng sẽ được điền trước.
Cách hiển thị giao diện người dùng thanh toán
Sau khi tạo một PaymentRequest đối tượng, bạn phải gọi show() để hiển thị giao diện người dùng yêu cầu thanh toán cho người dùng.
Các show() phương thức trả về một lời hứa giải quyết bằng một PaymentResponse đối tượng nếu người dùng đã điền thành công các chi tiết. Nếu có lỗi hoặc người dùng đóng giao diện người dùng, lời hứa sẽ từ chối.
// ...
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)
paymentRequest
.show()
.then(paymentResponse => {
// close the payment UI
paymentResponse.complete().then(() => {
// TODO: call REST API to process the payment at the backend server
// with the data from `paymentResponse`.
})
})
.catch(err => {
// user closed the UI or the API threw an error
console.log('Error:', err)
})
Với đoạn mã trên, trình duyệt sẽ hiển thị giao diện người dùng thanh toán cho người dùng. Khi người dùng đã điền thông tin chi tiết và nhấp vào nút ‘Thanh toán’, bạn sẽ nhận được một PaymentResponse đối tượng trong show() lời hứa.
Giao diện người dùng yêu cầu thanh toán bị đóng ngay lập tức khi bạn gọi PaymentResponse.complete() phương pháp. Phương thức này trả về một lời hứa mới để bạn có thể gọi máy chủ phụ trợ với thông tin được thu thập và xử lý khoản thanh toán.
Nếu bạn muốn gọi máy chủ phụ trợ để xử lý thanh toán trong khi giao diện người dùng thanh toán đang hiển thị công cụ quay vòng, bạn có thể hoãn cuộc gọi đến complete().
Hãy tạo một chức năng mô phỏng để xử lý thanh toán với máy chủ phụ trợ. phải mất paymentResponse làm tham số và trả về một lời hứa sau 1,5 giây sẽ phân giải thành đối tượng JSON:
const processPaymentWithServer = paymentResponse => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ status: true })
}, 1500)
})
}
//...
paymentRequest
.show()
.then(paymentResponse => {
processPaymentWithServer(paymentResponse).then(data => {
if (data.status) {
paymentResponse.complete('success')
} else {
paymentResponse.complete('fail')
}
})
})
.catch(err => {
console.log('Error:', err)
})
Trong ví dụ trên, giao diện người dùng thanh toán của trình duyệt sẽ hiển thị màn hình xử lý cho đến khi lời hứa được trả lại bởi processPaymentWithServer() phương pháp được giải quyết. Chúng tôi cũng sử dụng chuỗi ‘success’ và ‘fail’ để thông báo cho trình duyệt về kết quả giao dịch. Trình duyệt sẽ hiển thị thông báo lỗi cho người dùng nếu bạn gọi complete('fail').
Cách hủy yêu cầu thanh toán
Nếu bạn muốn hủy yêu cầu thanh toán do không có hoạt động hoặc bất kỳ lý do nào khác, bạn có thể sử dụng PaymentRequest.abort() phương pháp. Nó ngay lập tức đóng giao diện người dùng yêu cầu thanh toán và từ chối show() lời hứa.
// ...
setTimeout(() => {
paymentRequest
.abort()
.then(() => {
// aborted payment request
console.log('Payment request aborted due to no activity.')
})
.catch(err => {
// error while aborting
console.log('abort() Error: ', err)
})
}, 5000)
Phần kết luận
Đó là phần cuối của phần giới thiệu nhanh về API yêu cầu thanh toán JavaScript. Nó cung cấp một phương pháp dựa trên trình duyệt để thu thập thông tin liên hệ và thanh toán của khách hàng có thể được gửi đến máy chủ phụ trợ để xử lý khoản thanh toán.
Mục đích là để giảm số lượng các bước trong việc hoàn thành thanh toán trực tuyến. Nó làm cho toàn bộ quá trình thanh toán trở nên mượt mà hơn bằng cách ghi nhớ cách thanh toán ưa thích của người dùng đối với hàng hóa và dịch vụ.
Nếu bạn muốn tìm hiểu thêm về API yêu cầu thanh toán, đây là một tài nguyên tốt thảo luận về các khái niệm chính và cách sử dụng API.
Cảm ơn bạn đã đọc!
Nếu bạn muốn tìm hiểu thêm về JavaScript, bạn có thể xem blog cá nhân của tôi, nơi tôi đã xuất bản hơn 235 hướng dẫn về các đối tượng, mảng, chuỗi, API Web, v.v. của JavaScript.
Tôi cũng là người sáng lập AcquireBase. Bạn có thể theo dõi tôi trên Twitter để nhận thông tin cập nhật khi tôi xuất bản hướng dẫn mới hoặc chia sẻ các dự án phụ.
