zeeh-connect-react v1.0.4
zeeh-connect-react
React SDK for implementing ZeeH widget - It is a quick and secure way to link bank accounts to ZeeH from within your React 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-react
using yarn
yarn add zeeh-connect-react
Usage
with hook
import {
useZeeHConnect,
ZeeHEvents,
ZeeHResponseType,
} from 'zeeh-connect-react'
const ZeeHConnectUsingHooks = () => {
const config = {
publicKey: 'pk_VH05d6NcDYUnL0yTT8j1tkBBX', //public key from connect app
onEvent: (event: ZeeHEvents, data: ZeeHResponseType) => {
if (event === ZeeHEvents.ACCOUNT_LINKED) {
console.log('Account has already been linked')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_OPENED) {
console.log('widget is opened')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_CLOSED) {
console.log('widget is closed')
console.log(data)
} else if (event === ZeeHEvents.ACCOUNT_LINKED_SUCCESS) {
console.log('Account lnked successfully ')
console.log(data)
} else if (event === ZeeHEvents.INSTITUTION_SELECTED) {
console.log('Institution has been selected on widget')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_LOAD_ERROR) {
console.log('Widget faced an error loading up')
console.log(data)
}
},
userReference:
'your client userId here or any unique idenfier for your client',
}
const { zeehInit } = useZeeHConnect(config)
return <button onClick={() => zeehInit()}>Link your account(Hook)</button>
}
function App() {
return (
<div>
<ZeeHConnectUsingHooks />
</div>
)
}
export default App
with component
import { ZeeHEvents, ZeeHResponseType, ZeeHButton } from 'zeeh-connect-react'
const ZeeHConnectUsingButton = () => {
const config = {
publicKey: 'pk_VH05d6NcDYUnL0yTT8j1tkBBX', //public key from connect app
onEvent: (event: ZeeHEvents, data: ZeeHResponseType) => {
if (event === ZeeHEvents.ACCOUNT_LINKED) {
console.log('Account has already been linked')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_OPENED) {
console.log('widget is opened')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_CLOSED) {
console.log('widget is closed')
console.log(data)
} else if (event === ZeeHEvents.ACCOUNT_LINKED_SUCCESS) {
console.log('Account lnked successfully ')
console.log(data)
} else if (event === ZeeHEvents.INSTITUTION_SELECTED) {
console.log('Institution has been selected on widget')
console.log(data)
} else if (event === ZeeHEvents.WIDGET_LOAD_ERROR) {
console.log('Widget faced an error loading up')
console.log(data)
}
},
}
return (
<ZeeHButton style={{ backgroundColor: 'blue', color: 'white' }} {...config}>
Link your account(Button)
</ZeeHButton>
)
}
function App() {
return (
<div>
<ZeeHConnectUsingButton />
</div>
)
}
export default App
Configuration Options
publicKey
String: Required
This is your ZeeH Africa public API key from ZeeH dashboard.
onEvent
(data) => { Void }: Required
A set of well defined events help to communicate efficiently with the widget to monitor different stages of the linking. userReference
passed.
const config = {
publicKey: 'YOUR_ZeeH Africa_PUBLIC_KEY_HERE',
onEvent: (event: ZeeHEvents, data: ZeeHResponseType) => {
console.log(data)
console.log(event)
},
}
Zeeh Events
eventName: String
Event names corespond to the type of event that occurred. Possible options are in the table below.
Event Name | Description |
---|---|
ACCOUNT_LINKED | Triggered If the User has already been linked |
WIDGET_OPENED | Triggered when the user opened the Connect Widget. |
ACCOUNT_LINKED_SUCCESS | Triggered when the user successfully links their account. |
INSTITUTION_SELECTED | Triggered when the user selects an institution. |
WIDGET_CLOSED | Triggered when the user closes the widget. |
WIDGET_LOAD_ERROR | Triggered when the widget encounters an error |
The data JSON returned from the ACCOUNT_LINKED_SUCCESS event.
{
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
}
}
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.
Examples
See more examples here.
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.