QRBANK

QRBank là một thư viện mạnh mẽ và dễ sử dụng cho việc tạo mã QR theo chuẩn Bank, đặc biệt phù hợp với các ứng dụng tài chính, ngân hàng hoặc thanh toán trực tuyến tại Việt Nam. Thư viện này hỗ trợ nhiều ngân hàng lớn như Vietcombank, Techcombank, và ACB, giúp dễ dàng tạo mã QR cho các giao dịch chuyển khoản với thông tin chi tiết như số tài khoản, số tiền, và nội dung giao dịch.

Lợi ích khi sử dụng QRBank

-Dễ dàng tích hợp: QRBank cho phép tạo mã QR nhanh chóng và tích hợp dễ dàng vào frontend Next.js,React.js, hệ thống backend Node.js, Nest.js.

-Hỗ trợ nhiều ngân hàng: Thư viện hỗ trợ hầu hết các ngân hàng lớn tại Việt Nam, giúp tạo mã QR chuyển khoản nhanh chóng.

-Tính năng mạnh mẽ: Bao gồm các tính năng tạo QR chuẩn Bank, xây dựng nội dung giao dịch tùy chỉnh và trả về URL hình ảnh mã QR.

-Không yêu cầu tài khoản API để dùng

Mẫu tạo QR với QRBank

Kết quả khi quét mã

Install

npm

npm install qrbank

yarn

yarn add qrbank

List name bank


  ABBANK = 'abbank',
  ACB = 'acb',
  AGRIBANK = 'agribank',
  BAC_A_BANK = 'bacabank',
  BAOVIET_BANK = 'baoviet',
  BANVIET = 'banviet',
  BIDC = 'bidc',
  BIDV = 'bidv',
  CAKE = 'cake',
  CBBANK = 'cbbank',
  CIMB = 'cimb',
  COOP_BANK = 'coopbank',
  DBS_BANK = 'dbsbank',
  DONG_A_BANK = 'dongabank',
  EXIMBANK = 'eximbank',
  GPBANK = 'gpbank',
  HDBANK = 'hdbank',
  HONGLEONG_BANK = 'hongleongbank',
  HSBC = 'hsbc',
  IBK_HCM = 'ibkhcm',
  IBK_HN = 'ibkhn',
  INDOVINA_BANK = 'indovinabank',
  KASIKORN_BANK = 'kasikorn',
  KIENLONG_BANK = 'kienlongbank',
  KOOKMIN_BANK_HCM = 'kookminhcm',
  KOOKMIN_BANK_HN = 'kookminhn',
  LIENVIETPOST_BANK = 'lienvietpostbank',
  MBBANK = 'mbbank',
  MSB = 'msb',
  NAM_A_BANK = 'namabank',
  NCB = 'ncb',
  NONGHYUP_BANK_HN = 'nonghyup',
  OCB = 'ocb',
  OCEANBANK = 'oceanbank',
  PGBANK = 'pgbank',
  PUBLIC_BANK = 'publicbank',
  PVCOM_BANK = 'pvcombank',
  SACOMBANK = 'sacombank',
  SAIGONBANK = 'saigonbank',
  SCB = 'scb',
  SEA_BANK = 'seabank',
  SHB = 'shb',
  SHINHAN_BANK = 'shinhanbank',
  STANDARD_CHARTERED_BANK = 'standardcharteredbank',
  TECHCOMBANK = 'techcombank',
  TIMO = 'timo',
  TPBANK = 'tpbank',
  UBANK = 'ubank',
  UNITED_OVERSEAS_BANK = 'uob',
  VIB = 'vib',
  VIET_A_BANK = 'vietabank',
  VIET_BANK = 'vietbank',
  VIETCOMBANK = 'vietcombank',
  VIETINBANK = 'vietinbank',
  VPBANK = 'vpbank',
  VRB = 'vrb',
  WOORI_BANK = 'wooribank',


Để lấy bin bank cho trường bankBin chúng ta lấy thông tin bank ở trên BankData.namebank.bin
 Ví dụ:
  bankBin: BankData.acb.bin, //acb
  bankBin: BankData.vietinbank.bin, //vietinbank
  bankBin: BankData.vietcombank.bin, //vietcombank

