Skip to main content
Balances Widget
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

PropRequiredDescription
accountsPageUrlNoURL to navigate to when a user clicks into an account

​
Web components

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