Code Monkey home page Code Monkey logo

react-native-plaid-link-sdk's Introduction

Plaid React Native SDK

version License

The Plaid React Native SDK provides the client-side component that your users will interact with in order to link their accounts to Plaid and allow you access to their accounts via the Plaid API.

For more information about Plaid Link check out our introduction documentation.

Plaid currently supports two versions of the Plaid React Native SDK v10.x and v11.x. You can find v10 on the master-v10 branch.

Features

The SDK provides:

  • A PlaidLink functional component.
  • A function to open Link.
  • A hook to handle onEvent callbacks.
  • A function to dismiss link on iOS.

Getting Started

Get started with our 📝 documentation and the 📱example project, or ↔️ Tiny Quickstart (React Native) which is an end to end example demonstrating a minimal integration with this SDK.

If you're unfamiliar with React Native we recommend starting with the environment setup instructions.

In your React Native project directory:

npm install --save react-native-plaid-link-sdk

iOS Setup

Add Plaid to your project’s Podfile as follows (likely located at ios/Podfile). The latest version is version.

Autolinking should install the CocoaPods dependencies for iOS project. If it fails you can run

cd ios && bundle install && bundle exec pod install

Android Setup

  • Android 5.0 (API level 21) and above.
    • Your compileSdkVersion must be 33.
  • Android gradle plugin 4.x and above.

AutoLinking should handle all of the Android setup.

React Native Setup

  • To initialize PlaidLink, you will need to first create a link_token at /link/token/create. Check out our QuickStart guide for additional API information.

  • After creating a link_token, you'll need to pass it into your app and use it to launch Link:

import { Text } from 'react-native';
import { PlaidLink, LinkSuccess, LinkExit, LinkLogLevel, LinkIOSPresentationStyle } from 'react-native-plaid-link-sdk';

const MyPlaidComponent = () => {
  return (
    <PlaidLink
        tokenConfig={{
            token: "#GENERATED_LINK_TOKEN#",
            // OPTIONAL - log level.
            logLevel: LinkLogLevel.ERROR,
            // OPTIONAL - A `Bool` indicating that Link should skip displaying a loading animation until the Link UI is fully loaded.
            // See Types.ts for more information.
            noLoadingState: false,
        }}
        onSuccess={(success: LinkSuccess) => { console.log(success) }}
        onExit={(exit: LinkExit) => { console.log(exit) }}
        // OPTIONAL - MODAL or FULL_SCREEEN presentation on iOS. Defaults to MODAL.
        // UI is always presented in full screen on Android.
        iOSPresentationStyle={LinkIOSPresentationStyle.MODAL}
    >
        <Text>Add Account</Text>
    </PlaidLink>
  );
};

PlaidLink wraps the view you provide as a child with a Pressable component and intercepts the onPress event.

OAuth requirements

⚠️ All integrations must migrate to version 9.0.0 or later of the React Native SDK (requires version 4.1.0 or later of the iOS LinkKit SDK) by January 1, 2024, to maintain support for Chase OAuth on iOS.

Android OAuth Requirements
Register your app package name
  1. Log into your Plaid Dashboard and navigate to the API page under the Developers tab.
  2. Next to Allowed Android package names click "Configure" then "Add New Android Package Name".
  3. Enter your package name, for example com.plaid.example.
  4. Click "Save Changes", you may be prompted to re-enter your password.
iOS OAuth Requirements

For iOS OAuth to work, specific requirements must be met.

  1. Redirect URIs must be registered, and set up as universal links.
  2. Your native iOS application, must be configured with your associated domain. See your iOS set up universal links for more information.
Link Token OAuth Requirements
  • On iOS you must configure your link_token with a redirect_uri to support OAuth. When creating a link_token for initializing Link on Android, android_package_name must be specified and redirect_uri must be left blank.

  • On Android you must configure your link_token with an android_package_name to support OAuth. When creating a link_token for initializing Link on iOS, android_package_name must be left blank and redirect_uri should be used instead.

To receive onEvent callbacks:

The React Native Plaid module emits onEvent events throughout the account linking process — see details here. To receive these events in your React Native app, wrap the PlaidLink react component with the following in order to listen for those events:

import React from 'react';
import { Text, NativeEventEmitter, NativeModules, Platform } from 'react-native';

class PlaidEventContainer extends React.Component {

  componentDidMount() {
    const emitter = new NativeEventEmitter(Platform.OS === 'ios' ? NativeModules.RNLinksdk : NativeModules.PlaidAndroid);
    this._listener = emitter.addListener('onEvent', (e) => console.log(e));
  }

  componentWillUnmount() {
    if (this._listener) {
      this._listener.remove();
    }
  }

  ...
}

You can also use the usePlaidEmitter hook in react functional components:

  usePlaidEmitter((event: LinkEvent) => {
    console.log(event)
  })

