Javascript 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

Using the Dojah CDN-hosted Javascript client library, you can install the Dojah widget into your application by simply adding a script tag to your HTML document and insert basic configuration parameters.

Step 1: Add the Client Javascript Library

Add the script tag before the end of the closing body tag of your desired HTML page where you desire to give users the ability to authorize access to a financial institution.

<script src="https://widget.dojah.io/widget.js"></script>

❗️

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 in javascript object representing your preferred configuration options.

const options = {
  app_id: app_id,
  p_key: p_key,
  type: 'custom',
  user_data: {
    first_name: 'Chijioke',
    last_name: 'Nna',
    dob: '2022-03-12',
  },
  metadata: {
    user_id: '12xxxxsxsxsxssx1',
  },
  config: {
    debug: window.DOJAH_DEBUG || Connect.environment === 'development',
    aml: false,
    review_process: 'Automatic',
    mobile: true,
    verification: true,
    pages: [
      {
        page: 'government-data',
        config: {
          bvn: true, nin: false, dl: false, mobile: false, otp: false, selfie: false
        },
      },
      {
        page: 'government-data', 
        config: { 
          bvn: false, nin: true, dl: true, mobile: false, otp: false, selfie: false 
        } 
      },
      {
        page: 'government-data', 
        config: {
          bvn: false, nin: false, dl: false, mobile: true, otp: true, selfie: false 
        } 
      },
      { page: 'selfie' },
      { page: 'id', config: { passport: false, dl: true, custom: true } },
      { page: 'address' },
    ],
  },
  onSuccess: function (response) {
    console.log('Success', response);
  },
  onError: function (err) {
    console.log('Error', err);
  },
  onClose: function () {
    console.log('Widget closed');
  }
};

const connect = new Connect(options);
const button = document.querySelector('#button-connect');
button.addEventListener('click', function () {
  connect.setup();
  connect.open();
});

πŸ“˜

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.

For Example,

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

Parameter

Type

Description

type

string

Widget Type : Values are 'custom', 'verification', 'identification', 'verification', 'liveness'

app_id

string

Application Id, Get it from your dojah application dashboard here

p_key

string

Public Key, Get it from your dojah application dashboard here

user_data

object

Automatically update the user data page, and thus skip the page.
e.g
user_data: {
first_name: 'Chijioke',
last_name: 'Nna',
dob: '2022-03-12',
},

metadata

object

Your application's metadata to be passed back to you via, webhook, onSuccess, or onError

config

object

Configuration object with the following objects : debug, aml, review_process, pages

debug: window.DOJAH_DEBUG || Connect.environment

string

Environment values can *development, production

aml

Boolean

Anti-money laundering (AML) checks.
aml values are *true, false

review_process

string

review_process values are 'Automatic' and 'Manual'

pages

array

This 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, 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.

onSuccess

function

This is called when your user has successfully completed enrollment with their preferred institution.
The sample response data below is passed to the widget

onError

function

This is called when your user was unable to successfully complete enrollment.

onClose

function

This 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

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.

{
  "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": "",
          "photo": "/9j/4AAQSkZJRgABAAAQUBAQEBAQEAAAAAAAAAAAEC",
          "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",
          "signature":"/9j/4AAQSkZJRgABAAAQUBAQEBAQEAAAAAAAAAAAEC",
          "nationality": "",
          "gender": "m",
          "trackingId": "S7Y0NYFM1000468",
          "customer": "365eb08f-6a1d-46bc-9aa0-XXXXXXXX"
        }
      },
      "message": "",
      "status": true
    }
  },
  "verificationType": "nin",
  "verificationValue": "12334567899",
  "verificationMode": "selfie",
}

WIDGET TEST CREDENTIALS

🚧

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: [email protected]

The Sample response data after successful verification


Did this page help you?