# ngx-plaid-link

> Angular Plaid Link Directive & Button Component

Latest version **14.0.0** (published 2022-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-plaid-link
pnpm add ngx-plaid-link
yarn add ngx-plaid-link
bun add ngx-plaid-link
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 14.0.0 |
| Published | 2022-07-12 |
| First published | 2018-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 145.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 29 |
| Author | Mike Roberts |
| Maintainers | mike-roberts |

## Links

- npm: https://www.npmjs.com/package/ngx-plaid-link
- Repository: https://github.com/mike-roberts/ngx-plaid-link
- Issues: https://github.com/mike-roberts/ngx-plaid-link/issues
- npm.io page: https://npm.io/package/ngx-plaid-link

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Recent versions

- 14.0.0 (latest) — 2022-07-12
- 13.0.2 — 2022-07-12
- 1.0.5 — 2022-07-12
- 13.0.1 — 2022-01-25
- 13.0.0 — 2022-01-24
- 1.0.4 — 2022-01-24
- 1.0.3 — 2020-12-02
- 1.0.2 — 2019-06-13
- 1.0.1 — 2018-08-16
- 1.0.0 — 2018-08-15
- 0.1.0 — 2018-08-15

## 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

```shell
$ npm install ngx-plaid-link
```

#### 1b) Or Yarn

```shell
$ yarn add ngx-plaid-link
```

#### 2) Import the NgxPlaidLinkModule

```typescript
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

```html
<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

```html
<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.

```typescript
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. 
  - <sub><sup>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`. `ngx-plaid-link@1.0.3` 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.</sup></sub>

| 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](https://plaid.com/docs/faq/#does-plaid-support-international-bank-accounts-) |
| 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](https://plaid.com/docs/link/web/#link-web-create-key). 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](https://plaid.com/docs/link/web/#link-web-create-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](https://dashboard.plaid.com/team/api). |
| 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...

---
_Source: https://npm.io/package/ngx-plaid-link · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._