3b. Embed Flow (React)

Integrate Modern Treasury’s user onboarding flow by inserting a code snippet into your application. First, add the user onboarding React package to your project.

yarn add @modern-treasury/user-onboarding-react

npm install --save @modern-treasury/user-onboarding-react

Options for how to initiate the flow can be found in the official Github repo. The examples below show how to initiate the flow with a simple button that starts the flow when clicked. Supply the ID (dacabe14-4b1b-4219-8226-02b3d247477d) from the User Onboarding object created in the last step.

import { MTUserOnboarding } from "@modern-treasury/user-onboarding-react";

const options = {
  userOnboardingId: "<GENERATED_USER_ONBOARDING_ID>",
  onSuccess: () => {
    console.log("MT User Onboarding is a Success!");
  },
  onCancel: () => {
    console.log("MT User Onboarding has been Canceled!");
  },
  onError: () => {
    console.log("MT User Onboarding has an Error!");
  },
  style: {
    backgroundColor: "green",
    boarder: "none",
    color: "white",
    width: "200px",
    height: "75px",
    children: "Open User Onboarding",
    className: "MT-Onboarding",
    padding: "15px 32px",
    textAlign: "center",
    textDecoration: "none",
    display: "inline-block",
    fontSize: "16px",
  },
};

function App() {
  return (
    <div className="App">
      <MTUserOnboarding {...options}>
        Open User Onboarding
      </MTUserOnboarding>
    </div>
  );
}

import { useMTUserOnboarding } from "@modern-treasury/user-onboarding-react";

const options = {};

const [ready, error, open] = useMTUserOnboarding(options);

return (
  <button
    onClick={() => open("<GENERATED_USER_ONBOARDING_ID>")}
    disabled={!ready}
  >
    Open User Onboarding
  </button>
);

There are three callbacks.

Callback	Description
`onSuccess`	Runs if the user completes the onboarding flow, regardless of the eventual outcome of the verification.
`onCancel`	Runs if the user closes the iframe before the user completes the onboarding flow.
`onError`	Runs if there is an error in the onboarding flow.

For each event, a message will be sent. For error events, this message will look like { event: "error", error: "REASON_FOR_ERROR" }. Below are potential reasons for an error.


`user_onboarding_expired`	The `userOnboardingId` has expired (it is valid for 24 hours).
`user_onboarding_api_key_invalid`	The API key used for creating the user onboarding was deactivated.
`user_onboarding_completed`	User onboarding already completed.
`user_onboarding_not_found`	User onboarding with given ID was not found.
`internal_server_error`	An unexpected error occurred.

❗️
Authenticating the user before sending them to Modern Treasury Compliance, and limiting the number of submission attempts, help prevent fraudsters from abusing your verification flow.