Giter Club home page Giter Club logo

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

Getting Started

In your react-native project directory:

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

Updating from previous versions.

When upgrading from a previous major version of this library, see the notes here for additional instructions.

iOS

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

pod 'Plaid', '~> <insert latest version>'

Then install your cocoapods dependencies:

(cd ios && pod install)

Add a Run Script build phase (after the [CP] Embed Pods Frameworks step) to your target as described in Plaid Link for iOS documentation. This strips simulator symbols from App Store release builds.

That's it if using a recent react-native version with autolinking support.

Manual Integration

If using a version of react-native without autolinking support, then you will need to:

react-native link react-native-plaid-link-sdk

followed by

  1. In Xcode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-plaid-link-sdkios and add RNLinksdk.xcodeproj
  3. In Xcode, in the project navigator, select your project. Add libRNLinksdk.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

1. Register your app id

  1. Log into your Plaid Dashboard at the API page
  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

2. Add PlaidPackage to your application

  1. Go to android/app/src/main/java/<AppName>/MainApplication.java
  2. Add import com.plaid.PlaidPackage; to the imports section
  3. Add packages.add(new PlaidPackage()); to List<ReactPackage> getPackages();

3. Configure Gradle

  1. Go to the project level android/app/build.gradle
  2. Make sure you are using a min sdk >= 21
  3. Use the latest Android link version version
  4. Add the following dependencies:
dependencies {
    ...
    implementation project(':react-native-plaid-link-sdk')
    implementation 'com.plaid.link:sdk-core:<insert latest version>'
    implementation 'com.squareup.okhttp3:okhttp-urlconnection:<insert at least version 4.x>'
  1. Go to android/settings.gradle
  2. Add the following lines:
include ':react-native-plaid-link-sdk'
project(':react-native-plaid-link-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plaid-link-sdk/android')

Version Compatibiltiy

React Native SDK Android SDK iOS SDK Status
5.x.x [2.1.0+) >=1.1.34 Active
4.x.x [2.0.0-2.1.0) <=1.1.33 Active
3.x.x [1.0.0-2.0.0) <=1.1.33 Deprecated
2.x.x [0.3.0-1.0.0) <=1.1.27 Deprecated
1.x.x [0.1.0-0.3.0) <=1.1.24 Deprecated

PlaidLink

To initialize Plaid Link, you will need to first create a link_token at /link/token/create. 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 from 'react-native-plaid-link-sdk';
 
const MyPlaidComponent = () => {
  return (
    <PlaidLink
     // Replace any of the following <#VARIABLE#>s according to your setup,
     // for details see https://plaid.com/docs/quickstart/#client-side-link-configuration
 
      token={<#GENERATED_LINK_TOKEN#>}
      onSuccess={data => console.log('success: ', data)}
      onExit={data => console.log('exit: ', data)}
    >
      <Text>Add Account</Text>
    </PlaidLink>
  );
};

OAuth requirements

If you configured your link_token with one or more European country codes and are using React Native iOS, your integration will require additional Link configuration parameters (oauthNonce, oauthRedirectUri, and oauthStateId) in order to support OAuth authentication flows. You will also need to configure a universal link. See OAuth requirements for more information.

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 } 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();
    }
  }
 
  render() {
    return (
      <PlaidLink
        token={<#GENERATED_LINK_TOKEN#>}
        onSuccess={data => console.log('success: ', data)}
        onExit={data => console.log('exit: ', data)}
      >
        <Text>Add Account</Text>
      </PlaidLink>
    );
  }
}

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

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

Customizing the PlaidLink component

By default, PlaidLink renders a TouchableOpacity component. You may override the component used by passing component and componentProps. For example:

      <PlaidLink
        token = {<#GENERATED_LINK_TOKEN#>}
        component= {Button}
        componentProps = {{title: 'Add Account'}}
        onSuccess = {(result) => {console.log('Success: ', result)}}
        onError = {(result) => {console.log('Error: ', result)}}
    >

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.