React SDK quick start

1
const 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-05-25",
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
};

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

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

1
import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3
function 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
14
export default CounterpartModal;

1
import { CounterpartDetails, Dialog } from "@monite/sdk-react";
2
3
function 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
13
export default CounterpartModal;