Billing Stripe Connect Status
A status card for platforms and marketplaces built on Stripe Connect. It shows a connected seller's account health at a glance, verified, pending, or restricted, alongside their payout schedule, next payout date and amount, and a checklist of outstanding verification requirements. A Complete setup link only appears while requirements remain, and an optional link out to the Stripe dashboard covers deeper account management.
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-stripe-connect-status.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing129.tsx instead.
Usage
The file also exports billing129Demo, 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 { Billing129, billing129Demo } from "@/components/blocks/billing/billing129"; export default function Page() { return <Billing129 {...billing129Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Payout account" | Heading shown above the account name. |
| accountName | string | none | Name of the connected business or seller. |
| accountStatus | "verified" | "pending" | "restricted" | none | Overall account health, drives the badge color and label. |
| restrictedReason | string | none | Shown in a warning banner when accountStatus is "restricted"; omitted otherwise. |
| payoutSchedule | string | none | Human-readable payout cadence, for example "Weekly, every Friday". |
| nextPayoutDate | string | none | Date of the next scheduled payout. |
| nextPayoutAmount | string | none | Formatted amount of the next scheduled payout. |
| requirements | ConnectRequirement[] | none | Verification checklist items, each marked complete or pending. |
| dashboardHref | string | none | Link to the external Stripe Express or standard dashboard; the button is omitted if not set. |
| setupHref | string | none | Link to the onboarding flow; the Complete setup button only renders when this is set and at least one requirement is pending. |
| className | string | none | Extra classes for the outer container. |
Types
interface ConnectRequirement { id: string; label: string; status: "complete" | "pending"; }
Behavior notes
- The status badge and its color come from a fixed 3-value map (verified, pending, restricted); extend STATUS_STYLES and STATUS_LABELS together to add a new status.
- The restricted warning banner only renders when accountStatus is "restricted" and restrictedReason is provided, so a restricted account without a reason still shows the badge but skips the banner.
- Requirement rows use a filled check icon for complete items and an outline circle for pending ones, with a count of remaining items shown next to the Verification heading.
- The Complete setup button only appears when there's at least one pending requirement and setupHref is set, so a fully verified account doesn't show a dead-end action.
- This is a read-only status display; it renders whatever accountStatus, requirements, and payout data you pass in and does not poll or refresh on its own.
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.