Connecting Plaid to WeWeb & Xano

Ask us anything How do I?
1

Hi everybody

Trying to work through a Plaid - Xano - WeWeb project and having a few issues with the Plaid Link implementation. Does anybody have experience with this? Here’s my main question:

  • How do you open the Plaid Link module using the link_token (i.e., with full code implementation this is a JS function – see below for an example, how do you replicate this in WeWeb?)

Thanks in advance

const startLink = function () {
  if (linkTokenData === undefined) {
    return;
  }
  const handler = Plaid.create({
    token: linkTokenData.link_token,
    onSuccess: async (publicToken, metadata) => {
      console.log(`ONSUCCESS: Metadata ${JSON.stringify(metadata)}`);
      showOutput(
        `I have a public token: ${publicToken} I should exchange this`
      );
      publicTokenToExchange = publicToken;
      document.querySelector("#exchangeToken").removeAttribute("disabled");
    },
    onExit: (err, metadata) => {
      console.log(
        `Exited early. Error: ${JSON.stringify(err)} Metadata: ${JSON.stringify(
          metadata
        )}`
      );
      showOutput(`Link existed early with status ${metadata.status}`)
    },
    onEvent: (eventName, metadata) => {
      console.log(`Event ${eventName}, Metadata: ${JSON.stringify(metadata)}`);
    },
  });
  handler.open();
};
1 Like
2

Hi @Amos :wave:

I think you could probably do this all in nocode yes but I’m not too familiar with Plaid. Would the flow look something like this:

  • user clicks on a button
  • they receive an email with a link
  • when they click on the link they are redirected to a page with a public token in a query string
  • on that page, they click a button to finally login
1 Like
3

Hello Joyce!

I think it needs to happen directly in the web page (i.e., can’t send a unique link via email). So flow would be: user clicks “Connect my Account”, our app pings Plaid to get a link_token (Step 1 below), then we use the link_token to open the Plaid Link modal (Step 2), user sign ins, and if the sign in is successful Plaid sends a public token (Step 3). Then we ping Plaid to get the access token (Step 4). Sharing a screenshot of this flow below. So basically my two main questions are:

  • How would I use WeWeb to execute JS in the browser to open the Plaid Link modal? (Step 2 below)

  • How do we set up the app to receive the onSuccess callback function? (Also in Step 2)

image
image773×578 79.3 KB

4

We’ve done this work before in State Change office hours. Adding the Javascript library to Weweb either using custom code or the (free) State Change Weweb Embedder connects the plaid library (Link - Web | Plaid Docs). to your weweb runtime.

Then you can run custom JS in weweb using the “custom JS” action to trigger the modal. The onSuccess callback can trigger a weweb workflow using wwLib.executeWorkflow from the javascript side. I made a video showing how to use this functionality in general: Weweb and executeWorkflow - Connect Any Library - YouTube

It’s all actually quite slick, just takes a bit of work.

This is the kind of “hardest 5%” problem we focus on in State Change office hours and our forum.

2 Likes
5

Wanted to reopen this discussion as I am trying a similar flow.

I’m able to include the Plaid library in a workflow when I start my web app, but am running into issues with the inital setup. Plaid docs (Auth - Add Auth to your app | Plaid Docs) show using some set up in a Node/Express like this:

// Using Express
const express = require('express');
const app = express();
app.use(express.json());

const { Configuration, PlaidApi, PlaidEnvironments } = require('plaid');

const configuration = new Configuration({
  basePath: PlaidEnvironments.sandbox,
  baseOptions: {
    headers: {
      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
      'PLAID-SECRET': process.env.PLAID_SECRET,
    },
  },
});

const client = new PlaidApi(configuration);

the ‘client’ is essential to the rest of the flow. I don’t know where or how I can include similar code. Is there a way to run a similar process in WeWeb?