Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Transaction ID Copy Billing Block for React

Paste a line from a bank statement and the page matches it to one of three charges by id fragment, or by amount and day, marks the match and copies its transaction ID.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help someone find the charge they don't recognise, with this transaction ID copy section for React with Base UI. A hairline frame with a plus mark on each corner holds a form band and a result band. The form band has one Input in a Field, Statement line, with a hint that the text stays in the page, a ghost Use an example line button and an outline Match it button. Under it, Your charges lists three Benchloft charges, a coworking booking app's desk pass and meeting room, each with what it was, its day, its id in monospace, its amount and a Copy Button. A pure function compares the line you pasted with each charge: it matches when the line holds the charge's id fragment, or its amount and its day written as OCT 12 or 12 OCT. The match gets a Matches Badge; no match, or more than one, says so in words under the field. The foot holds a polite status and Copy transaction ID, the only Shine Button, which stays aria-disabled until there is exactly one match. For billing support, account pages and anywhere a customer asks what a charge was.

FAQ

How exactly does a line match a charge?

The line is made upper case with single spaces, then fits asks two things of each charge: does the line contain the first eight characters of its id (for example PI_3P4X2), or does it contain both its amount to the cent (49.00) and its day (OCT 12 or 12 OCT). One match marks the charge; none or several leave the button disabled and say why. Adjust the helpers to the way your bank and your payment provider format a line.

How do I fill it with my charges?

Edit CHARGES: each has an id, an amount in cents, an ISO date and a what. Statement descriptors differ by processor and bank, so keep the descriptor prefix out of the matching and rely on the id fragment, the amount and the day.

What is real in the demo?

Copying. The Copy transaction ID button and each row's copy button write the id to the clipboard, and a polite message says what was copied or that the browser refused. The charges are typed in this file and the statement line is read in the page: nothing is uploaded or stored.

Why is the main button not truly disabled?

So keyboard and screen reader users can still reach it and hear why nothing happened. It is marked aria-disabled until there is a match, and pressing it then says to paste a line and match a charge first.

When does a screen reader hear the result?

When you submit the form with Enter or Match it, copy an id, or press the example button. The result is also written under the field as you type, but it is not announced on every keystroke, which would repeat the same "No charge matches" message.

How does it look on a phone?

Every row stacks its name, day and id over its amount and copy button, the form is full width, and the foot with the status and the main button stays pinned to the bottom of the panel.

All 167 billing blocks