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": "2023-09-01",
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
const moniteConfig = {
2
  apiUrl: "https://api.sandbox.monite.com/v1",
3
  entityId: "ENTITY_ID",
4
  fetchToken: fetchToken,
5
);

1
import { MoniteProvider } from "@monite/sdk-react";
2
3
function App() {
4
  return (
5
    <div className="App">
6
      <MoniteProvider monite={moniteConfig}>
7
        ...
8
      </MoniteProvider>
9
    </div>
10
  );
11
}
12
13
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;