shadcn.io is not affiliated with official shadcn/ui
Payout Destination Form Billing Block for Solid
A payout account form with a routing number that checks itself against the ABA check digit and names the bank, an account number entered twice and masked, an account type and holder, and a preview of where payouts go.
Installation
Overview
Collect where a seller is paid, with this payout destination form for Solid with Ark UI. A Field takes the routing number and checks it as you type: nine digits, then the ABA check-digit sum with weights 3, 7 and 1, and a short list of fictional banks names the match ("Fernbrook Savings"). The account number is entered twice in masked Input fields that must match, the type is a pair of radio cards (checking or savings) and the holder is a name. A side cell previews the result, "Payouts go to Fernbrook Savings, checking ending 6031", and says the first payout follows two small test deposits. Problems are written next to the field and focus moves to the first one. The Shine Button, "Save payout account", sits in the foot with a Clear button; Guides draw the frame. For marketplaces, platforms and any product that pays out.
FAQ
What does the routing check verify?
That the nine digits pass the ABA test: multiply them by 3, 7, 1, 3, 7, 1, 3, 7, 1 and the sum is a multiple of ten. This catches a mistyped digit; it does not prove that the number belongs to a bank. The bank name comes from BANKS, a short typed list of fictional banks, and an unknown but valid number says so.
Which numbers work in the demo?
The "Fill in a sample" button fills a fictional account that passes every check. All three routing numbers in BANKS pass the test. Any other nine digits that sum correctly are accepted too, and none of them is a real account.
Are the account numbers hidden?
Yes: both fields are password-type inputs, and the preview shows only the last four digits. Pasting is allowed. Confirming the number is a typing check, so a mismatch is written next to the second field as soon as it differs.
What stays local, and how do I use this for real?
Nothing is stored or sent: Save writes "Saved in this demo" to the status line. In production, do not send bank details through your own form fields. Use your payment provider's hosted bank-account fields or its onboarding, which return a token and the last four digits, and keep only those. Keep the preview, the test-deposit note and the validation messages.