Balances

The balances component shows users their list of embedded accounts and the available balance in each. Tesouro displays the available balance — the most accurate balance, inclusive of the customer’s actual spending power. Pair it with the insights feed component on the same page for a complete banking dashboard view.

React

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

export default function DashboardPage() {
  return (
    <EmbeddedProvider
      userId={currentUser.id}
      userEmail={currentUser.email}
      widgetTokenRefreshUrl="/api/widget-token"
    >
      <BalancesWidget accountsPageUrl="/banking/accounts" />
    </EmbeddedProvider>
  );
}

BalancesWidget props

Prop	Required	Description
`accountsPageUrl`	No	URL to navigate to when a user clicks into an account

Web components

<embedded-balances-widget
  data-user-id="YOUR_USER_ID"
  data-widget-token-refresh-url="/api/widget-token"
  data-accounts-page-url="/banking/accounts"
></embedded-balances-widget>

Onboarding Insights feed

⌘I

Getting started

Authentication

Organizations

Users

Bank account applications

Bank accounts

Webhooks

Money movement

Transactions

Embedded components

White-label

React

BalancesWidget props

Web components

​React

​BalancesWidget props

​Web components

React

BalancesWidget props

Web components