Upgrading

Plaid releases updates to the SDK approximately every few months. For the best user experience, we recommend using the latest version of the SDK.

Major SDK versions are released annually. SDK versions are supported for two years; with each major SDK release, Plaid will stop officially supporting any previous SDK versions that are more than two years old.

While these older versions are expected to continue to work without disruption, Plaid will not provide assistance with unsupported SDK versions.

Version compatibility

Plaid SDK Version Min React Native Version Android SDK Android Min Version Android Compile Version iOS SDK iOS Min Version Status
11.4.0 * [4.1.1+] 21 33 >=5.1.0 14.0 Active, supports Xcode 15.0.1
11.3.0 * [4.0.0+] 21 33 >=5.1.0 14.0 Active, supports Xcode 15.0.1
11.2.0 * [4.1.0+] 21 33 >=5.1.0 14.0 Deprecated
11.1.0 * [4.0.0+] 21 33 >=5.1.0 14.0 Active, supports Xcode 15.0.1
11.0.3 * [4.0.0+] 21 33 >=5.0.0 14.0 Active, supports Xcode 15.0.1
11.0.2 * [4.0.0+] 21 33 >=5.0.0 14.0 Active, supports Xcode 15.0.1
11.0.1 * [4.0.0+] 21 33 >=5.0.0 14.0 Active, supports Xcode 15.0.1
11.0.0 * [4.0.0+] 21 33 >=5.0.0 14.0 Active, supports Xcode 15.0.1
10.11.0 >= 0.66.0 [3.14.1+] 21 33 >=4.7.1 11.0 Active, supports Xcode 14
10.10.0 >= 0.66.0 [3.14.2+] 21 33 >=4.7.1 11.0 Deprecated
10.9.1 >= 0.66.0 [3.14.1+] 21 33 >=4.7.0 11.0 Active, supports Xcode 14
10.9.0 >= 0.66.0 [3.14.1+] 21 33 >=4.7.0 11.0 Active, supports Xcode 14
10.8.0 >= 0.66.0 [3.14.0+] 21 33 >=4.7.0 11.0 Active, supports Xcode 14
10.7.0 >= 0.66.0 [3.14.0+] 21 33 >=4.6.4 11.0 Active, supports Xcode 14
10.6.4 >= 0.66.0 [3.14.0+] 21 33 >=4.6.4 11.0 Active, supports Xcode 14
10.6.3 >= 0.66.0 [3.14.0+] 21 33 >=4.6.4 11.0 Active, supports Xcode 14
10.6.2 >= 0.66.0 [3.14.0+] 21 33 >=4.6.4 11.0 Deprecated, supports Xcode 14
10.6.0 >= 0.66.0 [3.14.0+] 21 33 >=4.6.4 11.0 Deprecated, supports Xcode 14
10.5.0 >= 0.66.0 [3.12.2+] 21 33 >=4.5.1 11.0 Deprecated, supports Xcode 14
10.4.0 >= 0.66.0 [3.12.2+] 21 33 >=4.4.0 11.0 Deprecated, supports Xcode 14
10.3.0 >= 0.66.0 [3.12.1+] 21 33 >=4.3.0 11.0 Deprecated, supports Xcode 14
10.2.0 >= 0.66.0 [3.12.0+] 21 33 >=4.3.0 11.0 Deprecated, supports Xcode 14
10.1.0 >= 0.66.0 [3.11.0+] 21 33 >=4.2.0 11.0 Deprecated, supports Xcode 14
10.0.0 >= 0.66.0 [3.10.1+] 21 33 >=4.1.0 11.0 Deprecated, supports Xcode 14
9.1.0 >= 0.65.3 [3.13.2+] 21 33 >=4.4.0 11.0 Deprecated, supports Xcode 14
9.0.1 >= 0.65.3 [3.10.1+] 21 33 >=4.1.0 11.0 Deprecated, supports Xcode 14
9.0.0 >= 0.65.3 [3.10.1+] 21 33 >=4.1.0 11.0 Deprecated, supports Xcode 14

Contributing

See the contributor guidelines to learn how to contribute to the repository.

react-native-plaid-link-sdk's People

Contributors

adamhari avatar afh avatar amytang0 avatar averyv avatar dependabot[bot] avatar dtroupe-plaid avatar dustinhorton avatar jamesrperkins avatar jeroenmols avatar jhurray avatar jwoogerd avatar krisztiaan avatar melissaosullivan avatar otherchen avatar pabloearg avatar pbernasconi avatar pedroor avatar phoenixy1 avatar pladaub avatar prometheas avatar shaharyarmaroof avatar shaharyarmaroof-em avatar ssead avatar stoyand avatar taylor123 avatar vafada avatar willrstern avatar wkiefer avatar yawnr avatar zsweigart avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.