npm package: @scaneats/react-native-vietqr
Description: Support draw QR code from data bank ( accountName, amount, memo,....) with many templates, create link URL from QR code
Author: Casso
Latest version: 1.1.7

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

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

## 安装

```bash
npm install @scaneats/react-native-vietqr
```

## 快速开始

```ts
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 使用

```tsx
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 使用

```tsx
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）

```ts
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