Components/Pix QR

Pix QR

QR display with amount, countdown, and copy-and-paste code. Surfaces pending / paid / expired states.


Aguardando pagamento

Padaria do Bairro

R$ 31,50

Expira em 05:00

Pago

Padaria do Bairro

R$ 31,50

Installation

npx @ajax-ui/cli add pix-qr

Props

  • payload - the Brazilian "BR Code" copy-and-paste string. Optional; defaults to a sample value so the QR is never empty.
  • amount · currency "BRL" · locale "pt-BR".
  • expiresAt - a Date; the component runs a 1-second countdown until then.
  • status "pending" | "paid" | "expired".
  • recipient · qrSize (default 200px).
  • onCopy(payload) - fires on copy. The component falls back to navigator.clipboard.

QR generation

The QR is generated by a bundled dependency-free encoder (byte mode, error-correction level M, versions 1-13) - it renders the actual payload as a scannable code, up to 331 bytes. Longer payloads surface an inline error instead of a code that could never scan. No extra QR library is needed.