ng-plaid-link v2.0.2

Angular Plaid Link

A directive to support Plaid Link in Angular.

Interfaces & Types support Plaid API version: 2019-05-29

Inspired by ngx-plaid-link by Mike Roberts

How to use

1) Install from NPM

$ npm install ng-plaid-link

2) Import the PlaidLinkModule

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

import { AppComponent } from './app.component';
import { PlaidLinkModule } from 'ng-plaid-link';


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

3) add the zenPlaidLink Directives to an Element of your choice

<button zenPlaidLink
  env="sandbox"
  publicKey="YOURPUBLICKEY"
  [countryCodes]="['US']"
  (success)="onPlaidSuccess($event)"
  (exit)="onPlaidExit($event)"
  (load)="onPlaidLoad($event)"
  (event)="onPlaidEvent($event)"
>Link Your Bank Account</button>

Other options:

Note that most of the functionality is available through the PlaidLinkService, so you could implement functionality yourself if you wanted to customize further

import { Component, AfterViewInit } from "@angular/core";
import {
  PlaidConfig,
  PlaidLinkService,
  PlaidLinkHandler
} from "ng-plaid-link";
                            
@Component({
  selector: 'app-plaid-component',
  templateUrl: './plaid.component.html',
  styleUrls: ['./plaid.component.scss'],
})
export class PlaidLinkComponent implements AfterViewInit {
  private plaidLinkHandler: PlaidLinkHandler;

  private config: PlaidConfig = {
    apiVersion: "v2",
    env: "sandbox",
    product: ["auth"],
    countryCodes: ['US'],
    key: "YOURPUBLICKEY"
  };

  constructor(private plaidLinkService: PlaidLinkService) {}

  // Create and open programmatically once the library is loaded.
  async ngAfterViewInit() {
    this.plaidLinkHandler = await this.plaidLinkService
      .createPlaid(
        Object.assign({}, this.config, {
          onSuccess: (token, metadata) => this.onSuccess(token, metadata),
          onExit: (error, metadata) => this.onExit(error, metadata),
          onEvent: (eventName, metadata) => this.onEvent(eventName, metadata)
        })
      );
    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);
  }
}

Available Configuration Options

This mirrors Plaid's Parameter reference.