Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Billing blocks

Pro

Payout Destination Form Billing Block for Ark UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Collect where a seller is paid, with this payout destination form for React 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.

How are mistakes reported?

Pressing Save with problems writes a message under each field in text with an icon, says how many fields need a look and moves focus to the first. Messages clear as soon as you edit. The routing note under the field reports progress and the check result as you type.

How does it look on a phone?

The fields stack, the two account number fields become two rows, the preview follows the form and the foot with Save and Clear is pinned to the bottom of the screen.

All 167 billing blocks