user-onboarding-react v0.1.3

Getting Started with user-onboarding-react integration

Install

-TODO: Install instructions

Documentation

To start onboarding users to your application, you must generate a User Onboarding Object and use its ID to load the iFrame.

• Generate User Onboarding Object

• Pass the ID to the iFrame

• Give user access to the iFrame

Creating User Onboarding Objects

This request will return a user-onboarding-id which is what you will replace <GENERATED_USER_ONBOARDING_ID> when using this integration.

curl --request POST \
  -u ORGANIZATION_ID:API_KEY \
  --url https://app.moderntreasury.com/api/user_onboardings \
  -H 'Content-Type: application/json' \
  -d '{
    "party_type": "individual"
}'

For more info on creating User Onboarding Objects, look here.

Examples

Functional Option

import { useMTUserOnboarding } from "./useMTUserOnboarding";

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

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

Default Button Option

import { MTUserOnboarding } from "./MTUserOnboarding";

const demoOptions = {
  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 MTUserOnboarding",
    className: "MT-Onboarding",
    padding: "15px 32px",
    textAlign: "center" as const,
    textDecoration: "none",
    display: "inline-block",
    fontSize: "16px",
  },
};

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