← Back to Recipes

Update an Item using Pluggy Connect

Full standalone HTML client example to update an existing Item using Pluggy Connect widget.

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. Select the item id you want to update#

3. Create a Connect Token linked to the item to update#

Call your API endpoint to create a new Connect Token.

Ensure to specify the itemId you want to update and relate it to the actual Create Connect Token request.

Otherwise, the Item Update request won't be authorized.

4. Setup your PluggyConnect instance, linked to the itemId to update#

Using the connectToken we've just created, linked to the itemId to update, we set up PluggyConnect instance by also specifying the item id in the updateItem property.

5. Open PluggyConnect widget#

All set! Now you are ready to launch the PluggyConnect widget instance and allow the user move forward with the update process.

The Item update will start automatically, unless the Item had an INVALID_CREDENTIALS error, or the Connector requires an MFA parameter. In those cases, the required parameters will be presented to the user for him/her to fulfill to be able to continue.

Code#

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pluggy Connect - Update Item 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.3.1/pluggy-connect.js"></script>
  </head>
  <body>
    <main class="main"></main>
    <script>
      // this itemId is just an example, you should specify your own based on your existing data
      const existingItemIdToUpdate = 'my-item-id-1234'
 
      // 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-api.vercel.app/api/pluggy/connect_token', {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          itemId: existingItemIdToUpdate, // specify the item id to update here, to authorize the connectToken to access it
          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,
            updateItem: existingItemIdToUpdate, // by specifying the Item id to update here, Pluggy Connect will attempt to trigger an update on it, and/or prompt credentials request if needed.
            includeSandbox: true, // note: not needed in production
            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);
            },
            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>