Settings

Settings payouts bank manage

The Bank details screen behind Payouts, presenting a labelled form of account holder, bank name, and masked account and routing numbers.

Open in Storybook

Available

Ports as-is

Examples

Rendered live from the maintained Storybook story. Lantern stores only the story id and embeds Storybook rather than duplicating the component or its demo.

Settings payouts bank manage

Rendered live from Storybook

Open

Storybook must be running for this to load — bun run start:storybook from the monorepo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Props

The component's public API, read from its TypeScript source. Descriptions come from TSDoc on the prop, so this table cannot drift from the component.

Prop	Type	Default	Description
`onBack`*	`() => void`	—	Leaves the screen.
`bankDetails`	`PayoutBankDetails`	`EMPTY_PAYOUT_BANK_DETAILS`	Values shown in the fields. Defaults to empty display values.
`onUpdate`	`() => void`	—	Fired by "Update". Carries no field values — see the note below.
`countries`	`PayoutBankCountry[]`	`PAYOUT_BANK_COUNTRIES`	Country options. Defaults to `PAYOUT_BANK_COUNTRIES`.
`onCountryChange`	`(country: string) => void`	—	Selection callback for the country control.
`canUpdate`	`boolean`	`false`	Enables the "Update" button. Supplied rather than computed — this mock runs no validation, so a derived enabled state would imply a check that is not happening.
`revealAccountNumber`	`boolean`	`false`	Renders the account number unmasked, for a static "focused" story.
`revealRoutingNumber`	`boolean`	`false`	Renders the routing number unmasked, for a static "focused" story.
`className`	`string`	—	Undocumented — add TSDoc to the prop in the library.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/settings/SettingsPayoutsBankManage.tsx
Portability: Copies across unchanged — only the utils import path moves.
Notes: Use it as the drill-in screen from Payouts for reviewing bank details on file, with account and routing numbers masked to their last four digits by default. Every field is read-only with autocomplete disabled and there is no validation or submission logic built in, so the Update button's enabled state must be supplied explicitly via a prop.