Components/Boleto Display

Boleto Display

Payment-slip presenter: linha digitável grouped the way banks print it, one-tap copy for the copia-e-cola flow, amount and due date. Completes the Brazilian payment trio next to Pix and cards.


R$ 260,00Vencimento 10/07/2026

34191.79001 01043.510047 91020.150008 2 91070026000123

Installation

npx @ajax-ui/cli add boleto-display

Props

  • line - linha digitável, 47 (bank slip) or 48 (utility) digits; masks are stripped. Grouped 5.5 / 5.6 / 5.6 / 1 / 14 for 47-digit slips.
  • amountCents - amount in minor units, formatted via the shared formatters.
  • dueDate - rendered as-is; format upstream.
  • showCopy / showBarcode (default true) - copy button and decorative barcode strip.
  • onCopy(digits) - fires after the raw digits hit the clipboard.

Scope

Purely presentational. Issuing the boleto, registering it with the bank, and generating the scannable ITF barcode are your PSP's job - the strip shown here is decorative (aria-hidden) and derived deterministically from the digits. The copy button always copies the raw digits, which is what banking apps expect in the copia-e-cola field.