Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-plaid-link

Package Overview
Dependencies
Maintainers
7
Versions
54
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-plaid-link - npm Package Compare versions

Comparing version 2.3.0-alpha.0 to 3.0.0

22

CHANGELOG.md
# Changelog
## 3.0.0
- Add Link token options to initialization and move onEvent types to their own interface. (#116)
## 2.2.3
- (Internal) Bump websocket-extensions from 0.1.3 to 0.1.4 (#114)
## 2.2.2
- Ensure Plaid link-initialize.js is embedded only once (#109)
- Config `product` prop updates should refresh instance on change (#104)
## 2.2.1
- (Internal) Bump yarn.lock dependencies for react-script-hook version bump (#99)
## 2.2.0
- Pull in version 1.0.17 of react-script-hook (#97)
- Fix race condition between script load and rerenders ([react-script-hook#10](https://github.com/hupe1980/react-script-hook/pull/10))
## 2.1.0

@@ -4,0 +26,0 @@

55

dist/index.d.ts
/// <reference types="react" />
import React from "react";
interface CommonPlaidLinkOptions {
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callback that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
type PlaidLinkOptionsWithPublicKey = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
// Provide a public_token to initialize Link in update mode.
token?: string;
// Displayed once a user has successfully linked their account

@@ -11,5 +29,2 @@ clientName: string;

product: Array<string>;
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// An array of countries to filter institutions

@@ -35,25 +50,15 @@ countryCodes?: Array<string>;

paymentToken?: string;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callbac that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
} // Either the publicKey or the token field must be configured
// Either the publicKey or the token field must be configured
type PlaidLinkOptions = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
token?: string;
}) | (CommonPlaidLinkOptions & {
// Specify an item add token to launch link in normal mode.
//
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
});
type PlaidLinkOptionsWithLinkToken = (CommonPlaidLinkOptions & {
// Provide a link_token associated with your account. Create one
// using the /link/token/create endpoint.
token: string;
});
// receivedRedirectUri is required on the second-initialization of link when using Link
// with a redirect_uri to support OAuth flows.
receivedRedirectUri?: string;
}); // Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
// Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
type PlaidLinkOptions = PlaidLinkOptionsWithPublicKey | PlaidLinkOptionsWithLinkToken;
type PlaidLinkPropTypes = PlaidLinkOptions & {

@@ -60,0 +65,0 @@ children: React.ReactNode;

55

dist/index.esm.d.ts
/// <reference types="react" />
import React from "react";
interface CommonPlaidLinkOptions {
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callback that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
type PlaidLinkOptionsWithPublicKey = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
// Provide a public_token to initialize Link in update mode.
token?: string;
// Displayed once a user has successfully linked their account

@@ -11,5 +29,2 @@ clientName: string;

product: Array<string>;
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// An array of countries to filter institutions

@@ -35,25 +50,15 @@ countryCodes?: Array<string>;

paymentToken?: string;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callbac that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
} // Either the publicKey or the token field must be configured
// Either the publicKey or the token field must be configured
type PlaidLinkOptions = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
token?: string;
}) | (CommonPlaidLinkOptions & {
// Specify an item add token to launch link in normal mode.
//
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
});
type PlaidLinkOptionsWithLinkToken = (CommonPlaidLinkOptions & {
// Provide a link_token associated with your account. Create one
// using the /link/token/create endpoint.
token: string;
});
// receivedRedirectUri is required on the second-initialization of link when using Link
// with a redirect_uri to support OAuth flows.
receivedRedirectUri?: string;
}); // Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
// Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
type PlaidLinkOptions = PlaidLinkOptionsWithPublicKey | PlaidLinkOptionsWithLinkToken;
type PlaidLinkPropTypes = PlaidLinkOptions & {

@@ -60,0 +65,0 @@ children: React.ReactNode;

58

dist/index.esm.js

@@ -89,3 +89,3 @@ import react, { useState, useEffect } from 'react';

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

@@ -98,3 +98,6 @@

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];

@@ -125,21 +128,4 @@ var _n = true;

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

@@ -178,14 +164,26 @@

var src = _a.src,
attributes = __rest(_a, ["src"]);
_b = _a.checkForExisting,
checkForExisting = _b === void 0 ? false : _b,
attributes = __rest(_a, ["src", "checkForExisting"]);
var _b = react.useState(true),
loading = _b[0],
setLoading = _b[1];
var _c = react.useState(true),
loading = _c[0],
setLoading = _c[1];
var _c = react.useState(null),
error = _c[0],
setError = _c[1];
var _d = react.useState(null),
error = _d[0],
setError = _d[1];
react.useEffect(function () {
if (!isBrowser) return;
if (checkForExisting) {
var existing = document.querySelectorAll("script[src=\"" + src + "\"]");
if (existing.length > 0) {
setLoading(false);
return;
}
}
var scriptEl = document.createElement('script');

@@ -327,3 +325,4 @@ scriptEl.setAttribute('src', src);

var _useScript = useScript({
src: PLAID_LINK_STABLE_URL
src: PLAID_LINK_STABLE_URL,
checkForExisting: true
}),

@@ -345,2 +344,3 @@ _useScript2 = _slicedToArray(_useScript, 2),

var products = (options.product || []).slice().sort().join(',');
useEffect(function () {

@@ -383,3 +383,3 @@ // If the link.js script is still loading, return prematurely

};
}, [loading, error, options.token, (options.product || []).slice().sort().join(',')]);
}, [loading, error, options.token, products]);
return {

@@ -386,0 +386,0 @@ error: error,

58

dist/index.js

@@ -96,3 +96,3 @@ 'use strict';

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

@@ -105,3 +105,6 @@

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];