Để lấy tên ngân hàng BankData.namebank.name
 Ví dụ:
  BankData.acb.name, //Ngân hàng TMCP Á Châu
  BankData.vietinbank.name, //Ngân hàng TMCP Công thương Việt Nam
  BankData.vietcombank.name, //Ngân hàng TMCP Ngoại Thương Việt Nam

Để lấy tên ngắn ngân hàng BankData.namebank.shortName
 Ví dụ:
  BankData.acb.shortName, //ACB
  BankData.vietinbank.shortName, //VietinBank
  BankData.vietcombank.shortName, //Vietcombank

Để lấy SwiftCode ngân hàng BankData.namebank.swiftCode
 Ví dụ:
  BankData.acb.swiftCode, //ASCBVNVX
  BankData.vietinbank.swiftCode, //ICBVVNVX
  BankData.vietcombank.swiftCode, //BFTVVNVX

Usage - Lấy Link QR IMG

//Nextjs: src/app/index.js

"use client";
import Image from "next/image";
import styles from "./page.module.css";
import { QRBank, BankData } from "qrbank";
import { useState } from "react";

export default function Home() {
  const [qrCode, setQrCode] = useState("");

  const qrbank = QRBank.initQRBank({
    bankBin: BankData.vietcombank.bin, //BIN ngân hàng Vietcombank
    bankNumber: "123456789", //Số tài khoản chủ thẻ
    amount: "100000", //Số tiền chuyển khoản
    purpose: "NAP1234 100000", //Nội dung chuyển khoản
  });

  qrbank.generateQRCode().then((qrCode) => {
    setQrCode(qrCode);
    console.log(qrCode); // Đây là URL hình ảnh QR code
  });

  return (
    <main className={styles.main}>
      {qrCode && <Image src={qrCode} alt="QR Code" width={200} height={200} />}
    </main>
  );
}

Nodejs - Lấy Link QR IMG

//Nodejs Example

app.post("/generate-qr", async (req, res) => {
  const { userId, amount, accountNumber } = req.body;

  try {
    const qrbank = QRBank.initQRBank({
      bankBin: BankData.acb.bin, // Mã BIN của ngân hàng (ví dụ ACB) - String
      bankNumber: accountNumber, // Số tài khoản - String
      amount: amount, // Số tiền cần chuyển - String
      purpose: `NAP TIEN ${userId}`, // Nội dung chuyển tiền - String
    });

    // Tạo mã QR từ thông tin trên
    const qrCode = await qrbank.generateQRCode();

    // Trả về URL hoặc dữ liệu QR code cho client
    res.json({ qrCode });
  } catch (error) {
    console.error("Failed to generate QR code:", error);
    res.status(500).json({ error: "Failed to generate QR code" });
  }
});

//Nextjs Example

("use client");
import Image from "next/image";
import styles from "./page.module.css";
import { useState } from "react";
import axios from "axios";

export default function Home() {
  const [qrCode, setQrCode] = useState("");
  const [iduser, setIDUser] = useState("");
  const [rawAmount, setRawAmount] = useState("");
  const [accountNumber, setAccountNumber] = useState("");

  const handleButton = async () => {
    try {
      const response = await axios.post(
        `${process.env.NEXT_PUBLIC_SERVER_URL}/generate-qr`,
        {
          userId: iduser,
          amount: rawAmount.toString(),
          accountNumber,
        }
      );
      setQrCode(response.data.qrCode);
    } catch (error) {
      console.error("Error generating QR code:", error);
    }
  };

  return (
    <main className={styles.main}>
      {/* Render form for input fields */}
      <input
        type="text"
        placeholder="ID Game"
        value={iduser}
        onChange={(e) => setIDUser(e.target.value)}
      />
      <input
        type="number"
        placeholder="Amount"
        value={rawAmount}
        onChange={(e) => setRawAmount(e.target.value)}
      />
      <input
        type="text"
        placeholder="Account Number"
        value={accountNumber}
        onChange={(e) => setAccountNumber(e.target.value)}
      />
      <button onClick={handleButton}>Nạp tiền</button>

      {/* Show QR Code if available */}
      {qrCode && <Image src={qrCode} alt="QR Code" width={200} height={200} />}
    </main>
  );
}

Package detail

qrbank

readme