React

Installation

with npm

npm

npm install --save react-fuse-connect

Create

tsx

import { FuseConnect } from "react-fuse-connect";

return (
    <FuseConnect
      clientSecret={"GENERATED_CLIENT_SECRET"}
      onEvent={() => {}}
      onSuccess={async (publicToken) => {}}
      onInstitutionSelected={(
        institution_id: string,
        callback: (linkToken: string) => void
      ) => {}}
      onExit={() => {}}
    ></FuseConnect>
);

Method parameters

Field	Type	Required	Description
clientSecret	String	Yes	A string representing the generated client secret. This secret is used to authenticate the API and grant access to bank data. See /session
onInstitutionSelected	Function	Yes	A function that is called when a user selects an institution to link. The function expects one parameter: institution_id - Represents the unique identifier for the selected bank. callback - Receives the link token generated by the backend. See /link/token for how to generate a link token.
onSuccess	Function	Yes	A callback function that is called when the user successfully connects their bank account. The function takes one parameter: public token - A temporary token that can be exchanged for an access token to access the user's bank data. See /financial_connections/public_token/exchange
onExit	Function	Yes	A callback function that is called when the user exits the API. The function takes two parameters: err - An error object, if an error occurred during the connection process. metadata - contains additional information about the connection, such as the bank name and institution ID.
onEvent	Function	Yes	A callback function that is called when an event occurs during the connection process.

Usage

Here is a simple example of FuseConnect being used to prompt a user to link their bank account after tapping a Link Account button.

TypeScript

import { useState } from "react";
import { FuseConnect } from "react-fuse-connect";
import {
  useCreateLinkToken,
  useCreateSession,
  useExchangePublicToken,
  useGetAccounts,
} from "@/hooks/api";

export default function ConnectInstitutionStep() {
  const { mutateAsync: createSession } = useCreateSession();
  const { mutateAsync: createLinkToken } = useCreateLinkToken();
  const { mutateAsync: exchangeToken } = useExchangePublicToken();
  const { data: accounts } = useGetAccounts();
  const [buttonLoading, setButtonLoading] = useState(false);
  const [notificationOpened, setNotificationOpened] = useState(false);
  const [clientSecret, setClientSecret] = useState("");

  const onInstitutionSelected = async (
    institution_id: string,
    callback: (linkToken: string) => void
  ) => {
    const linkToken = await createLinkToken({
      institutionId: institution_id,
      clientSecret: clientSecret,
    });

    callback(linkToken);
  };

  const onSuccess = async (publicToken: string) => {
    await exchangeToken({ publicToken, clientSecret });
    setClientSecret("");
    setButtonLoading(false);
    setNotificationOpened(true);
  };

  const linkAccount = () => {
    setButtonLoading(true);
    createSession()
      .then((result) => {
        setClientSecret(result);
      })
      .catch((e) => {
        console.log("Got error", e.message);
        setButtonLoading(false);
      });
  };

  return (
    <>
      {/* Display the FuseConnect component */}
      <FuseConnect
        clientSecret={clientSecret}
        onEvent={() => {}}
        onSuccess={onSuccess}
        onInstitutionSelected={onInstitutionSelected}
        onExit={() => {
          setClientSecret("");
          setButtonLoading(false);
        }}
      ></FuseConnect>

      {/* Add a button to trigger the onInstitutionSelected function */}
      <button onClick={linkAccount}>Link account</button>

      {/* Display a loading message when the button is clicked */}
      {buttonLoading && <p>Loading...</p>}

      {/* Display a notification when the account is successfully linked */}
      {notificationOpened && <p>Institution successfully linked.</p>}

      {/* Display a list of linked accounts */}
      {accounts && accounts.length > 0 && (
        <ul>
          {accounts.map((account: any) => (
            <li key={account.connection_id}>{account.institution_name}</li>
          ))}
        </ul>
      )}

      {/* Display a message when no accounts are linked */}
      {accounts && accounts.length === 0 && (
        <p>No financial institutions linked.</p>
      )}
    </>
  );
}