@@ -132,21 +135,4 @@ var _n = true;

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

@@ -185,14 +171,26 @@

var src = _a.src,
attributes = __rest(_a, ["src"]);
_b = _a.checkForExisting,
checkForExisting = _b === void 0 ? false : _b,
attributes = __rest(_a, ["src", "checkForExisting"]);
var _b = react__default.useState(true),
loading = _b[0],
setLoading = _b[1];
var _c = react__default.useState(true),
loading = _c[0],
setLoading = _c[1];
var _c = react__default.useState(null),
error = _c[0],
setError = _c[1];
var _d = react__default.useState(null),
error = _d[0],
setError = _d[1];
react__default.useEffect(function () {
if (!isBrowser) return;
if (checkForExisting) {
var existing = document.querySelectorAll("script[src=\"" + src + "\"]");
if (existing.length > 0) {
setLoading(false);
return;
}
}
var scriptEl = document.createElement('script');

@@ -334,3 +332,4 @@ scriptEl.setAttribute('src', src);

var _useScript = useScript({
src: PLAID_LINK_STABLE_URL
src: PLAID_LINK_STABLE_URL,
checkForExisting: true
}),

@@ -352,2 +351,3 @@ _useScript2 = _slicedToArray(_useScript, 2),

var products = (options.product || []).slice().sort().join(',');
react.useEffect(function () {

@@ -390,3 +390,3 @@ // If the link.js script is still loading, return prematurely

};
}, [loading, error, options.token, (options.product || []).slice().sort().join(',')]);
}, [loading, error, options.token, products]);
return {

@@ -393,0 +393,0 @@ error: error,

55

dist/index.umd.d.ts
/// <reference types="react" />
import React from "react";
interface CommonPlaidLinkOptions {
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callback that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
type PlaidLinkOptionsWithPublicKey = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
// Provide a public_token to initialize Link in update mode.
token?: string;
// Displayed once a user has successfully linked their account

@@ -11,5 +29,2 @@ clientName: string;

product: Array<string>;
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// An array of countries to filter institutions

@@ -35,25 +50,15 @@ countryCodes?: Array<string>;

paymentToken?: string;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callbac that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
} // Either the publicKey or the token field must be configured
// Either the publicKey or the token field must be configured
type PlaidLinkOptions = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
token?: string;
}) | (CommonPlaidLinkOptions & {
// Specify an item add token to launch link in normal mode.
//
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
});
type PlaidLinkOptionsWithLinkToken = (CommonPlaidLinkOptions & {
// Provide a link_token associated with your account. Create one
// using the /link/token/create endpoint.
token: string;
});
// receivedRedirectUri is required on the second-initialization of link when using Link
// with a redirect_uri to support OAuth flows.
receivedRedirectUri?: string;
}); // Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
// Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
type PlaidLinkOptions = PlaidLinkOptionsWithPublicKey | PlaidLinkOptionsWithLinkToken;
type PlaidLinkPropTypes = PlaidLinkOptions & {

@@ -60,0 +65,0 @@ children: React.ReactNode;

58

dist/index.umd.js

@@ -95,3 +95,3 @@ (function (global, factory) {

function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

@@ -104,3 +104,6 @@

function _iterableToArrayLimit(arr, i) {
if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) {
return;
}
var _arr = [];

@@ -131,21 +134,4 @@ var _n = true;

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

@@ -184,14 +170,26 @@

var src = _a.src,
attributes = __rest(_a, ["src"]);
_b = _a.checkForExisting,
checkForExisting = _b === void 0 ? false : _b,
attributes = __rest(_a, ["src", "checkForExisting"]);
var _b = react__default.useState(true),
loading = _b[0],
setLoading = _b[1];
var _c = react__default.useState(true),
loading = _c[0],
setLoading = _c[1];
var _c = react__default.useState(null),
error = _c[0],
setError = _c[1];
var _d = react__default.useState(null),
error = _d[0],
setError = _d[1];
react__default.useEffect(function () {
if (!isBrowser) return;
if (checkForExisting) {
var existing = document.querySelectorAll("script[src=\"" + src + "\"]");
if (existing.length > 0) {
setLoading(false);
return;
}
}
var scriptEl = document.createElement('script');

@@ -333,3 +331,4 @@ scriptEl.setAttribute('src', src);

var _useScript = useScript({
src: PLAID_LINK_STABLE_URL
src: PLAID_LINK_STABLE_URL,
checkForExisting: true
}),

@@ -351,2 +350,3 @@ _useScript2 = _slicedToArray(_useScript, 2),

var products = (options.product || []).slice().sort().join(',');
react.useEffect(function () {

@@ -389,3 +389,3 @@ // If the link.js script is still loading, return prematurely

};
}, [loading, error, options.token, (options.product || []).slice().sort().join(',')]);
}, [loading, error, options.token, products]);
return {

@@ -392,0 +392,0 @@ error: error,

55

dist/index.umd.min.d.ts
/// <reference types="react" />
import React from "react";
interface CommonPlaidLinkOptions {
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callback that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
type PlaidLinkOptionsWithPublicKey = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
// Provide a public_token to initialize Link in update mode.
token?: string;
// Displayed once a user has successfully linked their account

@@ -11,5 +29,2 @@ clientName: string;

product: Array<string>;
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// An array of countries to filter institutions

@@ -35,25 +50,15 @@ countryCodes?: Array<string>;

paymentToken?: string;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callbac that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
} // Either the publicKey or the token field must be configured
// Either the publicKey or the token field must be configured
type PlaidLinkOptions = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
token?: string;
}) | (CommonPlaidLinkOptions & {
// Specify an item add token to launch link in normal mode.
//
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
});
type PlaidLinkOptionsWithLinkToken = (CommonPlaidLinkOptions & {
// Provide a link_token associated with your account. Create one
// using the /link/token/create endpoint.
token: string;
});
// receivedRedirectUri is required on the second-initialization of link when using Link
// with a redirect_uri to support OAuth flows.
receivedRedirectUri?: string;
}); // Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
// Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
type PlaidLinkOptions = PlaidLinkOptionsWithPublicKey | PlaidLinkOptionsWithLinkToken;
type PlaidLinkPropTypes = PlaidLinkOptions & {

@@ -60,0 +65,0 @@ children: React.ReactNode;

2

dist/index.umd.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).PlaidLink={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var l,a=e[Symbol.iterator]();!(r=(l=a.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==a.return||a.return()}finally{if(o)throw i}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(n);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var c="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function f(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function d(e,t){return e(t={exports:{}},t.exports),t.exports}var p=d((function(e,t){var r=c&&c.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.src,i=r(e,["src"]),l=n.useState(!0),a=l[0],u=l[1],c=n.useState(null),f=c[0],d=c[1];return n.useEffect((function(){if(o){var e=document.createElement("script");e.setAttribute("src",t),Object.keys(i).forEach((function(t){void 0===e[t]?e.setAttribute(t,i[t]):e[t]=i[t]}));var n=function(){u(!1)},r=function(e){d(e)};return e.addEventListener("load",n),e.addEventListener("error",r),document.body.appendChild(e),function(){e.removeEventListener("load",n),e.removeEventListener("error",r)}}}),[t]),[a,f]};var o="undefined"!=typeof window&&void 0!==window.document}));f(p);var s=f(d((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=p.default}))),y=function(e){var t={plaid:null,open:!1,onExitCallback:null};if("undefined"==typeof window||!window.Plaid)throw new Error("Plaid not loaded");var n,o,l,a,u=(n=e,o="publicKey",l="key",a={},delete Object.assign(a,n,r({},l,n[o]))[o],a);t.plaid=window.Plaid.create(i({},u,{onExit:function(){u.onExit&&u.onExit.apply(u,arguments),t.onExitCallback&&t.onExitCallback()}}));return{open:function(){t.plaid&&(t.open=!0,t.onExitCallback=null,t.plaid.open())},exit:function(e,n){t.open&&t.plaid?(t.onExitCallback=n,t.plaid.exit(e),e&&e.force&&(t.open=!1)):n&&n()},destroy:function(){t.plaid&&(t.plaid.destroy(),t.plaid=null)}}},b=function(){},v=function(e){var n=a(s({src:"https://cdn.plaid.com/link/v2/stable/link-initialize.js"}),2),r=n[0],o=n[1],l=a(t.useState(null),2),u=l[0],c=l[1],f=a(t.useState(!1),2),d=f[0],p=f[1];return t.useEffect((function(){if(!r){if(!o&&window.Plaid){null!=u&&u.exit({force:!0},(function(){return u.destroy()}));var t=y(i({},e,{onLoad:function(){p(!0),e.onLoad&&e.onLoad()}}));return c(t),function(){return t.exit({force:!0},(function(){return t.destroy()}))}}console.error("Error loading Plaid",o)}}),[r,o,e.token,(e.product||[]).slice().sort().join(",")]),{error:o,ready:!r||d,exit:u?u.exit:b,open:u?u.open:b}},O=function(e){var t=e.children,r=e.style,o=e.className,a=l(e,["children","style","className"]),u=v(i({},a)),c=u.error,f=u.open;return n.createElement("button",{disabled:Boolean(c),type:"button",className:o,style:i({padding:"6px 4px",outline:"none",background:"#FFFFFF",border:"2px solid #F1F1F1",borderRadius:"4px"},r),onClick:function(){return f()}},t)};O.displayName="PlaidLink",e.PlaidLink=O,e.usePlaidLink=v,Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).PlaidLink={},e.React)}(this,(function(e,t){"use strict";var n="default"in t?t.default:t;function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e))&&"[object Arguments]"!==Object.prototype.toString.call(e))return;var n=[],r=!0,o=!1,i=void 0;try{for(var l,a=e[Symbol.iterator]();!(r=(l=a.next()).done)&&(n.push(l.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==a.return||a.return()}finally{if(o)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var u="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function c(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function f(e,t){return e(t={exports:{}},t.exports),t.exports}var d=f((function(e,t){var r=u&&u.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n};Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.src,i=e.checkForExisting,l=void 0!==i&&i,a=r(e,["src","checkForExisting"]),u=n.useState(!0),c=u[0],f=u[1],d=n.useState(null),p=d[0],s=d[1];return n.useEffect((function(){if(o){if(l)if(document.querySelectorAll('script[src="'+t+'"]').length>0)return void f(!1);var e=document.createElement("script");e.setAttribute("src",t),Object.keys(a).forEach((function(t){void 0===e[t]?e.setAttribute(t,a[t]):e[t]=a[t]}));var n=function(){f(!1)},r=function(e){s(e)};return e.addEventListener("load",n),e.addEventListener("error",r),document.body.appendChild(e),function(){e.removeEventListener("load",n),e.removeEventListener("error",r)}}}),[t]),[c,p]};var o="undefined"!=typeof window&&void 0!==window.document}));c(d);var p=c(f((function(e,t){Object.defineProperty(t,"__esModule",{value:!0}),t.default=d.default}))),s=function(e){var t={plaid:null,open:!1,onExitCallback:null};if("undefined"==typeof window||!window.Plaid)throw new Error("Plaid not loaded");var n,o,l,a,u=(n=e,o="publicKey",l="key",a={},delete Object.assign(a,n,r({},l,n[o]))[o],a);t.plaid=window.Plaid.create(i({},u,{onExit:function(){u.onExit&&u.onExit.apply(u,arguments),t.onExitCallback&&t.onExitCallback()}}));return{open:function(){t.plaid&&(t.open=!0,t.onExitCallback=null,t.plaid.open())},exit:function(e,n){t.open&&t.plaid?(t.onExitCallback=n,t.plaid.exit(e),e&&e.force&&(t.open=!1)):n&&n()},destroy:function(){t.plaid&&(t.plaid.destroy(),t.plaid=null)}}},y=function(){},b=function(e){var n=a(p({src:"https://cdn.plaid.com/link/v2/stable/link-initialize.js",checkForExisting:!0}),2),r=n[0],o=n[1],l=a(t.useState(null),2),u=l[0],c=l[1],f=a(t.useState(!1),2),d=f[0],b=f[1],v=(e.product||[]).slice().sort().join(",");return t.useEffect((function(){if(!r){if(!o&&window.Plaid){null!=u&&u.exit({force:!0},(function(){return u.destroy()}));var t=s(i({},e,{onLoad:function(){b(!0),e.onLoad&&e.onLoad()}}));return c(t),function(){return t.exit({force:!0},(function(){return t.destroy()}))}}console.error("Error loading Plaid",o)}}),[r,o,e.token,v]),{error:o,ready:!r||d,exit:u?u.exit:y,open:u?u.open:y}},v=function(e){var t=e.children,r=e.style,o=e.className,a=l(e,["children","style","className"]),u=b(i({},a)),c=u.error,f=u.open;return n.createElement("button",{disabled:Boolean(c),type:"button",className:o,style:i({padding:"6px 4px",outline:"none",background:"#FFFFFF",border:"2px solid #F1F1F1",borderRadius:"4px"},r),onClick:function(){return f()}},t)};v.displayName="PlaidLink",e.PlaidLink=v,e.usePlaidLink=b,Object.defineProperty(e,"__esModule",{value:!0})}));

4

package.json
{
"name": "react-plaid-link",
"version": "2.3.0-alpha.0",
"version": "3.0.0",
"description": "A React component for Plaid Link",

@@ -46,3 +46,3 @@ "files": [

"prop-types": "^15.7.2",
"react-script-hook": "1.0.17"
"react-script-hook": "1.1.0"
},

@@ -49,0 +49,0 @@ "peerDependencies": {

45

README.md

@@ -48,6 +48,3 @@ # react-plaid-link [![npm version](https://badge.fury.io/js/react-plaid-link.svg)](http://badge.fury.io/js/react-plaid-link)

const config = {
clientName: 'Your app name',
env: 'sandbox',
product: ['auth', 'transactions'],
publicKey: '<YOUR_PLAID_PUBLIC_KEY>',
token: '<GENERATED_LINK_TOKEN>',
onSuccess,

@@ -81,6 +78,3 @@ // ...

<PlaidLink
clientName="Your app name"
env="sandbox"
product={['auth', 'transactions']}
publicKey="<YOUR_PLAID_PUBLIC_KEY>"
token="<GENERATED_LINK_TOKEN>"
onSuccess={onSuccess}

@@ -99,29 +93,16 @@ {...}

Please refer to the [official Plaid Link docs](https://plaid.com/docs/#creating-items-with-plaid-link) for
a more holistic understanding of the various Link options.
a more holistic understanding of the various Link options and the [link_token](https://plaid.com/docs/#create-link-token).
```ts
// src/types/index.ts
interface PlaidLinkOptions {
clientName: string;
env: string;
publicKey: string;
product: Array<string>;
interface PlaidLinkOptionsWithLinkToken = {
token: string;
onSuccess: Function;
// optional
onExit?: Function;
onLoad?: Function;
onEvent?: Function;
accountSubtypes?: { [key: string]: Array<string> };
countryCodes?: Array<string>;
language?: string;
linkCustomizationName?: string;
oauthNonce?: string;
oauthRedirectUri?: string;
oauthStateId?: string;
paymentToken?: string;
token?: string;
userEmailAddress?: string;
userLegalName?: string;
webhook?: string;
receivedRedirectUri?: string;
}
type PlaidLinkOptions = PlaidLinkOptionsWithLinkToken;
```

@@ -132,1 +113,11 @@

Typescript definitions for `react-plaid-link` are built into the npm packge.
## Publishing
You'll need NPM publishing rights for your NPM user. Then you can run:
```
make release-(patch|minor|major)
```
Read [semver](https://semver.org/) to determine what type of version bump to use.

61

src/types/index.ts
import React from 'react';
interface CommonPlaidLinkOptions {
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callback that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
export type PlaidLinkOptionsWithPublicKey = (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
// Provide a public_token to initialize Link in update mode.
token?: string;
// Displayed once a user has successfully linked their account

@@ -11,5 +30,2 @@ clientName: string;

product: Array<string>;
// A function that is called when a user has successfully connecter an Item.
// The function should expect two arguments, the public_key and a metadata object
onSuccess: Function;
// An array of countries to filter institutions

@@ -33,29 +49,18 @@ countryCodes?: Array<string>;

paymentToken?: string;
// A callback that is called when a user has specifically exited Link flow
onExit?: Function;
// A callbac that is called when the Link module has finished loading.
// Calls to plaidLinkHandler.open() prior to the onLoad callback will be
// delayed until the module is fully loaded.
onLoad?: Function;
// A callback that is called during a user's flow in Link.
onEvent?: Function;
}
});
// Either the publicKey or the token field must be configured
export type PlaidLinkOptions =
| (CommonPlaidLinkOptions & {
// The public_key associated with your account; available from
// the Plaid dashboard (https://dashboard.plaid.com)
publicKey: string;
token?: string;
})
| (CommonPlaidLinkOptions & {
// Specify an item add token to launch link in normal mode.
//
// Specify an existing user's public token to launch Link in update mode.
// This will cause Link to open directly to the authentication step for
// that user's institution.
token: string;
});
export type PlaidLinkOptionsWithLinkToken = (CommonPlaidLinkOptions & {
// Provide a link_token associated with your account. Create one
// using the /link/token/create endpoint.
token: string;
// receivedRedirectUri is required on the second-initialization of link when using Link
// with a redirect_uri to support OAuth flows.
receivedRedirectUri?: string;
});
// Either the publicKey or the token field must be configured. The publicKey
// is deprecated so prefer to initialize Link with a Link Token instead.
export type PlaidLinkOptions =
PlaidLinkOptionsWithPublicKey | PlaidLinkOptionsWithLinkToken;
export type PlaidLinkPropTypes = PlaidLinkOptions & {

@@ -62,0 +67,0 @@ children: React.ReactNode;

7

src/usePlaidLink.ts

@@ -5,3 +5,3 @@ import { useEffect, useState } from 'react';

import { createPlaid, PlaidFactory } from './factory';
import { PlaidLinkOptions } from './types';
import { PlaidLinkOptions, PlaidLinkOptionsWithPublicKey } from './types';

@@ -25,3 +25,3 @@ const PLAID_LINK_STABLE_URL =

// Asynchronously load the plaid/link/stable url into the DOM
const [loading, error] = useScript({ src: PLAID_LINK_STABLE_URL });
const [loading, error] = useScript({ src: PLAID_LINK_STABLE_URL, checkForExisting: true });

@@ -31,2 +31,3 @@ // internal state

const [iframeLoaded, setIframeLoaded] = useState(false);
const products = ((options as PlaidLinkOptionsWithPublicKey).product || []).slice().sort().join(',');

@@ -63,3 +64,3 @@ useEffect(() => {

return () => next.exit({ force: true }, () => next.destroy());
}, [loading, error, options.token, (options.product || []).slice().sort().join(',')]);
}, [loading, error, options.token, products]);

@@ -66,0 +67,0 @@ return {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc