Billing Tax ID Verification
A tax identification number field, VAT, GST, EIN, or similar, with a Verify button that shows a loading state and then either a verified result with the matched business name or an invalid-format error. Meant for checkout and billing settings screens where a business customer needs to attach a tax ID before it's applied to future invoices.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its input, label, badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-tax-id-verification.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing139.tsx instead.
Usage
The file also exports billing139Demo, 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 { Billing139, billing139Demo } from "@/components/blocks/billing/billing139"; export default function Page() { return <Billing139 {...billing139Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Tax ID verification" | Heading shown above the input. |
| description | string | none | Optional supporting text under the heading. |
| taxIdType | string | "VAT" | Short label shown in the top-right badge, e.g. VAT, GST, EIN. |
| label | string | `${taxIdType} number` | Field label; falls back to a string built from taxIdType. |
| placeholder | string | "e.g. DE123456789" | Input placeholder text. |
| helperText | string | none | Optional hint shown under the input before the user verifies, replaced by the result once one exists. |
| defaultValue | string | "" | Initial value of the tax ID input. |
| verifiedBusinessName | string | none | Business name shown on a successful verification, as if returned by a lookup service. |
| minLength | number | 8 | Minimum digit count (spaces stripped) the demo verification treats as a plausible format. |
| reverseChargeNote | string | "Reverse charge applies. Tax will not be added to your invoices." | Note shown under the business name once verified. |
| className | string | none | Extra classes for the outer container. |
Behavior notes
- Clicking Verify sets a 1.1s simulated loading state, then marks the ID verified or invalid based on whether the stripped input meets minLength. There's no real VIES or Stripe call; wire handleVerify's timeout to your own lookup endpoint.
- Editing the input after a result resets the status back to idle, so a corrected ID has to be re-verified.
- The Verify button is disabled while the input is empty or a check is already in flight.
- The status region uses aria-live="polite" and role="status" so screen reader users hear the verified or invalid result without needing to refocus the field.
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.