Billing Transaction ID Copy
A focused billing support block showing a transaction's amount, date, and status alongside its full ID in a monospace field with a one-click copy button. Meant for the moment a customer needs to hand a Stripe charge or payment intent ID to support, so the number is easy to find and copy without hunting through an invoice PDF.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-transaction-id-copy.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing142.tsx instead.
Usage
The file also exports billing142Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing142, billing142Demo } from "@/components/blocks/billing/billing142"; export default function Page() { return <Billing142 {...billing142Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Transaction details" | Heading shown at the top of the card. |
| transactionLabel | string | "Transaction ID" | Label above the ID field, e.g. "Payment Intent ID" or "Charge ID". |
| transactionId | string | none | The ID value shown in the monospace field and copied to the clipboard. |
| amount | string | none | Optional formatted amount shown above the ID field. |
| date | string | none | Optional formatted date shown next to the amount. |
| status | "succeeded" | "pending" | "failed" | none | Optional status badge shown in the header. |
| supportHref | string | none | Link target for the support line; the line only renders when this is set. |
| supportLabel | string | "Contact support" | Link text for the support line. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- The copy button calls navigator.clipboard.writeText with the raw transactionId, swaps to a check icon, and shows an inline "Copied to clipboard" message for 2 seconds, matching the pattern used on the bank-transfer block elsewhere in this category.
- If clipboard access is denied or unavailable, the copy silently no-ops and the button stays in its default state so the user can still select the text manually.
- The copied confirmation lives in a role="status" aria-live="polite" region so screen reader users hear it without focus moving.
- The amount/date row and the support link only render when their respective props are passed.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.