React JS Library

The Dojah platform has a smooth widget that enables your users to authorize access to their accounts. This widget works effortlessly across various browsers and devices of all sizes.

How to Generate Widget

This is a react.js library for implementing the dojah KYC widget.

Step 1: Start using react-dojah in your project by running

npm install react-dojah --save
yarn add react-dojah

Reference :



Adding the async attribute can cause the inline code to return undefined because the library may not be available at that moment. So avoid the use of async and defer for now.

Step 2: Configure the Javascript Client Library

At this stage, you can now create a Dojah widget object by passing in your public key and Application Id in your preferred configuration options.

import React from 'react'
import Dojah from 'react-dojah'

const App = () => {
   *  This is your app ID
   * (go to your dashboard at
   * to create an app and retrieve it)
  const appID = "";

   *  This is your account public key
   *  (go to your dashboard at
   * to
   *  retrieve it. You can also regenerate one)
  const publicKey = "";

   *  This is the widget type you'd like to load
   *  (go to your dashboard at
   * to enable different
   *  widget types)
  const type = "custom";

  const config = {
  	widget_id: "91281818181919191" //this is generated from easyonboard 

   *  These are the user's data to verify, options
   *  available to you possible options are:
   *  {first_name: STRING, last_name: STRING, dob: DATE STRING}
   *  NOTE: Passing all the values will automatically skip
   *  the user-data page (thus the commented out `last_name`)
  const userData = {
    first_name: {$first_name}, //Optional
    last_name: {$last_name}, //Optional
    dob: {$dob}, //YYYY-MM-DD Optional
    residence_country: 'NG', //Optional
    email: {$email}//optional

   *  These are the metadata options
   *  You can pass any values within the object
  const metadata = {
    user_id: '121',

   * @param {String} type
   * This method receives the type
   * The type can only be one of:
   * loading, begin, success, error, close
   * @param {String} data
   * This is the data from doja
  const response = (type, data) => {
    console.log(type, data);
    if(type === 'success'){
    }else if(type === 'error'){
    }else if(type === 'close'){
    }else if(type === 'begin'){
    }else if(type === 'loading'){

  // The Doja library accepts 3 props and
  // initiliazes the doja widget and connect process
  return (

export default App


On ID page of the widget, To accept other Identity type asides International Passport and Driver's License.

In Pages [ ] array, Kindly Set custom : true inside β€œconfig” object on ID page.

By Setting the user-data and country page config enable object to false, The user-data and country page will be removed. Kindly note that this customisation can be implemented only in custom widget type.

Example :

{ page: β€˜id’, config: { passport: true, dl: true, custom: true }

To Verify Email OTP, Set verification to true on email page

Example :
{ page: 'email', config: { verification: true }},

To Verify Phone OTP, Set verification to true on phone-number page

Example :

{ page: 'phone-number', config: { verification: true } },

typestringWidget Type : Values are 'custom'
app_idstringApplication Id, Get it from your dojah application dashboard here
p_keystringPublic Key, Get it from your dojah application dashboard here
reference_idstringReference ID, It can be passed to keep track of the verification steps (Started, Ongoing, Successful)

NB : reference_id character length must be greater than 10
widget_idstringWidget ID, Get it from your Easy Onboard Widget Flow on dashboard here
user_dataobjectAutomatically update the user data page, and thus skip the page.
user_data: {
first_name: 'Chijioke',
last_name: 'Nna',
dob: '2022-03-12',
govDataobjectAutomatically update the goverment data page, and thus skip the page. gov_data: {
bvn: "456789654323",
nin: "234567543233",
dl: "3243546768767453423",
mobile: "08034456679"
metadataobjectYour application's metadata to be passed back to you via, webhook, onSuccess, or onError
configobjectConfiguration object with the following objects : debug, aml, review_process, pages
debug: window.DOJAH_DEBUG || Connect.environmentstringEnvironment values can *development, production
amlBooleanAnti-money laundering (AML) checks.
aml values are *true, false
review_processstringreview_process values are 'Automatic' and 'Manual'
pagesarrayThis indicates the order in which the user will undergo verification and the various options on each screen, see a thorough sample above.

pages array can have government-data, email, phone-number, ID (identity), selfie and address page

NB : If address page exist in the pages array, Location permission is explicitly required and must be granted to be able to verify Location successfully.
onSuccessfunctionThis is called when your user has successfully completed enrollment with their preferred institution.
The sample response data below is passed to the widget
onErrorfunctionThis is called when your user was unable to successfully complete enrollment.
onClosefunctionThis is called when the widget is closed.

Step 3: Handle a Successful Enrollment

On successful enrollment, the _onSuccess _callback function that you supplied is called by the client library. We then return the connected account code to your server.

Kindly use the overall status (response.status (Boolean, i.e true or false)) to ascertain if the request failed or succeeded.


Webhook Notifications

You can receive the same data below (also passed to onSuccess and onError) via a webhook call.

Register your url for webhook calls here and ensure kyc.widget is the service you are subscribed to.

In Config object Kindly set webhook object value to true (Boolean)

Example : webhook : true

  "metadata": {
    // Any other metadata you pass to the widget will also be listed here
    "user_id": '12xxxxsxsxsxssx1',
    "deviceInfo": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:98.0) Gecko/20100101 Firefox/98.0",
    "ipInfo": {
      "status": "success",
      "country": "Nigeria",
      "countryCode": "NG",
      "region": "LA",
      "regionName": "Lagos",
      "city": "Lagos",
      "zip": "",
      "lat": 6.4474,
      "lon": 3.3903,
      "timezone": "Africa/Lagos",
      "isp": "MTN NIGERIA Communication limited",
      "org": "MTN Nigeria",
      "as": "AS29465 MTN NIGERIA Communication limited",
      "query": "102.89.33.XX"
  "data": {
    "index": {
      "data": {},
      "status": true,
      "message": "Successfully continued to the main checks."
    "countries": {
      "data": {
        "country": "Nigeria"
      "status": true,
      "message": "Successfully continued to the next step."
    "phonenumber": {
      "data": {
        "mobile": "+234819999999999"
      "status": true,
      "message": "Successfully continued to the next step."
    "user-data": {
      "status": true,
      "data": {
        "firstName": "JOHN",
        "lastName": "DOE",
        "dob": "1997-12-10"
      "message": ""
    "government-data": {
      "data": {
        "entity": {
          "nin": "12334567899",
          "firstname": "JOHN",
          "middlename": "DOJAH",
          "surname": "DOE",
          "maidenname": "",
          "telephoneno": "0809999999999",
          "state": "Imo",
          "place": "MBUTU",
          "profession": "STUDENT",
          "title": "mr",
          "height": "****",
          "email": "",
          "birthdate": "1997-12-10",
          "birthstate": "Lagos",
          "birthcountry": "nigeria",
          "centralID": "8051646",
          "documentno": "",
          "educationallevel": "",
          "employmentstatus": "",
          "othername": "",
          "pfirstname": "",
          "pmiddlename": "",
          "psurname": "",
          "nspokenlang": "IGBO",
          "ospokenlang": "ENGLISH",
          "religion": "christianity",
          "residence_Town": "OJO",
          "residence_lga": "Ojo",
          "residence_state": "Lagos",
          "residencestatus": "birth",
          "residence_AddressLine1": "CAMP 5 BLOCK 8 ROOM 7 NIGERIAN ARMY CANTONMENT",
          "residence_AddressLine2": "CAMP 5 BLOCK 8 ROOM 7 NIGERIAN ARMY CANTONMENT",
          "self_origin_lga": "Ojo",
          "self_origin_place": "",
          "self_origin_state": "Lagos",
          "nationality": "",
          "gender": "m",
          "trackingId": "S7Y0NYFM1000468",
          "customer": "365eb08f-6a1d-46bc-9aa0-XXXXXXXX"
      "message": "",
      "status": true
  "selfieUrl": "",
  "verificationId": 29928,
  "verificationUrl": "",
  "referenceId": "DJ-78BD664121",
  "verificationType": "nin",
  "verificationValue": "12334567899",
  "verificationMode": "selfie",


How to retrieve the Selfie Photo

There's a response object that is sent to the client via the widget launcher on success or failure
selfieUrl and idUrl under selfie and id in the success response objects, which holds the final selfie capture and id capture respectively.



Applicable to only widget types of 'payment' and 'link'

When testing the widget, you can use the following keys to successfully login to the test bank (GTBank)

  1. Username: [email protected]
  2. Password: Exp3n5er_!@

The Sample response data after successful verification