QR Codes for Crypto Payments: Generate and Display Deposit Addresses

Why QR Codes Matter

Typing a 42-character Ethereum address is error-prone and frustrating on mobile. A QR code reduces the copy step to a single camera scan in most wallet apps (Trust Wallet, MetaMask Mobile, Binance app). Conversion rates improve measurably when you add QR codes to your checkout UI.

QR Code Format for BEP-20 USDT

The standard deep-link format that wallet apps recognize:

// Simple address (most compatible)
0x742d35Cc6634C0532925a3b8D4C2b3b2f5a1bEf

// EIP-681 format (includes amount hint)
ethereum:0x742d35Cc6634C0532925a3b8D4C2b3b2f5a1bEf@56?value=50e18

Use the simple address format for maximum compatibility across all wallet apps.

React Implementation

npm install qrcode.react

import { QRCodeSVG } from 'qrcode.react';

function DepositQR({ address, size = 200 }) {
  return (
    <div style={{ padding: 16, background: '#fff', borderRadius: 12 }}>
      <QRCodeSVG
        value={address}
        size={size}
        level="M"
        includeMargin={false}
      />
    </div>
  );
}

Vue 3 Implementation

npm install qrcode

import QRCode from 'qrcode';

const qrDataUrl = ref('');
onMounted(async () => {
  qrDataUrl.value = await QRCode.toDataURL(address, { width: 200, margin: 1 });
});

Plain HTML (No Framework)

<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
<div id="qr"></div>
<script>
  new QRCode(document.getElementById('qr'), {
    text: depositAddress,
    width: 200, height: 200,
  });
</script>