Get started with Monite’s React UI SDK.

Overview

This quick start shows how to set up and utilize Monite’s React UI SDK in your React or Next.js applications.

Before you begin

To follow this quickstart guide, ensure you have retrieved your credentials from the Monite partner portal. For more information, see Get your credentials.

1. Installation

To install the Monite React UI SDK, run:

$npm install @monite/sdk-react @monite/sdk-api

2. Authentication

Define your fetchToken function to retrieve your access tokens.

React.js
1const fetchToken = async () => {
2 const response = await fetch("https://api.sandbox.monite.com/v1/auth/token", {
3 method: "POST",
4 headers: {
5 "Content-Type": "application/json",
6 "x-monite-version": "2024-01-31",
7 },
8 // TODO: Replace the following fields with your Monite credentials
9 body: JSON.stringify({
10 grant_type: "entity_user",
11 entity_user_id: "ENTITY_USER_ID",
12 client_id: "CLIENT_ID",
13 client_secret: "CLIENT_SECRET",
14 }),
15 });
16
17 return response.json();
18};

Monite does not recommend exposing the credentials of your fetchToken function on the client side as shown earlier. For security reasons, we recommend that all Monite tokens are generated from your server-side code.

3. Initialization

To initialize the Monite React UI SDK, import the MoniteSDK object instance from the package and initialize as shown:

React.js
1import { MoniteSDK } from "@monite/sdk-api";
2import { useMemo } from "react";
3
4const monite = useMemo(
5 () =>
6 new MoniteSDK({
7 apiUrl: "https://api.sandbox.monite.com/v1",
8 entityId: "ENTITY_ID",
9 fetchToken: fetchToken,
10 }),
11 []
12);

4. The MoniteProvider wrapper

The MoniteProvider wrapper is a helper component that wraps all other Monite React UI components. Import and utilize in the MoniteProvider wrapper as shown:

React.js
1import { MoniteProvider } from "@monite/sdk-react";
2// import CounterpartModal from "./CounterpartModal"
3
4function App() {
5 return (
6 <div className="App">
7 <MoniteProvider monite={monite} locale={{ currencyLocale: "de" }}>
8 // <CounterpartModal />
9 ...
10 </MoniteProvider>
11 </div>
12 );
13}
14
15export default App;

The monite prop holds the object obtained from initializing the MoniteSDK.

5. Create a counterpart

The CounterpartDetails component is used to create a new counterpart. When provided with the type prop, the component renders a modal for creating counterparts of type individual or organization. To create a counterpart, import and render the CounterpartDetails component as shown:

React.js
1import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3function CounterpartModal() {
4 return (
5 <div className="counterparts-modal">
6 <Dialog open alignDialog="right">
7 // `type` value could be `individual` or `organization`
8 <CounterpartDetails type="organization" />
9 </Dialog>
10 </div>
11 );
12}
13
14export default CounterpartModal;
CounterpartDetails component with the 'type' prop provided
CounterpartDetails component with the 'type' prop provided

6. View counterpart details

To view counterpart details, use the CounterpartDetails component and provide the counterpart ID to the id prop as shown:

React.js
1import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3function CounterpartModal() {
4 return (
5 <div className="counterparts-modal">
6 <Dialog open alignDialog="right">
7 <CounterpartDetails id="COUNTERPART_ID" />
8 </Dialog>
9 </div>
10 );
11}
12
13export default CounterpartModal;
CounterpartDetails component with counterpart ID provided
CounterpartDetails component with counterpart ID provided

For more information on Monite’s React UI components, see React UI components.

Next steps

By completing this quickstart, you have learned how to:

  • Install and initialize Monite React UI SDK package.
  • Create a counterpart using the CounterpartDetails component.
  • View counterpart details using the CounterpartDetails component.

Next, you can generate and issue receivable to the counterpart via the Monite React UI SDK. For more information on the Monite React UI SDK, see React UI components.