Embedded SDK

RootFi supports white labelling the onboarding process through the Connect SDK. Your end users can create connections to their platforms without using the RootFi dashboard to generate Invite Links. We currently offer a Javascript SDK but you can request other frameworks by contacting us.

Developer Reference

Create an invite link by calling the Create Invite Link API.
1. If company_name is not passed, company wont be created and so, your user will have to enter it in the SDK.
2. To enable only certain integrations, you can pass a list of integrations. If only one integration is passed, user will be redirected to the platform login url directly.
The response will contain the invite_link, which will need to be sent to the SDK during initialisation, and the company_id, which you should store to uniquely identify this customer.

Setup SDK

Import the source script in the head tag. Default: <script src="https://sdk.rootfi.dev/sdk.js"></script> KSA region: <script src="https://sdk.rootfi.dev/sdk.sa.js"></script>
Load the RootFi SDK on page load by calling RootfiLink.initialize().

JavaScript

RootfiLink.initialize({
  linkToken: "", // invite_link returned from the Create Invite Link API
  onSuccess: () => {
    // Will be called, once connection is successful
  },
  onReady: () => {
    // Will be called once the src script is loaded
  },
  onExit: () => {
    // Will be called when user clicks close button on SDK.
  },
});

Call RootfiLink.openLink(); to open the SDK. Make sure you call this function onReady is called back on initialisation.
Call RootfiLink.closeLink(); to close the SDK. You can use this method to close the SDK in onSuccess and onExit Callback;

The SDK will not close until you call RootfiLink.closeLink();

Below is a HTML snippet of integrating the SDK and a ReactJS implementation using our react SDK component.

<html>
  <head>
    <script src="https://sdk.rootfi.dev/sdk.js" type="text/javascript"></script>
    <script>
      const RootfiLink = window.RootfiLink;
      function loadRootFi() {
        RootfiLink.initialize({
          linkToken: "1234567", // invite_link_id returned from Create Invite Link API
          onSuccess: () => {
            // connection succeeded
            RootfiLink.closeLink(); // Close the SDK
            alert("Connection Success");
            // Make an api call to save success status to your db
          },
          onReady: () => {
            // Open SDK when ready. You can open on a button Click.
            RootfiLink.openLink();
          },
          onExit: () => {
            // Close SDK when user clicks closed.
            RootfiLink.closeLink();
            // Or you can show a alert msg instead of closing iframe
            alert("Please complete the setup");
          },
        });
      }
    </script>
  </head>
  <body>
    <p><button onclick="loadRootFi()">Open RootFi SDK</button></p>
  </body>
</html>

import { useEffect, useState } from "react";
import { useRootfiLink } from "rootfi-react-sdk";

const ConnectSDK = () => {
  const [inviteLinkId, setInviteLinkId] = useState("");
  const { isReady, closeLink, openLink } = useRootfiLink({
    environment: "global", // "global" or "saudi"
    inviteLinkId: inviteLinkId,
    onSuccess: (data) => {
      // connection succeeded
      // Make an api call to save success status to your db
      setTimeout(() => closeLink(), 2000);
    },
    onExit: () => {
      closeLink();
    },
  });

  useEffect(() => {
    // Call Create Invite Link API to get a new invite link and set it to the state
    // setInviteLinkId("INVITE_LINK_ID");
  }, []);

  if (!isReady) return <>{"Initialising SDK"}</>;

  return (
    <div>
      <button onClick={() => openLink()}>Open RootFi SDK</button>
    </div>
  );
};
export default ConnectSDK;

General

Use Case Guides

Core Features

Advanced Features

Developer Reference

Setup SDK

​Developer Reference

​Setup SDK

Developer Reference

Setup SDK