Introducing ngx-plaid-link

By Mike Roberts

I’ve been searching for a way to integrate Plaid Link into Angular (not AngularJS) for a few days and haven’t found much about it around the internet. There seems to be a library for every other framework out there but not Angular. So, borrowing heavily on the hard work of others - namely react-plaid-link and ngx-stripe - I’ve put together a little library for Angular using NgPackagr called ngx-plaid-link.

It should be super easy to use and you can have Plaid Link working in your Angular app in about 5 minutes or less. The first step is to install from npm

$ npm install --save ngx-plaid-link

or yarn

$ yarn add ngx-plaid-link

Step two is import the NgxPlaidLinkModule into the module where you’re using it. That can be the root module of your app or a lazy loaded feature module somewhere a few pages deep after your users are already logged in.

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 { }

Step three has two different ways of getting it done. You can opt for the easy way, where you just drop some html into your template and implement the methods in your component

<mr-ngx-plaid-link-button env="sandbox" publicKey="YOURPUBLICKEY" (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>

import { Component } from '@angular/core';

@Component()
export class AppComponent {
  
  onPlaidSuccess(event) {
    // Send the public token to your server so you can do the token exchange.
  }

  onPlaidExit(event) {
    // Get errors or exit reason.
  }

  onPlaidEvent(event) {
    // Log events so you can have insight into how your users are using plaid link.
  }

  onPlaidLoad(event) {
    // Do something when the iframe loads.
  }

  onPlaidClick(event) {
    // Do something when the button is clicked.
  }
}

And that’s it. You now have Plaid Link working in your Angular app.

The second method for step three is a little more complicated but allows for deeper customization to your app. If you want to load plaid link when a page is loaded, rather than when a user clicks a button for example, you could write a component like this:

import { Component, AfterViewInit } from '@angular/core';
import {
  PlaidErrorMetadata,
  PlaidErrorObject,
  PlaidEventMetadata,
  PlaidOnEventArgs,
  PlaidOnExitArgs,
  PlaidOnSuccessArgs,
  PlaidSuccessMetadata,
  PlaidConfig
} from './interfaces';
import { NgxPlaidLinkService } from './ngx-plaid-link.service';
import { PlaidLinkHandler } from './ngx-plaid-link-handler';
 
export class ComponentThatImplementsPlaidLink implements AfterViewInit {
  private plaidLinkHandler: PlaidLinkHandler;
 
  private config: PlaidConfig = {
    apiVersion: 'v2',
    env: 'sandbox',
    institution: null,
    token: null,
    webhook: '',
    product: ['auth'],
    key: 'YOURPUBLICKEY'
  };
 
  constructor(private plaidLinkService: NgxPlaidLinkService) {}
 
  // Create and open programatically once the library is loaded.
  ngAfterViewInit() {
    this.plaidLinkHandler.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);
  }
}

What does the future of this library hold? Well the first thing I want to do is use renderer2 and inject document so it will work with Angular Universal, so that should be coming in the near-ish future. Other than that I have no real plans for this. It works, it does what I needed it to do, and I will maintain it since it’s used in a product I work on daily. If you’ve got ideas file an issue with a feature request, or better yet, make a PR.