Appearance

usePlaidLink ​

A composable for launching the Plaid Link experience

Basic usage ​

vue
<script setup>
  const plaidLinkOptions = ref({ onSuccess: console.log });
  const { open, ready } = usePlaidLink(plaidLinkOptions);

  async function openWithToken() {
    const { link_token } = await fetch(/** create token endpoint */);

    plaidLinkOptions.value.token = link_token;

    open();
  }
</script>

<template>
  <button :disabled="!ready" @click="openWithToken">Open Plaid Link</button>
</template>

Import ​

ts
import usePlaidLink from '@leaflink/stash/usePlaidLink';

Opening ​

In order to open the Plaid Link experience, you can call the open method that is exposed by the composable:

ts
const plaidLinkOptions = ref({ onSuccess: console.log, token: 'abc' });

const { open } = usePlaidLink(plaidLinkOptions);

open();

INFO

In order to be able to call the open method, a token and the onSuccess callback must be set.

Closing ​

If you wish to close the Plaid Link experience, you can do it by calling the exit method that is exposed by the composable:

ts
const plaidLinkOptions = ref({ onSuccess: console.log, token: 'abc' });

const { exit } = usePlaidLink(plaidLinkOptions);

exit();

Ready ​

The usePlaidLink composable exposes a ready ref that allows you to know whenever the Plaid Link experience is ready to be opened and that there was no errors while loading the Plaid SDK.

ts
const plaidLinkOptions = ref({ onSuccess: console.log, token: 'abc' });

const { ready } = usePlaidLink(plaidLinkOptions);

watch(ready, console.log);

Errors ​

Alternatively, if there's any errors while loading the Plaid SDK script, the error ref will be populated

ts
const plaidLinkOptions = ref({ onSuccess: console.log, token: 'abc' });

const { error } = usePlaidLink(plaidLinkOptions);

watch(error, console.error);

Stash offers an additional option for developers looking to integrate their apps with Plaid, the PlaidLink component. However, there are a few key differences between the two:

Token creation ​

The PlaidLink component, when used with the createToken prop set, automatically fetches a token each time the component is clicked. In contrast, usePlaidLink requires you to manage the logic for creating and setting a token within your host app:

vue
<script setup>
  import PlaidLink from '@leaflink/stash/PlaidLink.vue';

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }
</script>

<template>
  <PlaidLink :create-token="createToken">
    Link with Plaid
  </PlaidLink>
</template>
vue
<script setup>
  import usePlaidLink from '@leaflink/stash/usePlaidLink';

  const plaidLinkOptions = ref({ onSuccess: console.log });
  const { open } = usePlaidLink(plaidLinkOptions);

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }

  async function openWithToken() {
    const { link_token } = await createToken();

    plaidLinkOptions.value.token = link_token;

    open();
  }
</script>

<template>
  <button @click="openWithToken">Link with Plaid</button>
</template>

Token storage ​

To comply with Plaid's OAuth flow, it’s typically necessary to store the current token in some sort of storage so it can be referenced on another page.

The PlaidLink component automatically stores the token in sessionStorage whenever you are about to open the Plaid Link experience, and removes it whenever there's an exit or success event.

When using the composable, you’re responsible for setting up this storage, as well as cleaning it up, and you can choose any method that suits your needs.

vue
<script setup>
  import PlaidLink from '@leaflink/stash/PlaidLink.vue';

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }
</script>

<template>
  <PlaidLink
    :create-token="createToken"
    storage-key="my-custom-key"
  >
    Link with Plaid
  </PlaidLink>
</template>
vue
<script setup>
  import usePlaidLink from '@leaflink/stash/usePlaidLink';

  const plaidLinkOptions = ref({
    onSuccess: console.log 
    onSuccess: removeToken, 
    onExit: removeToken, 
  });

  const { open } = usePlaidLink(plaidLinkOptions);

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }

  function removeToken() {
    localStorage.removeItem("my-plaid-token") 
  }

  async function openWithToken() {
    const { link_token } = await createToken();

    localStorage.setItem("my-plaid-token", link_token); 

    plaidLinkOptions.value.token = link_token;

    open();
  }
</script>

<template>
  <button @click="openWithToken">Link with Plaid</button>
</template>

Error handling ​

If the Plaid experience is exited without successfully linking an item, the onExit callback is triggered. For convenience, the PlaidLink component automatically listens for the exit event and will emit an error event if there is any. In contrast, the usePlaidLink composable only provides the exit callback.

vue
<script setup>
  import PlaidLink from '@leaflink/stash/PlaidLink.vue';

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }

  function handlePlaidError(err, meta) {
    console.error(err, meta);
  }
</script>

<template>
  <PlaidLink
    :create-token="createToken"
    @error="handlePlaidError"
  >
    Link with Plaid
  </PlaidLink>
</template>
vue
<script setup>
  import usePlaidLink from '@leaflink/stash/usePlaidLink';

  const plaidLinkOptions = ref({
    onSuccess: console.log,
    onExit: handlePlaidExit,
  });

  function handlePlaidExit(err, meta) {
    if (err) {
      console.error(err, meta);
    }
  }

  const { open } = usePlaidLink(plaidLinkOptions);

  function createToken(): Promise<{ link_token: string }> {
    return fetch(/** create token endpoint */).then(res => res.json())
  }

  async function openWithToken() {
    const { link_token } = await createToken();

    plaidLinkOptions.value.token = link_token;

    open();
  }
</script>

<template>
  <button @click="openWithToken">Link with Plaid</button>
</template>