Hướng dẫn tạo ảnh QR Code và nhúng vào website

Tạo ảnh QR Code giúp khách hàng có thể dùng app ngân hàng để quét mã và chuyển khoản.

Ảnh QR Code là gì?

Ảnh QR Code chứa toàn bộ thông tin về ngân hàng, số tài khoản thụ hưởng, số tiền chuyển khoản, nội dung chuyển khoản.

Khi khách hàng dùng App ngân hàng để quét mã, ứng dụng sẽ tự điền toàn bộ thông tin chuyển khoản, rất tiện lợi.

Như vậy khi tích hợp QR Code, khách hàng sẽ không cần phải điền bằng tay các thông tin chuyển khoản. Trải nghiệm khách hàng sẽ tốt hơn, việc chuyển khoản thanh toán cũng nhanh hơn.

SePay cung cấp công cụ để giúp bạn tạo ảnh QR Code động tại qr.sepay.vn. Bạn có thể nhập thông tin trên giao diện để tạo nhanh, hoặc dùng cấu trúc link bên dưới để tự sinh ảnh QR Code và nhúng vào website, ứng dụng.

Cấu trúc link nhúng:

https://vietqr.app/img?acc=SO_TAI_KHOAN&bank=NGAN_HANG&amount=SO_TIEN&des=NOI_DUNG&template=TEMPLATE&download=DOWNLOAD&showinfo=SHOW_INFO&fullacc=FULLACC&holder=TEN_CHU_TK&store=TEN_CUA_HANG

Bạn chỉ cần thay thế các biến trên đường dẫn thành nội dung phù hợp. Chỉ acc và bank là bắt buộc, các tham số còn lại có thể bỏ qua.

Tham số Bắt buộc Mô tả
acc Có Số tài khoản ngân hàng (hoặc số tài khoản ảo VA tùy quy tắc của ngân hàng). Chỉ nhập chữ và số, tối đa 19 ký tự.
bank Có Ngân hàng, nhận theo một trong các field trong danh sách banks.json: code, bin, short_name hoặc alias (ví dụ: VCB, 970436 hoặc Vietcombank).
amount Không Số tiền chuyển khoản (VND). Chỉ nhập số, bỏ trống để khách tự nhập khi quét mã.
des Không Nội dung chuyển khoản. Chỉ nhập chữ, số, không dấu.
template Không Kiểu hiển thị ảnh QR Code: để trống, compact, qronly hoặc standee. Xem chi tiết tại bảng kiểu hiển thị bên dưới.
download Không Đặt true để trình duyệt tải ảnh QR về máy thay vì hiển thị trực tiếp (inline).
showinfo Không Đặt true để hiển thị thông tin tài khoản kèm ảnh QR. Không áp dụng cho template=standee vì standee đã hiển thị sẵn thông tin.
fullacc Không Đặt true để hiển thị đầy đủ số tài khoản trên ảnh. Chỉ có tác dụng khi showinfo=true.
holder Không Tên chủ tài khoản hiển thị trên ảnh. Nhập chữ không dấu, viết hoa, ký tự ASCII, tối đa 80 ký tự.
store Không Tên cửa hàng hoặc doanh nghiệp hiển thị trên ảnh. Tối đa 80 ký tự.

Lưu ý: Các số tài khoản trong những ví dụ bên dưới là dữ liệu mẫu, không có thật.

Ví dụ 1: Link QR đầy đủ thông tin số tiền và nội dung:
https://vietqr.app/img?acc=0000000000&bank=Vietcombank&amount=100000&des=thanh%20toan%20don%20hang

Ảnh QR Code sẽ hiển thị là

Ví dụ 2: Link QR chỉ có thông tin số tài khoản và ngân hàng:
https://vietqr.app/img?acc=0000000000&bank=Vietcombank

Ảnh QR Code sẽ hiển thị là

Tùy chỉnh kiểu hiển thị với tham số template

Tham số template cho phép bạn chọn kiểu hiển thị ảnh QR Code phù hợp với từng mục đích sử dụng.

Giá trị Kiểu hiển thị
(bỏ trống) Ảnh QR chuẩn kèm logo VietQR.
compact Bố cục gọn, có kèm logo NAPAS/VietQR, logo ngân hàng và logo SePay. Phù hợp nhúng vào trang thanh toán.
qronly Chỉ ảnh QR, không kèm khung và logo.
standee Bố cục standee, dùng để in tại quầy điểm bán.

Ví dụ 3: Kiểu compact (bố cục gọn, kèm logo NAPAS/VietQR, logo ngân hàng và logo SePay):
https://vietqr.app/img?acc=0000000000&bank=Vietcombank&amount=100000&des=thanh%20toan%20don%20hang&template=compact

Ví dụ 4: Kiểu qronly (chỉ ảnh QR, không kèm khung và logo):
https://vietqr.app/img?acc=0000000000&bank=Vietcombank&amount=100000&des=thanh%20toan%20don%20hang&template=qronly

Ví dụ 5: Kiểu standee (bố cục standee để in tại quầy điểm bán), kết hợp tên chủ tài khoản và tên cửa hàng:
https://vietqr.app/img?acc=0000000000&bank=Vietcombank&template=standee&holder=NGUYEN%20VAN%20A&store=CUA%20HANG%20ABC

Hiển thị thông tin tài khoản trên ảnh QR

Đặt showinfo=true để in kèm tên chủ tài khoản, tên cửa hàng và số tài khoản lên ảnh QR. Bạn có thể kết hợp với holder và store để bổ sung thông tin hiển thị.

Lưu ý về phụ thuộc giữa các tham số:

Ví dụ 6: Hiển thị thông tin tài khoản kèm tên chủ tài khoản và tên cửa hàng:
https://vietqr.app/img?acc=0000000000&bank=Vietcombank&amount=100000&des=thanh%20toan%20don%20hang&showinfo=true&holder=NGUYEN%20VAN%20A&store=CUA%20HANG%20ABC

Nhúng mã QR Code vào website

Bạn có thể nhúng ảnh QR Code bằng thẻ img như sau:

<img src='https://vietqr.app/img?acc=SO_TAI_KHOAN&bank=NGAN_HANG&amount=SO_TIEN&des=NOI_DUNG' alt='QR thanh toán VietQR' />

Hoặc nhúng bằng cú pháp Markdown:

![QR thanh toán VietQR](https://vietqr.app/img?acc=SO_TAI_KHOAN&bank=NGAN_HANG&amount=SO_TIEN&des=NOI_DUNG)

Bạn có thể bổ sung thêm các tham số template, showinfo, holder, store, fullacc vào đường dẫn để tùy chỉnh ảnh QR Code theo nhu cầu. Ví dụ nhúng bằng thẻ img với kiểu gọn và tên cửa hàng:

<img src='https://vietqr.app/img?acc=0000000000&bank=Vietcombank&amount=100000&des=thanh%20toan%20don%20hang&template=compact&showinfo=true&store=SePay%20Store' alt='Mã QR thanh toán SePay' />