shadcn.io is not affiliated with official shadcn/ui
Stripe Connect Status Billing Block for Ark UI
A marketplace's payments account: three capabilities (cards, payouts, transfers) with the requirement that blocks each, deadlines worked out, and fields that turn payouts on when submitted.
Installation
Overview
Show a seller or a platform what their payments account can do, with this account status section for React with Ark UI. A hairline frame with a plus mark on each corner, ruled by Guides, opens with the processor in text (Stripe, with a two-letter tile) and the account id with its middle hidden. Three capability rows (accept card payments, receive payouts, transfers) each carry an outline Badge that says Enabled, Restricted or Not requested, in your foreground color, and one line on what is blocking it. A band of requirements lists the business address and tax ID with their deadline ("Due 24 Oct, 9 days left", worked out from a fixed day) and the bank account already verified. Each open requirement has an Input with its own check, and the Shine Button submits what you filled in: once the address and the tax ID are in, payouts turn on, and transfers with them if you requested them. For marketplaces, platforms and anything that pays other people out.
FAQ
How do I change the capabilities, the deadline and the checks?
Edit DUE and AS_OF (the days left are worked out from them), the capability rows, and the two checks, addressProblem and taxProblem. Which requirement blocks which capability is in payoutsOf and transfersOf: payouts need both fields, and transfers need a request and working payouts.
What does submitting do?
It checks only the fields that have something in them, shows each problem under its field and moves focus to the first. A valid field turns to Submitted and locks. When both the address and the tax ID are in, payouts become Enabled and the status line says so. Transfers read Not requested until you press Request, then Restricted until payouts work, then Enabled.
Is this connected to Stripe?
No. Stripe is named in text, with a lettermark tile you can replace with a logo you have the rights to use. The account id is made up and masked, and nothing is submitted. To wire it for real, read the account's capabilities and requirements from your provider's account API and send the fields to it from submit.
Where do the days left come from?
From two typed days, never from the clock, so the page reads the same on every load. Show the real due date from your account object and work the days left out on the client after mount.