zeeh-connect-rn

React Native SDK for implementing ZeeH widget - It is a quick and secure way to link bank accounts to ZeeH from within your React Native app. ZeeH Connect is a drop-in framework that handles connecting a financial institution to your app (credential validation, bank statements etc).

Documentation

For complete information about ZeeH Connect, head to the docs.

Getting Started

Checkout our get started guide to create your developer account and retrieve your Client Token, API Keys, and Private Keys.

Installation

using npm

npm install zeeh-connect-rn

using yarn

yarn add zeeh-connect-rn

Usage

with hooks

import * as React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import type { WebViewError } from 'react-native-webview/lib/WebViewTypes';
import { useZeehConnect, ZeehProvider } from 'zeeh-connect-rn';

export default function App() {
  const { init } = useZeehConnect();

  const config = {
    onClose: () => {
      //if the widget is close
      console.log('modal close');
    },
    onWidgetError: (data: any) => {
      console.log('encountered error when loading widget');
      console.log(data);
    },
    onSuccess: (data: any) => {
      //if the connect is successful
      console.log('successful');
      console.log(data);
    },
    userReference: 'a unique Id to identify your client, might be your',
    publickey: 'pk_e78eiwuewe...', //Access your dashboard to get this
  };

  return (
    <ZeehProvider {...config}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>
          zeeh react native connect with hooks
        </Text>
        return (<Pressable style={styles.pressable} onPress={() => init()}>
          <Text style={styles.pressableText}>Link your bank account</Text>
        </Pressable>
        );
      </View>
    </ZeehProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    fontWeight: '600',
    fontSize: 20,
    marginBottom: 32,
    textAlign: 'center',
  },
  pressable: {
    width: '100%',
    backgroundColor: 'blue',
    padding: 16,
    marginBottom: 16,
  },
  pressableText: {
    color: 'white',
    fontSize: 16,
  },
});

with component

import * as React from 'react';
import { StyleSheet, View, Text, Pressable } from 'react-native';
import type { WebViewError } from 'react-native-webview/lib/WebViewTypes';
import { useZeehConnect, ZeehProvider } from 'zeeh-connect-rn';

export default function App() {
  const config = {
    onClose: () => {
      //if the widget is close
      console.log('modal close');
    },
    onWidgetError: (data: any) => {
      console.log('encountered error when loading widget');
      console.log(data);
    },
    onSuccess: (data: any) => {
      //if the connect is successful
      console.log('successful');
      console.log(data);
    },
    userReference: 'a unique Id to identify your client, might be your',
    publickey: 'pk_e78eiwuewe...', //This can be get on your ZeeH Dashboard
  };

  return (
    <ZeehProvider {...config}>
      <View style={styles.container}>
        <Text style={styles.textStyle}>
          Zeeh React Native Component Example
        </Text>
        <ZeeHConnectButton
          ButtonWrapperStyle={styles.pressable}
          TextStyles={styles.pressableText}
          text="Testing This"
        />
      </View>
    </ZeehProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 32,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    fontWeight: '600',
    fontSize: 20,
    marginBottom: 32,
    textAlign: 'center',
  },
  pressable: {
    width: '100%',
    backgroundColor: 'blue',
    padding: 16,
    marginBottom: 16,
  },
  pressableText: {
    color: 'white',
    fontSize: 16,
  },
});

Configuration Options

• publicKey
• onSuccess
• onClose
• onWidgetError
• onLoad
• userReference

publicKey

String: Required

This is your ZeeH Africa public API key from ZeeH dashboard.

onSuccess

(data) => { Void }: Required

The closure is called when a user has successfully onboarded their account. It should return back user financial institution details including the userReference passed.

const config = {
  publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
  onSuccess: (data) => {
    console.log(data);
  },
};

The data JSON returned from the onSuccess callback.

{
  message:"linking successful",
  timeStamps:"",
  institution:{
    _id: 'uuid string',
    institution: {
      name: 'FCMB'
      bankCode:'214'
      type: 'classic savings',
    },
    name: 'jon doe'
    accountNumber: '1010101010'
    balance: 5000
    userReference: 'random string'
    bvn: 2222
  }
}

onClose

() => { Void }: Optional

The optional closure is called when a user has specifically exited the ZeeH Africa Connect flow. It does not take any arguments.

const config = {
  publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => console.log('widget closed'),
};

onWidgetError

(data) => { Void }: Optional

The optional closure is called if errors were encountered when loading the widget. passing a wrong publicKey or wrong params can cause this error.

const config = {
  publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => console.log('widget closed'),
  onWidgetError: (data) =>
    console.log('There was an error when loading the widget'),
};

onLoad

() => { Void }: Optional

The optional closure is called if the widget is succesfully loaded.

const config = {
  publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => console.log('widget closed'),
  onWidgetError: data) =>
    console.log('There was an error when loading the widget'),
  onClose: () => console.log('widget loaded'),
};

userReference

String: Optional

A unique string that should be passed to the connect widget. This will act like an Id of your user that is with Us. you can get account details passing userReference as a params. It will be generated automatically if not passed, but it's recommended to always pass it. It could be your client Id.

const config = {
  publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
  onSuccess: (data) => {
    console.log(data);
  },
  onClose: () => console.log('widget closed'),
  onWidgetError: (data) =>
    console.log('There was an error when loading the widget'),
  onClose: () => console.log('widget loaded'),
  userReference: 'recommended(your client userId)',
};

Examples

See more examples here.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT