Appearance

Plaid Link ​

A wrapper component for integrating with Plaid for connecting bank accounts

Basic Usage ​

template
<PlaidLink token="my-plaid-token">
  <Button>
    <Icon name="logo-plaid" />
    <span>Link with Plaid</span>
  </Button>
</PlaidLink>

Providing a token ​

In order to use the PlaidLink, you must provide a token. This can be done in two ways:

Token function ​

The PlaidLink component accepts, via the createToken property, an async function that resolves to a token.

template
<PlaidLink :createToken="myCreateTokenFunc"/>

TIP

Visit Plaid docs for more information on creating a token.

Raw token ​

If you happen to have a token already, you can provide it directly to the component via the token prop.

template
<PlaidLink token="my-plaid-token"/>

WARNING

If both token and createToken properties are informed, the token resolved by the function will take precedence.

Setting the environment ​

The PlaidLink component defaults to the sandbox environment. To change this, you can use the env property.

template
<PlaidLink env="'development' | 'sandbox' | 'production'" />

Handling events ​

The PlaidLink component re-emits events from the original Plaid Link SDK.

TIP

Visit Plaid Link Web SDK docs for more information on available events.

template
<PlaidLink
  @error="toasts.error('PlaidLink error emitted')"
  @exit="toasts.warning('PlaidLink exit emitted')"
  @load="toasts.info('PlaidLink load emitted')"
  @event="toasts.info('PlaidLink event emitted')"
  @success="toasts.success('PlaidLink success emitted')"
/>

Default slot props ​

The PlaidLink component's default slot exposes the open property, which can be used to observe whenever the Plaid Link modal is opened.

template
<PlaidLink v-slot="{ open }">
  <Button :disabled="open">
    Link with Plaid
  </Button>
</PlaidLink>

Programmatic opening ​

If you wish to open the PlaidLink modal from outside the component, you can use the exposed handleClick method from the component reference:

template
<PlaidLink ref="plaidLinkRef" />
<Button @click="plaidLinkRef?.handleClick">Open Plaid Link</Button>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.