Giới thiệu nhanh về API yêu cầu thanh toán
API yêu cầu thanh toán là một API JavaScript mới giúp dễ dàng thu thập thông tin thanh toán sau đó có thể được gửi đến bộ xử lý thanh toán như Stripe. Mục đích là cải thiện UX thanh toán bằng cách giúp user dễ dàng lưu thông tin thẻ của họ bằng trình duyệt. Bản thân API được phát triển mở thông qua W3C và với sự tham gia chủ yếu của Google và Microsoft.
API vẫn còn khá mới và hỗ trợ chỉ giới hạn cho Chrome và Edge 15+ tại thời điểm này. Hỗ trợ cho máy tính để bàn Chrome đã được thêm vào với Chrome 60 , nhưng bạn vẫn có thể cần bật cờ Thanh toán trên web . Điều tốt là nó có thể dễ dàng được sử dụng như một chất tăng cường dần dần. Cũng lưu ý API chỉ hoạt động cho các trang web được phân phát qua https .
Kiểm tra tính năng
Bạn cần phát hiện tính năng để biết tính khả dụng của API:
if (window.PaymentRequest) { // Yep, we can go ahead! Our code goes here. } else { // No support. Proceed the old school way } Đối tượng Yêu cầu Thanh toán
Đầu tiên, bạn sẽ tạo một đối tượng PaymentRequest và chuyển vào một mảng cho các phương thức thanh toán được chấp nhận, một đối tượng có chi tiết thanh toán và đối tượng tùy chọn thứ 3 cho các tùy chọn:
const paymentMethods = [ { supportedMethods: ['basic-card'] } ]; const paymentDetails = { total: { label: 'What you pay', amount: { currency: 'USD', value: 80 } } }; const paymentRequest = new PaymentRequest( paymentMethods, paymentDetails ); // ... Chú ý hình dạng cho paymentMethods và paymentDetails. Với các Mạng hỗ trợ được đặt thành giá trị của thẻ cơ bản, thẻ tín dụng và thẻ ghi nợ sẽ được chấp nhận. Bạn cũng có thể giới hạn các mạng thanh toán được hỗ trợ. Ví dụ: chỉ với Visa và MasterCard sau đây sẽ được chấp nhận:
const paymentMethods = [ { supportedMethods: ['basic-card'], data: { supportedNetworks: ['visa', 'mastercard'] } } ]; Chi tiết thanh toán
Các trường sau là bắt buộc cho đối tượng chi tiết thanh toán: tổng số , nhãn , số tiền , đơn vị tiền tệ và giá trị .
Bạn cũng có thể thêm các mục hiển thị bổ sung cho giao diện user thanh toán của trình duyệt:
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 } } ] }; Dung lượng thường bị giới hạn cho giao diện user thanh toán của trình duyệt, vì vậy bạn có thể chỉ muốn liệt kê các trường cấp cao nhất như tổng giá, thuế và chi phí vận chuyển. Cũng xin lưu ý API không thực hiện bất kỳ phép tính nào, vì vậy ứng dụng của bạn có trách nhiệm cung cấp số tiền được tính trước.
Với đối số thứ 3 tùy chọn, bạn có thể yêu cầu thông tin bổ sung từ user như tên, email và số điện thoại của họ:
// ... const options = { requestPayerName: true, requestPayerEmail: true }; const paymentRequest = new PaymentRequest( paymentMethods, paymentDetails, options ); Bắt đầu giao diện user và hoàn thành
Ta đã sẵn sàng khá nhiều, mong rằng sẽ không có gì xảy ra cho đến khi ta gọi phương thức hiển thị trên đối tượng yêu cầu thanh toán. show () trả về một lời hứa, vì vậy nó có thể thực hiện được:
// ... 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); }); Đủ đơn giản! Với điều này, user sẽ được hiển thị với giao diện user từ trình duyệt. Gọi hoàn thành () trên thanh toán Phản hồi được trả lại sẽ đóng giao diện user thanh toán của trình duyệt và một lời hứa khác được trả lại để ta có thể gọi backend của bạn để gửi thông tin đã thu thập và xử lý thanh toán.
Thanh toán trực tuyến có thể khó khăn. Như bạn thấy , API yêu cầu thanh toán khá dễ làm việc và làm cho việc thu thập thông tin user trở thành một phần của khoản thanh toán rất đơn giản.
Với mã trên, giao diện user của trình duyệt sẽ đóng ngay lập tức khi user xác nhận thanh toán và sau đó ứng dụng của ta có thể tiếp quản và hiển thị chỉ báo tải trong khi thanh toán đang được xử lý bởi chương trình backend . Ngoài ra, ta có thể giữ lại giao diện user của trình duyệt và chỉ báo tải root của nó với thông tin như sau:
// ... const paymentRequest = new PaymentRequest( paymentMethods, paymentDetails, options ); paymentRequest .show() .then(paymentResponse => { return verifyPaymentWithBackend(paymentResponse).then(success => { if (success) { console.log('💵 Payment is complete!'); return paymentResponse.complete('success'); } else { return paymentResponse.complete('failure'); } }); }) .catch(err => { // API error or user cancelled the payment console.log('Error:', err); }); Với điều này, giao diện user 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 giải quyết hoặc từ chối. Ở đây verifyPaymentWithBackend sẽ là một hàm gọi API backend của bạn để xử lý thanh toán với nội dung của PaymentResponse .
Để giúp kiểm tra nó, đây là một mô hình trả về một lời hứa sẽ chuyển thành true sau 2,5 giây:
function verifyPaymentWithBackend(data) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(true); }, 2500); }); } Hỗ trợ trình duyệt
Tôi có thể sử dụng yêu cầu thanh toán không? Dữ liệu về hỗ trợ cho tính năng yêu cầu thanh toán trên các trình duyệt chính từ caniuse.com.
🔎 Đây là một tài nguyên tuyệt vời để đi sâu hơn và tìm hiểu những thông tin chi tiết của API yêu cầu thanh toán.
Các tin liên quan
