Bank reference

Factory

overflow.bank(options?: BankElementOptions): BankElement

Options

All keys are optional.

Key	Type	Default	Description
`mode.default`	`'plaid' \| 'manual'`	`'plaid'`	Which mode renders on mount when neither side is locked.
`mode.lockTo`	`'plaid' \| 'manual'`	none	Locks the shopper to one mode. The toggle button is hidden and programmatic mode switches are ignored.
`disabled`	`boolean`	`false`	Locks the manual-mode inputs and the mode toggle. Does not fully suppress fast-signin; unmount if you need that.
`readOnly`	`boolean`	`false`	Cascades to the three manual-mode text inputs. The account-type `<select>` ignores `readOnly` per browser semantics.
`id`	`string`	auto	DOM id on the host wrapper.
`ariaLabel`	`string`	none	Sets `aria-label` and `role="group"` on the host wrapper when supplied.
`locale`	`string`	Overflow instance locale	BCP-47 locale for labels.
`fieldLayout`	`'stacked' \| 'inline'`	`'stacked'`	Layout for the manual-mode inputs.
`fields`	see below	`{}`	Per-input customization.

bank does not accept a top-level required or validate. Both modes are implicitly required. See required for the exact behavior.

`fields` (manual mode)

`accountType`

Key	Type	Default
`label`	`string`	`'Account type'`
`hidden`	`boolean`	`false`
`disabled`	`boolean`	inherits
`id`	`string`	auto
`ariaLabel`	`string`	none

When hidden, the validator skips the account-type check. placeholder is not supported on the <select>.

`routingNumber`, `accountNumber`, `confirmAccountNumber`

Each accepts:

Key	Type	Default
`label`	`string`	field-specific default
`placeholder`	`string`	none
`disabled`	`boolean`	inherits
`autoFocus`	`boolean`	`false`
`id`	`string`	auto
`ariaLabel`	`string`	none

hidden is not supported on these three fields: they are interdependent and cannot be individually collapsed.

Value

The bank element emits a discriminated union on onSubmit keyed by mode. Manual-mode payloads carry encrypted account credentials; fast-signin (Plaid) payloads carry a linked-account token.

type BankElementValue =
  | {
      mode: 'manual';
      bankAccountType: 'checking' | 'savings';
      encryptedBankAccountNumber: string;
      encryptedBankRoutingNumber: string;
    }
  | BankPlaidValue;

type BankPlaidValue = {
  mode: 'plaid';
  publicToken: string;
  accountId: string;
  institutionName: string;
  accountLast4: string;
  accountType?: 'checking' | 'savings';
};

Forward the full envelope to your server verbatim. Do not attempt to unpack the encrypted* fields on the manual branch; they are decrypted server-side by Overflow.

`FieldError.field` values

'accountType', 'routingNumber', 'accountNumber', 'confirmAccountNumber', 'bank' (synthetic error when the shopper selects bank inside Checkout but never completes fast-signin).

Events

Every element event is supported. See Events overview.

Methods

bank.mount(selector)
bank.update(partialOptions)
bank.submit()
bank.unmount()
bank.destroy()
bank.on(event, handler)

Get started

Elements

Options

Events

Theming

Guides

Factory

Options

`fields` (manual mode)

`accountType`

`routingNumber`, `accountNumber`, `confirmAccountNumber`

Value

`FieldError.field` values

Events

Methods

​Factory

​Options

​fields (manual mode)

​accountType

​routingNumber, accountNumber, confirmAccountNumber

​Value

​FieldError.field values

​Events

​Methods

Factory

Options

`fields` (manual mode)

`accountType`

`routingNumber`, `accountNumber`, `confirmAccountNumber`

Value

`FieldError.field` values

Events

Methods