Skip to main content

​
Overview

Tesouro’s React SDK is a library of ready-to-use React components that are connected to the Tesouro API. These components can render and operate with data served by the API, such as payables, counterparts, and others. Tesouro partners can use UI Components to build React-based web applications for their client SMEs, powered by the Tesouro API.
A preview of the 'Counterparts' component

​
Supported browsers

Tesouro UI Components support the five latest versions of major browsers: Chrome, Firefox, Safari, Edge, Opera.
React SDK components responsivenessAs of this release, the Tesouro React SDK is optimized for desktop use and may not provide the desired responsiveness on mobile and tablet views. We are actively working to enhance support for these platforms in future updates.

​
Installation

Before using Tesouro React components, you must first install the React SDK and API SDK packages available on the NPM and Yarn directories. To install: 
npm install @tesouro/sdk-react
The command installs the necessary packages for using Tesouro’s React SDK in your application.

​
Usage

The example below displays a list of an organization’s counterparts. The TesouroProvider element serves as a wrapper for other Tesouro-connected components.

​
Get the credentials

SDK credentialsThe Tesouro React SDK accepts only organization-user tokens as credentials within the fetchToken function. Attempting to use an app token with the React SDK will throw an error. For more information about organization user tokens and permissions required for each component, see Generate an organization user token and List of permissions.
Before using components from the React SDK, complete the Getting started guide to set up your partner account and get API the credentials. We also assume you have already mapped out your customers and their users as organizations and organization users in Tesouro, and that you have the ability to:
  • look up the Tesouro organization user ID for the user who is logged in to your application;
  • look up the Tesouro organization ID to which the user belongs.
When an organization user logs in to your application, look up the organization ID and user ID for that user, and call Tesouro’s POST /auth/token endpoint to generate a Tesouro access token for that user. Once you have a user access token and an organization ID, you can initialize the Tesouro client and components.

​
Install the packages

npm install @tesouro/sdk-react

​
Import the packages

You need to import the TesouroProvider and any other components that you want to use (such as CounterpartsTable):
App.js
import { TesouroProvider, CounterpartsTable } from "@tesouro/sdk-react";

​
Create the fetchToken function

The fetchToken function is used to get authorization tokens. You can create it at the backend side, but for illustration let’s do that at frontend:
App.js
const fetchToken = async () => {
  const response = await fetch("https://api.sandbox.tesouro.com/v1/auth/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-tesouro-version": "2025-06-23",
    },
    body: JSON.stringify({
      grant_type: "entity_user",
      client_id: "SECRET_CLIENT_ID",
      client_secret: "SECRET_CLIENT_SECRET",
      entity_user_id: "SECRET_ENTITY_USER_ID",
    }),
  });

  return response.json();
};
Tesouro does not recommend exposing the credentials of your fetchToken function on the client side as shown earlier. For security reasons, we recommend that all Tesouro tokens are generated from your server side code.

​
Embed TesouroProvider component

The TesouroProvider is the root component that must wrap all other Tesouro-connected components. The wrapper fetches the access token and provides extra configuration for all Tesouro components beneath it.
App.js
import { TesouroProvider } from "@tesouro/sdk-react";

function App() {
  const tesouro = {
    entityId: "...",
    apiUrl: "https://api.sandbox.tesouro.com/v1",
    fetchToken: fetchToken,
  };

  return (
    <div className="App">
      <TesouroProvider tesouro={tesouro}>...</TesouroProvider>
    </div>
  );
}

export default App;
The locale prop is an optional configuration object that handles the localization mechanism for the UI components. With this, you can customize translations, currency formatting and usage of delimiters and decimal separators. For more information, see Localization.

​
Add components

In this example, we use the CounterpartsTable component to display a list of an organization’s counterparts:
App.js
<TesouroProvider locale={{ code: "en-US" }}>
  <CounterpartsTable />
</TesouroProvider>

​
Review the result

If you followed this tutorial, your code should look like this:
App.js
import { TesouroProvider, CounterpartsTable } from "@tesouro/sdk-react";

// Define a function that retrieves access tokens
const fetchToken = async () => {
  const response = await fetch("https://api.sandbox.tesouro.com/v1/auth/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-tesouro-version": "2025-06-23", //Tesouro API version
    },
    body: JSON.stringify({
      grant_type: "entity_user",
      client_id: "SECRET_CLIENT_ID",
      client_secret: "SECRET_CLIENT_SECRET",
      entity_user_id: "SECRET_ENTITY_USER_ID",
    }),
  });

  return await response.json();
};

import { TesouroProvider } from "@tesouro/sdk-react";

function App() {
  return (
    <div className="App">
      <TesouroProvider tesouro={tesouro}>...</TesouroProvider>
    </div>
  );
}

export default App;

​
Run the application

npm run start