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.

CallbackDescription
onSuccessRuns if the user completes the onboarding flow, regardless of the eventual outcome of the verification.
onCancelRuns if the user closes the iframe before the user completes the onboarding flow.
onErrorRuns 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_expiredThe userOnboardingId has expired (it is valid for 24 hours).
user_onboarding_api_key_invalidThe API key used for creating the user onboarding was deactivated.
user_onboarding_completedUser onboarding already completed.
user_onboarding_not_foundUser onboarding with given ID was not found.
internal_server_errorAn 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.


What’s Next