GitHub EN Support

THE VIETQR PLAYGROUND

A few details. Your QR.

Explore the components, try a layout, then take the code into your app.

Integration guide

Payment details

Try an example or enter your own details.

QR layout

Live preview

Vietcombank

Account name

NGUYEN NGOC A

Account number

1122334455

Amount

₫50,000

Change the details to update the QR.

Powered by @viet-qr/react

Matching QR code

// Place your logo at public/vietqr-logo.svg.
import { CompactCard } from '@viet-qr/templates/react';
import '@viet-qr/templates/styles.css';

export function PaymentQR() {
  return (
    <CompactCard
      bankId={"VCB"}
      accountNo={"1122334455"}
      accountName={"NGUYEN NGOC A"}
      amount={50000}
      content={"Thanh toan don hang"}
      size={240}
      renderAs={"svg"}
      theme={"light"}
      locale={"en"}
      imageSettings={{"src":"/vietqr-logo.svg","width":40,"height":40,"excavate":false}}
    />
  );
}

The prefilled account is sample data. Do not send money to it. Downloads contain the QR image, without the card text.