ng-plaid-link
v2.0.2
Published
Angular Plaid Link Directive
Downloads
61
Readme
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.
| Attribute/prop | input/output | optional/required | Type | Default | Description |
| -------------- | ------------ | ----------------- | -------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| apiVersion | input | optional | string | v2 | The version of the Plaid Link api to use |
| clientName | input | required | string | null | The name of your application, gets used in the Plaid Link UI. |
| product | input | optional | PlaidProductType[] | ['auth'] | An array of the names of the products you'd like to authorize. Available options are transactions
, auth
, and identity
. |
| accountSubtypes | input | optional | PlaidAccountSubtypes | null | Filtering Accounts and Institutions by Account Subtype |
| publicKey | input | required | string | null | The public key from your Plaid account Make sure it's the public key and not the private key |
| env | input | optional | string | sandbox | Can be one of available plaid environments: sandbox
, development
, or production
|
| success | output | required | function | n/a | Passes the result from the onSuccess function to your component |
| exit | output | required | function | n/a | Passes the result from the onExit function to your component |
| 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 once Plaid Link library is all loaded |
| language | input | optional | PlaidSupportedLanguage | en | Specify a Plaid-supported language to localize Link. English will be used by default. |
| countryCodes | input | optional | PlaidSupportedCountry[] | ['US'] | An array of strings of Plaid supported country codes |
| webhook | input | optional | string | null | You can provide a webhook for each item that Plaid will send events to. |
| token | input | optional | string | null | You can provide a token if you are re-authenticating or updating an item that has previously been linked. |
| isWebview | input | optional | boolean | null | Set to true if launching Link within a WebView |
| linkCustomizationName | input | optional | string | null | You can provide a webhook for each item that Plaid will send events to. |
| oauthNonce | input | optional | string | null | An oauthNonce is required to support OAuth authentication flows when launching or re-launching Link on a mobile device |
| oauthRedirectUri | input | optional | string | null | An oauthRedirectUri is required to support OAuth authentication flows when launching Link on a mobile device |
| oauthStateId | input | optional | string | null | An oauthStateId is required to support OAuth authentication flows when re-launching Link on a mobile device |
| paymentToken | input | optional | string | null | A paymentToken must be specified if you are using the payment_initiation product. |