README
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 {}
ngxPlaidLink
Directives
3a) The easy way, the <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,
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);
}
}
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 | required | string | null | The public key from your Plaid account Make sure it's the public key and not the private key |
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. |
token | input | optional | string | null | You can provide a token if you are re-authenticating or updating an item that has previously been linked. |
webhook | input | optional | string | null | You can provide a webhook for each item that Plaid will send events to. |
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...