Balances

Part ofEmbedded Banking↗

Shows the organization's embedded bank account balances, up to a configurable number of rows, with a total when there are several accounts and an optional View all accounts link.

Quick Start

import { BalancesWidget } from '@tesouro/embedded-components-react';

export function AccountsSummary() {
  return (
    <BalancesWidget
      baseUrl="https://api.example.com"
      widgetToken="wt_live_abc123"
      organizationId="org_xyz"
      maxAccounts={5}
      onBalanceRowClick={(accountId) => router.push(`/accounts/${accountId}`)}
      onViewAllAccountsClick={() => router.push('/accounts')}
    />
  );
}

All widget props are optional. The widget reads no URL or router; you own navigation via the two callbacks.

Behaviour

• The total balance appears only when more than one account exists, all accounts have loaded, and the token grants bank_account:read:org. Write scopes aren't needed.
• View all accounts appears only when you pass onViewAllAccountsClick and there are more than maxAccounts accounts.
• Rows are clickable only when you pass onBalanceRowClick.
• A failed load shows an error with Retry. An org with no accounts shows No balances found.

Props

Widget props

Examples

Custom labels (i18n)

<BalancesWidget
  labels={{
    widgetTitle: 'Cuentas',
    noBalancesFound: 'No se encontraron saldos',
    loadErrorRetry: 'Reintentar',
  }}
/>

See the exported BalancesWidgetLabels type for every key.

TypeScript

import type {
  BalancesWidgetProps,
  BalancesWidgetLabels,
} from '@tesouro/embedded-components-react';