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; call `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`	`BankFieldLayout` (array)	field order	Ordered array of field names, with optional `{ inlineRow: [...] }` entries to render multiple fields on the same row.
`validate`	`(value: BankFieldValue) => string \| null`	none	Custom validator that fully replaces the built-in manual-field checks. Receives the plaintext manual fields, never the encrypted `BankElementValue` from events.
`fields`	see below	`{}`	Per-input customization.

Both bank modes are implicitly required.

`fieldLayout`

fieldLayout is an ordered array, not a string enum. Reorder manual-mode fields and group them into rows:

overflow.bank({
  mode: { lockTo: 'manual' },
  fieldLayout: [
    'accountType',
    { inlineRow: ['routingNumber', 'accountNumber'] },
    'confirmAccountNumber',
  ],
});

`fields` (manual mode)

`accountType`

Key	Type	Default
`label`	`string`	`'Account type'`
`placeholder`	`string`	none
`defaultValue`	`'checking' \| 'savings'`	`'checking'`
`hidden`	`boolean`	`false`
`disabled`	`boolean`	inherits
`id`	`string`	auto
`ariaLabel`	`string`	none

When hidden, the validator skips the account-type check. placeholder renders as a non-selectable prompt option at the top of the <select>; when a placeholder is set, defaultValue is ignored and the prompt is shown instead. Without a placeholder, defaultValue pre-selects 'checking' (or 'savings' if you override it).

`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'; manual: BankEncryptedValue }
  | { mode: 'plaid'; plaid: BankPlaidValue };

type BankEncryptedValue = {
  bankAccountType: 'checking' | 'savings';
  encryptedBankAccountNumber: string;
  encryptedBankRoutingNumber: string;
};

type BankPlaidValue = {
  publicToken: string;
  account: {
    id: string;
    last4: string;
    type?: 'checking' | 'savings';
  };
  institution: {
    id: string;
    name: string;
  };
};

Branch on value.mode, then read the nested manual or plaid payload. 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(): void — validates and emits onSubmit / onError. Control mode with mode.default / mode.lockTo (and update({ mode })).
bank.unmount()
bank.destroy()
bank.on(event, handler) — subscribe to events.

Encryption cache helper

Call overflow.invalidateBankFieldEncryptionCache() to force the next bank submit to re-encrypt with fresh keys (for example, after a long idle session). This is a top-level helper on the Overflow instance.

Get started

Elements

Options

Events

Theming

Guides

Factory

Options

`fieldLayout`

`fields` (manual mode)

`accountType`

`routingNumber`, `accountNumber`, `confirmAccountNumber`

Value

`FieldError.field` values

Events

Methods

Encryption cache helper

​Factory

​Options

​fieldLayout

​fields (manual mode)

​accountType

​routingNumber, accountNumber, confirmAccountNumber

​Value

​FieldError.field values

​Events

​Methods

​Encryption cache helper

Factory

Options

`fieldLayout`

`fields` (manual mode)

`accountType`

`routingNumber`, `accountNumber`, `confirmAccountNumber`

Value

`FieldError.field` values

Events

Methods

Encryption cache helper