PluggyConnect: Continue connecting item in background as soon as user's login is completed

Steps #

1. Import Pluggy Connect script #

In this example we import the script directly in an HTML page. Your installation strategy might differ based on the SDK/language you are using (see all available ones in: Environments and configurations).

2. Create a Connect Token #

Call (your own) API endpoint to create a new Connect Token.

3. Setup PluggyConnect instance #

When onEvent callback is called for event LOGIN_STEP_COMPLETED, hide pluggyConnect instance, so it can continue polling item status in the background.

5. Explicitly close PluggyConnect after connection finished #

Since the user is not waiting for the connection to finish, we should close it explicitly after it has been completed.

In case connection finishes in an error state and/or user's action is needed, you should display the error in your UI and let the user open the PluggyConnect widget again.

To achieve this, you can call pluggyConnect.show() method.

Code #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pluggy Connect - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
    <!-- Pluggy Connect script. Always check and ensure to use the latest version available. -->
    <script src="https://cdn.pluggy.ai/pluggy-connect/v2.5.0/pluggy-connect.js"></script>
  </head>
  <body>
    <main class="main"></main>
    <script>
      // Note: Use your own Pluggy Connect Token API endpoint, this is only an example
      // To create the Connect Token in your server, you can follow this recipe:
      //  https://docs.pluggy.ai/recipes/generate-a-connect-token-with-permissions-to-update-specific-itemid
      fetch('https://MY-OWN-API.vercel.app/api/pluggy/connect_token', {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          options: {
            // connectToken options (optional)
            clientUserId: "user@example.com"
          }
        })
      })
        .then((response) => response.json())
        .then(({ accessToken }) => {
          // configure the Pluggy Connect widget instance
          const pluggyConnect = new PluggyConnect({
            connectToken: accessToken,
            includeSandbox: true, // note: don't set true in production!
            onEvent: (payload: ConnectEventPayload) => {
              const { event } = payload;
 
              if(event === 'LOGIN_STEP_COMPLETED') {
                // user's login was successful!
                // hide PluggyConnect widget so it can continue syncing in background
                pluggyConnect.hide();
                return;
              }
              // Note: you may want to handle more events here, check them out in our docs:
              // https://docs.pluggy.ai/docs/environments-and-configurations#onevent
            },
            onSuccess: (itemData) => {
              // TODO: Implement logic for successful connection
              // The following line is an example, it should be removed when implemented.
              console.log('Yay! Pluggy connect success!', itemData);
 
              // explicitly close PluggyConnect instance, since it was running in background
              pluggyConnect.close();
            },
            onError: (error) => {
              // TODO: Implement logic for error on connection
              // The following line is an example, it should be removed when implemented.
              console.error('Whoops! Pluggy Connect error... ', error);
            },
          });
 
          // Open Pluggy Connect widget
          pluggyConnect.init();
        });
    </script>
  </body>
</html>

Steps#

1. Import Pluggy Connect script#

2. Create a Connect Token#

3. Setup PluggyConnect instance#

4. Setup onEvent callback to hide PluggyConnect after login is completed#

5. Explicitly close PluggyConnect after connection finished#