Hiện nay, qrcode được sử dụng phổ biến rộng rãi khi thanh toán online, qrcode có 2 loại là qrcode động và qrcode tĩnh. Trong bài này chúng ta tìm hiểu cách sử dụng qrcode động của vietqr.io để thêm chức năng thanh toán ngân hàng vào ứng dụng của mình

Khác với qrcode tĩnh chỉ set cứng các thông tin để tạo ra thì qrcode động có thể linh hoạt truyền thông tin từ database để tạo Qr. Và để tạo Qrcode động mà các ứng dụng của ngân hàng có thể quét được thì ta phải sử dụng API của bên thứ 3 như Vietqr.

Bắt đầu thôi nào!

1. Lấy API key và Client Id của Vietqr

Truy cập trang profile để lấy 2 key này cho việc xác thực API

2. Gọi api để tạo Qrcode

Sử dụng thư viện như Axios để call api. Trong đó:

URL:

https://api.vietqr.io/v2/generate

Header:

{
"Content-Type": "application/json",
 "x-client-id": "client id lấy ở trên",
 "x-api-key": 'api key lấy ở trên',
}

Body:

{
"accountNo": 113366668888,
"accountName": "QUY VAC XIN PHONG CHONG COVID",
"acqId": 970415,
"amount": 79000,
"addInfo": "Ung Ho Quy Vac Xin",
"format": "text",
"template": "compact"
}

Trong đó:

• accountNo: Số tài khoản nhận tiền
• accountName: Tên tài khoản
• acqId: Mã BIN của ngân hàng, sử dụng api https://api.vietqr.io/v2/banks để lấy danh sách mã BIN này
• amount: Số tiền
• addInfo: Thông tin chuyển khoản
• template: Mẫu hiển thị qrcode, xem tại đây

Sau khi call thành công, phản hồi sẽ có dạng:

{
"code": "00",
"desc": "Gen VietQR successful!",
"data": {
 "qrCode": "",
"qrDataURL": ""
 }
 }

Trong đó:

• qrDataURL được sử dụng như là đường dẫn để hiển thị ảnh Qrcode lên ứng dụng

Như vậy chúng ta đã có thể hiển thị Qrcode trên ứng dụng của mình cho người dùng thực hiện thanh toán

Xem thêm chi tiết tại đây