Billing Bank Transfer
A bank transfer instruction block for invoices paid by wire or ACH. Shows the amount due, a status badge, and a list of bank details (account number, routing/SWIFT, IBAN) each with a one-click copy button, plus a generated reference code and a short numbered list of next steps. Built for B2B billing portals and high-value invoice payments where a card isn't the preferred rail.
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-bank-transfer.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing25.tsx instead.
Usage
The file also exports billing25Demo, 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 { Billing25, billing25Demo } from "@/components/blocks/billing/billing25"; export default function Page() { return <Billing25 {...billing25Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Pay by bank transfer" | Heading in the card header. |
| description | string | none | Optional one-line note under the heading. |
| status | "awaiting_transfer" | "processing" | "received" | "awaiting_transfer" | Drives the status badge in the header. |
| amountDue | string | none | Amount shown in the highlighted total row, as a pre-formatted string. |
| dueDate | string | none | Optional due date shown next to the amount. |
| referenceCode | string | none | Payment reference the customer should include in their transfer memo. Rendered as its own copyable field. |
| fields | BankDetailField[] | none | Bank detail rows (account holder, account number, SWIFT, IBAN, etc), rendered above the reference code. |
| instructions | string[] | none | Optional numbered list of next steps shown below the details. |
| className | string | none | Extra classes for the outer container. |
Types
interface BankDetailField { label: string; value: string; /** Whether this field gets a copy button. Defaults to true. */ copyable?: boolean; }
Behavior notes
- Every field, plus the referenceCode, gets its own copy button by default; clicking it writes that field's value to the clipboard via navigator.clipboard and swaps the button icon to a checkmark for 2 seconds.
- If the Clipboard API throws (permission denied, unsupported browser), the copy click is a silent no-op and the button stays in its default state so the user can select the text manually instead.
- Only one field shows the 'copied' state at a time, tracked by the field's label in a single piece of state, not a per-field boolean array.
- Set copyable: false on any field (for example a static bank name) to hide its copy button while still listing it.
- The reference code is appended to the rendered field list internally, you don't need to duplicate it inside the fields array.
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.