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/vue

Matching QR code

<script setup>
// Place your logo at public/vietqr-logo.svg.
import { CompactCard } from '@viet-qr/templates/vue';
import '@viet-qr/templates/styles.css';
</script>

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

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