3a. Embed Flow (Javascript)

Integrate Modern Treasury’s user onboarding flow by inserting a code snippet into your application. The example below shows a simple button that starts the flow when clicked.

To initiate the flow, supply the ID (dacabe14-4b1b-4219-8226-02b3d247477d) from the User Onboarding object created in the last step.

You can also optionally supply custom callback methods that fire on specific events.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.moderntreasury.com/compliance/v1/mt-onboarding.js"></script>
    <script type="application/ecmascript">
      function openIframe() {
        const onSuccess = function (event) {
          // handle success event (e.g. move user to the next step of your flow following KYC)
        };
        
        const onError = function (event) {
          // handle error event (e.g. open the iframe again)
        };
        
        const onCancel = function (event) {
          // handle cancel event (e.g. email the user later to try and reactivate them)
          // note: this event will not be triggered if the user closes their browser.
        };
        
        const userOnboardingId = document.getElementById('userOnboardingId').value;

        window.onboardingInstance = MTOnboarding.open({
          userOnboardingId: userOnboardingId, // required
          onSuccess: onSuccess, // optional
          onError: onError, // optional
          onClose: onCancel, // optional
        });
      }
    </script>
  </head>

  <body>
    <label for="userOnboardingId">User Onboarding ID:</label>
    <input type="text" id="dacabe14-4b1b-4219-8226-02b3d247477d" name="userOnboardingId" value="simple-test.html">
    <br/>
    <button onclick="openIframe()">
      Open
      </button>
  </body>
</html>

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.

Error Message	Reason
`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.