Billing Payout Destination Form

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, input, label dependencies and any missing npm packages, and installs them straight into your project.

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

Usage

The file also exports billing89Demo, 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 { Billing89, billing89Demo } from "@/components/blocks/billing/billing89";

export default function Page() {
  return <Billing89 {...billing89Demo} />;
}

Props

Behavior notes

• Switching between Bank account and PayPal swaps the visible fields entirely; bank details and the PayPal email are never both shown or required at once.
• Submitting with any required field empty sets a local "attempted" flag that marks the missing inputs aria-invalid and shows a single inline error message, without calling any submit logic.
• A successful submit is simulated with a setTimeout: the button shows a spinner and "Saving" for about 900ms, then the whole form is replaced by a saved confirmation state. There's no network call.
• The tax ID field renders as a password input by default; a toggle button switches it to plain text and back, with the icon and aria-label reflecting the current state.
• There's no prop or callback to report the submitted values to a parent component; wire your own onSubmit handling by replacing the component's internal handleSubmit with a real API call.

Frequently asked questions