VietQR（TypeScript，适用于 React / React Native）

• 支持从银行数据（accountName、accountNumber、amount、memo 等）生成多模板的二维码（Base64）。
• 支持直接生成图片链接（PNG/JPG）以便在 Web 端展示或下载。
• 完整 TypeScript 类型定义，接口更安全、提示更友好。

安装

npm install @scaneats/react-native-vietqr

快速开始

import { VietQR } from '@scaneats/react-native-vietqr';

const client = new VietQR({
  clientID: 'your-client-id',
  apiKey: 'your-api-key',
});

const banks = await client.getBanks();
const templates = await client.getTemplate();

const qr = await client.genQRCodeBase64({
  bank: '970415',
  accountName: 'QUY VAC XIN PHONG CHONG COVID',
  accountNumber: '113366668888',
  amount: 79000,
  memo: 'Ung Ho Quy Vac Xin',
  template: 'qr_only',
});

console.log(qr.data.qrDataURL);

在 React 使用

import { VietQR } from '@scaneats/react-native-vietqr';
import { useEffect, useState } from 'react';

export default function QRDemo() {
  const [src, setSrc] = useState<string>('');
  useEffect(() => {
    const client = new VietQR({ clientID: 'your-client-id', apiKey: 'your-api-key' });
    client
      .genQRCodeBase64({
        bank: '970415',
        accountName: 'QUY VAC XIN PHONG CHONG COVID',
        accountNumber: '113366668888',
        amount: 79000,
        memo: 'Ung Ho Quy Vac Xin',
        template: 'qr_only',
      })
      .then((res) => setSrc(res.data.qrDataURL));
  }, []);
  return src ? <img alt="vietqr" src={src} /> : null;
}

在 React Native 使用

import { VietQR } from '@scaneats/react-native-vietqr';
import React, { useEffect, useState } from 'react';
import { Image, View } from 'react-native';

export default function QRDemo() {
  const [uri, setUri] = useState<string>('');
  useEffect(() => {
    const client = new VietQR({ clientID: 'your-client-id', apiKey: 'your-api-key' });
    client
      .genQRCodeBase64({
        bank: '970415',
        accountName: 'QUY VAC XIN PHONG CHONG COVID',
        accountNumber: '113366668888',
        amount: 79000,
        memo: 'Ung Ho Quy Vac Xin',
        template: 'qr_only',
      })
      .then((res) => setUri(res.data.qrDataURL));
  }, []);
  return (
    <View>
      {uri ? <Image source={{ uri }} style={{ width: 256, height: 256 }} /> : null}
    </View>
  );
}

快速链接（PNG/JPG）

const client = new VietQR({ clientID: 'your-client-id', apiKey: 'your-api-key' });
const link = client.genQuickLink({
  bank: '970415',
  accountName: 'QUY VAC XIN PHONG CHONG COVID',
  accountNumber: '113366668888',
  amount: 79000,
  memo: 'Ung Ho Quy Vac Xin',
  template: 'compact',
  media: '.jpg',
});
console.log(link);

API 概览

• getBanks(): Promise<{ code; desc; data: BankItem[] }>
• getTemplate(): Promise<{ code; desc; data: TemplateItem[] }>
• genQRCodeBase64(payload): Promise<{ code; desc; data: { qrDataURL } }>
• genQRCodeBase64V1(payload): Promise<{ code; desc; data: { qrDataURL } }>
• genQuickLink(payload): string
• createPaymentGateway(payload): Promise<any>

主要参数（部分）

• bank: 银行 bin（可从 getBanks 返回的 data[].bin 获取）
• accountName: 账户名
• accountNumber: 账号
• amount: 金额（字符串或数字）
• memo: 转账备注
• template: 模板名（如 qr_only、compact 等）
• media: 图片格式（.jpg 或 .png）

示例代码

• TypeScript 示例位于 example/qrcode.ts 与 example/quicklink.ts。

许可

MIT License