Crypto Wallet QR Payment Card

A modern and responsive crypto payment card featuring a dynamically generated QR code, a copy-to-clipboard wallet address, and a network safety warning. Built using pure HTML, CSS, and JavaScript, this UI provides a clean way to display a USDT TRC20 wallet address, encourage quick scanning, and prevent user mistakes through a clear warning component.

Nov 19, 2025 By Valon Tahiri

<div class="wallet-card" class="site-card">
  <div class="qr-section">
    <div class="qr-container">
      <img id="qrImageUSDT" src="https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=TE7TyJcfcP4iugJeekF3Eqmp7BnPzdohZT" alt="QR Code" class="qr-code">
    </div>
    <p class="qr-label">Scan to pay</p>
  </div>
  <div class="address-section">
    <div class="address-row">
      <span id="walletAddressUSDT" class="wallet-address">TE7TyJcfcP4iugJeekF3Eqmp7BnPzdohZT</span>
      <button id="copyBtnUSDT" class="copy-button" onclick="copyWalletUSDT()">Copy</button>
    </div>
    <p class="network-label" id="networkLabelUSDT">TRON Network</p>
  </div>
</div>
<div class="warning-card">
  <div class="warning-icon">⚠️</div>
  <div class="warning-content">
    <h3>Important</h3>
    <p id="warningTextUSDT">Send only <strong>USDT</strong> on the <strong>TRC20</strong> network.</p>
    <p>Double-check the address and network. Funds sent to the wrong address or network cannot be recovered.</p>
  </div>
</div>

<style>
  :root{--bg-primary:#ffffff;--bg-secondary:#f8fafc;--card-bg:#ffffff;--text-primary:#0f172a;--text-secondary:#64748b;--accent-primary:#c34b9a;--accent-success:#10b981;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--radius-sm:8px;--radius-md:12px;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:20px;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
  .payment-header{text-align:center;font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-xl) 0}
  .wallet-card{background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center;max-width:320px;margin-left:auto;margin-right:auto}
  .qr-section{margin-bottom:var(--spacing-lg)}
  .qr-container{width:180px;height:180px;margin:0 auto var(--spacing-sm) auto;padding:var(--spacing-sm);background:#f1f5f9;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}
  .qr-code{width:160px;height:160px;border-radius:4px}
  .qr-label{font-size:.875rem;color:var(--text-secondary);margin:0}
  .address-section{padding-top:var(--spacing-md);border-top:1px solid var(--border-color)}
  .address-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm);gap:var(--spacing-sm)}
  .wallet-address{flex:1;font-size:.875rem;font-family:'Courier New',monospace;color:var(--text-primary);word-break:break-all;text-align:left;padding:var(--spacing-xs) var(--spacing-sm);background:#f8fafc;border-radius:var(--radius-sm);border:1px solid var(--border-color);min-height:20px}
  .copy-button{padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;font-weight:500;background:var(--accent-primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s;white-space:nowrap;min-width:60px}
  .copy-button:hover:not(.copied){background:#a9568d}
  .copy-button.copied{background:var(--accent-success)}
  .copy-button.copied:hover{background:#a9568d}
  .network-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;font-weight:500}
  .warning-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--spacing-lg);max-width:320px;margin:0 auto;display:flex;gap:var(--spacing-md);align-items:flex-start}
  .warning-icon{font-size:1.5rem;color:#f59e0b;flex-shrink:0;margin-top:2px}
  .warning-content h3{margin:0 0 var(--spacing-sm) 0;color:var(--text-primary);font-size:1rem;font-weight:600}
  .warning-content p{margin:0 0 var(--spacing-sm) 0;font-size:.875rem;color:var(--text-primary)}
  .warning-content strong{color:var(--accent-primary)}
  @media(max-width:480px){.wallet-card,.warning-card{padding:var(--spacing-lg);max-width:none}.qr-container{width:160px;height:160px}.qr-code{width:140px;height:140px}.address-row{flex-direction:column;align-items:stretch;gap:var(--spacing-xs)}.copy-button{align-self:center;order:-1}.wallet-address{text-align:center}}
</style>

<script>
  const usdtAddress = "TE7TyJcfcP4iugJeekF3Eqmp7BnPzdohZT";
  document.getElementById("walletAddressUSDT").textContent = usdtAddress;
  document.getElementById("qrImageUSDT").src = `https://api.qrserver.com/v1/create-qr-code/?size=160x160&data=${encodeURIComponent(usdtAddress)}`;
  
  function copyWalletUSDT() {
    const btn = document.getElementById("copyBtnUSDT");
    const orig = btn.textContent;
    navigator.clipboard.writeText(usdtAddress).then(() => {
      btn.textContent = "Copied!"; btn.classList.add("copied");
      setTimeout(() => { btn.textContent = orig; btn.classList.remove("copied"); }, 2000);
    }).catch(() => {
      btn.textContent = "Error";
      setTimeout(() => { btn.textContent = orig; }, 2000);
    });
  }
</script>

Crypto Wallet QR Payment Card

Leave a comment