NGX Plaid Link

A wrapper component to make using Plaid Link easy in Angular 6+.

This has been tested to work in at least 1 Angular 5 app as well

How to use

1a) Install from NPM

$ npm install ngx-plaid-link

1b) Or Yarn

$ yarn add ngx-plaid-link

2) Import the NgxPlaidLinkModule

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { NgxPlaidLinkModule } from "ngx-plaid-link";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxPlaidLinkModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3a) The easy way, the ngxPlaidLink Directives

<button ngxPlaidLink
  env="sandbox"
  publicKey="YOURPUBLICKEY"
  institution=""
  [countryCodes]="['US', 'CA', 'GB']"
  (Success)="onPlaidSuccess($event)"
  (Exit)="onPlaidExit($event)"
  (Load)="onPlaidLoad($event)"
  (Event)="onPlaidEvent($event)"
  (Click)="onPlaidClick($event)"
>Link Your Bank Account</button>

3b) The easy way, with the provided button

<mr-ngx-plaid-link-button
  env="sandbox"
  publicKey="YOURPUBLICKEY"
  institution=""
  [countryCodes]="['US', 'CA', 'GB']"
  (Success)="onPlaidSuccess($event)"
  (Exit)="onPlaidExit($event)"
  (Load)="onPlaidLoad($event)"
  (Event)="onPlaidEvent($event)"
  className="launch-plaid-link-button"
  buttonText="Link Your Bank Account"
  (Click)="onPlaidClick($event)"
></mr-ngx-plaid-link-button>

3b) The less easy way, implement yourself

Since most of the functionality is through the service you can imlpement this yourself to customize to your needs further.

import { Component, AfterViewInit } from "@angular/core";
import {
  PlaidErrorMetadata,
  PlaidErrorObject,
  PlaidEventMetadata,
  PlaidOnEventArgs,
  PlaidOnExitArgs,
  PlaidOnSuccessArgs,
  PlaidSuccessMetadata,
  PlaidConfig,
  NgxPlaidLinkService,
  PlaidLinkHandler
} from "ngx-plaid-link";

export class ComponentThatImplementsPlaidLink implements AfterViewInit {
  private plaidLinkHandler: PlaidLinkHandler;

  private config: PlaidConfig = {
    apiVersion: "v2",
    env: "sandbox",
    institution: null,
    selectAccount: false,
    token: null,
    webhook: "",
    product: ["auth"],
    countryCodes: ['US', 'CA', 'GB']
    key: "YOURPUBLICKEY"
  };

  constructor(private plaidLinkService: NgxPlaidLinkService) {}

  // Create and open programatically once the library is loaded.
  ngAfterViewInit() {
    this.plaidLinkService
      .createPlaid(
        Object.assign({}, config, {
          onSuccess: (token, metadata) => this.onSuccess(token, metadata),
          onExit: (error, metadata) => this.onExit(error, metadata),
          onEvent: (eventName, metadata) => this.onEvent(eventName, metadata)
        })
      )
      .then((handler: PlaidLinkHandler) => {
        this.plaidLinkHandler = handler;
        this.open();
      });
  }

  open() {
    this.plaidLinkHandler.open();
  }

  exit() {
    this.plaidLinkHandler.exit();
  }

  onSuccess(token, metadata) {
    console.log("We got a token:", token);
    console.log("We got metadata:", metadata);
  }

  onEvent(eventName, metadata) {
    console.log("We got an event:", eventName);
    console.log("We got metadata:", metadata);
  }

  onExit(error, metadata) {
    console.log("We exited:", error);
    console.log("We got metadata:", metadata);
  }
}

Angular Compatibility Chart

The following chart can be used to determine what version of ngx-plaid-link should be used within your angular project.

• Note the omission of angular@12 support within the chart; this is because there has never been a version of ngx-plaid-link published that officially supports angular@12. [email protected] should work fine with angular@12 (albeit with peer dependency warnings during installation) but official advice is to upgrade your project to angular@13 or later.

| angular version | ngx-plaid-link version | | --------------- | ---------------------- | | 6 | 1.0.3 | | 7 | 1.0.3 | | 8 | 1.0.3 | | 9 | 1.0.3 | | 10 | 1.0.3 | | 11 | 1.0.3 | | 13 | 13.0.0 |

Available Configuration

This is all there in the types, but here they are for convenience.

| Attribute/prop | input/output | optional/required | Type | Default | Description | | -------------- | ------------ | ----------------- | -------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | apiVersion | input | optional | string | v2 | The version of the Plaid Link api to use | | buttonText | input | optional | string | Log In To Your Bank Account | You can customize the text on the button by providing text here. | | className | input | optional | string | null | A class or classes to apply to the button inside the component | | clientName | input | required | string | null | The name of your application, gets used in the Plaid Link UI. | | countryCodes | input | optional | string[] | ['US'] | An array of strings of Plaid supported country codes | | env | input | optional | string | sandbox | Can be one of available plaid environments: sandbox, development, or production | | institution | input | optional | string | null | If you want to launch a specific institution | | product | input | optional | string[] | ['auth'] | An array of the names of the products you'd like to authorize. Available options are transactions, auth, and identity. | | publicKey | input | conditional | string | null | The key (publiKey) parameter in PlaidLink create is deprecated. The public key from your Plaid account Make sure it's the public key and not the private key | | token | input | conditional | string | null | If you're using link_tokens this field is required and will be the link_token. If you're still using the public key (legacy), then this field is optional and is for if you are re-authenticating or updating an item that has previously been linked. | | style | input | optional | object | An object of styles | An ngStyle object that can be used to apply styles and customize the plaid link button to match your app. | | selectAccount | input | optional | boolean | false | Setting this to TRUE will allow the user to select their bank account from a list through the plaid modal. FALSE does not show the account list prompt. | | webhook | input | optional | string | null | You can provide a webhook for each item that Plaid will send events to. | | receivedRedirectUri | input | optional | string | null | A receivedRedirectUri is required to support OAuth authentication flows when re-launching Link on a mobile device and using one or more European country codes. In addition to configuring the URI here, you will also need to enable the URI on the developer dashboard. | | isWebview | input | optional | boolean | false | Set to true if launching Link within a WebView. | | Exit | output | required | function | n/a | Passes the result from the onExit function to your component | | Success | output | required | function | n/a | Passes the result from the onSuccess function to your component | | Click | output | optional | function | n/a | Lets you act on the event when the button is clicked | | Event | output | optional | function | n/a | Passes the result from the onEvent function to your component | | Load | output | optional | function | n/a | Lets you act on the event when the Plaid Link stuff is all loaded |

How to contribute

Coming soon...