Billing Statement Descriptor
A configuration block for setting how charges appear on a customer's bank or card statement. It sanitizes input to the characters processors actually allow, counts down against a configurable limit, and renders a live preview of the merchant-name-plus-city line most banking apps show. Built for billing settings pages where a clear descriptor is the difference between a recognized charge and a chargeback.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its input, label, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-statement-descriptor.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing127.tsx instead.
Usage
The file also exports billing127Demo, 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 { Billing127, billing127Demo } from "@/components/blocks/billing/billing127"; export default function Page() { return <Billing127 {...billing127Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Statement descriptor" | Heading shown above the field. |
| description | string | Provided default copy | One-line explanation shown under the heading. |
| label | string | "Descriptor" | Label for the input field. |
| initialValue | string | none | Starting descriptor text, uppercased and truncated to maxLength on mount. |
| merchantCity | string | "SAN FRANCISCO" | City shown after the descriptor in the bank statement preview. |
| maxLength | number | 22 | Maximum descriptor length, matching the common card-network limit. |
| saveLabel | string | "Save descriptor" | Label on the save button before it's clicked. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- Typing uppercases the value and strips any character outside A-Z, 0-9, spaces, and . * -, matching what most card networks accept.
- When a keystroke gets stripped, the helper text under the field switches to a message naming the removed characters instead of the default hint.
- The character counter turns amber inside 4 characters of the limit and switches to the destructive color once the limit is reached.
- The bank statement preview updates on every keystroke, showing the descriptor plus merchantCity in the merchant-name-star-city format used by most banking apps; it falls back to "YOUR BUSINESS" when the field is empty.
- Clicking save shows a checkmark and "Saved" for 2 seconds, then reverts to the default label; this is local UI feedback only, no network call is made.
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.