Top Ad unit 728 × 90

Làm quen với PAYMENT REQUEST API

Chào các bạn!
Mấy hôm trước mình có đọc được bài nói về PAYMENT REQUEST API của techtalk khá là hay nên hôm nay mình sẽ chia sẻ bài này cho các bạn cùng đọc và cùng tham khảo nhé!



Bài viết của tác giả Nguyễn Văn Được

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:

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:
Lưu ý 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:

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:
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.

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.
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.
Techtalk Via
Làm quen với PAYMENT REQUEST API Reviewed by Thế Giới Tri Thức on tháng 10 03, 2017 Rating: 5

Không có nhận xét nào:

All Rights Reserved by THẾ GIỚI TRI THỨC © 2018
Thiết kế bởi: THẾ GIỚI TRI THỨC

Biểu mẫu liên hệ

Tên

Email *

Thông báo *

Được tạo bởi Blogger.