Plaid

Learn how to integrate using our Javascript SDK

React

Example implementation of Plaid integration with FutureAI SDK

Initiate the session

import { useState, createContext, useEffect, useContext } from "react";
import { Future } from "@future-sdk/future-js";
import { AuthContext } from "./auth-provider";

interface ContextShape {
  session?: any;
}

export const FutureContext = createContext<ContextShape>({
  session: null,
});

export const FutureProvider = ({ children }: { children: React.ReactNode }) => {
  const [session, setSession] = useState();
  const { user, updateUserStatus } = useContext(AuthContext);
  useEffect(() => {
    Future.startFutureSession(
      {
        apiKey: process.env.NEXT_PUBLIC_FUTUREAI_SDK_KEY,
        iframeUrl: process.env.NEXT_PUBLIC_IFRAME_URL,
        serverUrl: process.env.NEXT_PUBLIC_SERVER_URL,
        websocketUrl: process.env.NEXT_PUBLIC_WEBSOCKET_URL,
        onSessionUpdate: async (updatedSession: any) => {
          setSession(updatedSession);
          console.log(user, updatedSession.lastEventName);
          console.log(
            user && updatedSession.lastEventName === "LinkedAccountCreated",
          );
          if (user && updatedSession.lastEventName === "LinkedAccountCreated") {
            await updateUserStatus("Connected FutureAI");
          }
        },
      },
      [],
    );
  }, [updateUserStatus, user]);

  const value = {
    session,
  };

  return (
    <FutureContext.Provider value={value}>{children}</FutureContext.Provider>
  );
};

Create the FutureAI button component

useEffect(() => {
    Future.createFutureButton({
      merchantFlowId: process.env.NEXT_PUBLIC_FUTUREAI_FLOW_ID,
      container: "#future-button",
      skipIntro: true,
    })
  }, [])