Does this poll for status updates automatically?

No. It's a pure display component. Poll your backend or listen for a webhook-driven update yourself, then re-render with the new status prop.

How do I show what the user submitted?

Pass submittedFields as an array of { label, value } pairs, for example a VAT ID or a bank account's last four digits.

What's the difference between restricted and the error state?

restricted is a soft note shown during a pending review, telling the user some features are limited for now. The error state is a full status change for a review that actually failed.

Can I customize the retry action for a failed verification?

Yes, set retryLabel and retryHref. The button only appears when status is "error".

Is there a default estimated time?

No, estimatedTime is optional and only rendered when you pass it. Leave it out if you don't have a reliable estimate to show.

Billing Pending Verification

A status card for administrative billing delays, like a new tax ID or a bank account change waiting on manual review. It shows what was submitted, how long the review is expected to take, and whether any features are restricted in the meantime. Passing status set to "error" swaps the whole card into a failure state with a reason and an upload-again action.

By Staaarter Team

Billing

Updated June 9, 2026

Docs

Live preview

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-pending-verification.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing92.tsx instead.

Usage

The file also exports billing92Demo, 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 { Billing92, billing92Demo } from "@/components/blocks/billing/billing92";

export default function Page() {
  return <Billing92 {...billing92Demo} />;
}

Props

Prop	Type	Default	Description
title	string	none	Heading text. Defaults to "Verification pending" or "Verification failed" based on status.
description	string	none	One-line explanation of what's being verified.
status	"pending" \| "error"	"pending"	Switches the whole card between its in-review and failed layouts.
submittedFields	SubmittedField[]	[]	Label/value pairs summarizing what the user submitted, e.g. a VAT ID.
estimatedTime	string	none	Expected review turnaround, shown only when status is "pending".
restricted	boolean	false	When true and status is "pending", shows a note that some features are limited until the review completes.
errorReason	string	none	Explanation shown when status is "error", e.g. why a document was rejected.
retryLabel	string	"Upload again"	Label for the retry button shown in the error state.
retryHref	string	"#"	Link target for the retry button.
className	string	none	Extra classes for the outer card.

Types

interface SubmittedField {
  label: string;
  value: string;
}

Behavior notes

status is the single switch between the two layouts: pending shows a pulsing clock icon, an amber "In review" badge, and an optional estimated-time line; error shows a static warning icon, a destructive "Action needed" badge, the errorReason text, and a retry button.
submittedFields renders as a simple label/value list so the user can double-check what they sent without you building a separate summary component.
The restricted note only shows in the pending state; it's meant for cases where certain features are gated until the review finishes, not for a hard block on the whole account.
There's no polling or live update built in. Re-render the component with a new status prop when your backend reports a change.

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.