Skip to main content
How to Generate Widget This is a react.js library for implementing the dojah KYC widget. Step 1: Start using dojah-kyc-sdk-react in your project by running
npm
npm install dojah-kyc-sdk-react --save
yarn
yarn add dojah-kyc-sdk-react --save
Reference : https://www.npmjs.com/package/dojah-kyc-sdk-react Example: https://github.com/dojah-inc/React-Js-sdk
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.
React JS
import React from 'react'
import Dojah from 'react-dojah'

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

  /**
   *  This is your account public key
   *  (go to your dashboard at
   *  https://dojah.io/dashboard 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
   *  https://dojah.io/dashboard to enable different
   *  widget types)
   */
  const type = "custom";

  const config = {
  	widget_id: "" //this is generated from easyonboard here https://app.dojah.io/easy-onboard
  };

  /**
   *  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
  };


   const govData = {
    nin: '',
    bvn: '',
    dl: '',
    mobile: '',
 
  };

  /**
   *  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 Dojah library accepts 3 props and
  // initiliazes the doja widget and connect process
  return (
    <Dojah
      response={response}
      appID={appID}
      publicKey={publicKey}
      type={type}
      config={config}
      userData={userData}
      govData={govData}
      metadata={metadata}
    />
  );
}

export default App
ParameterTypeDescription
typestringWidget Type: Values are ‘custom’, ‘verification’, ‘identification’, ‘verification’, ‘liveness’
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 application dashboard here
user_dataobjectAutomatically update the user data page, and thus skip the page
gov_dataobjectAutomatically update the government data page, and thus skip the page
metadataobjectYour application’s metadata to be passed back to you via webhook, onSuccess, or onError
onSuccessfunctionCalled when the user has completed all verification steps in the widget flow. The sample response data below is returned to this callback.
onErrorfunctionCalled when an error occurs before all verification steps are completed, preventing the user from finishing the flow.
onClosefunctionCalled when the user terminates the widget via the close button before completing all steps.
Important Security Update: Proper Handling of SDK Verification CallbacksThe final verification decision should never rely on SDK callbacks (onSuccess, onError, onClose) alone. Always retrieve the actual verification status from your backend using the reference ID before granting access or approving onboarding.
The onSuccess callback is triggered when the user has completed all the verification steps configured in the widget flow. This confirms that every step — such as document capture, liveness check, government data entry, etc. — has been submitted by the user.Important: onSuccess confirms flow completion, not that the user passed all checks. A user may complete every step but still fail backend validation (e.g., document mismatch, failed liveness). Always verify the final result from your backend using the reference ID.
The onError callback is triggered when an error occurs before all verification steps are completed. This prevents the user from finishing the flow. Common causes include:
  • Network connectivity issues
  • SDK initialization or configuration errors
  • Provider-side failures during a verification step
  • Unexpected interruptions during the flow
When onError fires, the verification is incomplete. Your application should handle this gracefully — for example, by prompting the user to retry.
The onClose callback is triggered when the user terminates the widget using the close button. This indicates the user chose to exit the verification flow before completing all steps.The verification is considered abandoned when this occurs. If a redirect URL is configured, the user will be redirected there after the widget closes. The final verification status will be delivered through the webhook notification.
Recommended ImplementationAfter the widget interaction, create a backend flow or confirmation page that retrieves the actual verification result using the reference ID generated during the verification process. You can retrieve the final verification details through:
Possible Verification Statuses The verification result returned by the webhook or API may contain any of the following statuses:
StatusDescription
OngoingThe verification process is currently in progress.
CompletedThe verification has been successfully completed and passed all checks.
PendingThe verification is awaiting further action or review.
FailedThe verification was completed but did not pass one or more verification checks.
AbandonedThe verification was started but not completed by the user.
Step 3: Handle the Verification Callbacks When the user completes all verification steps, the onSuccess callback is invoked with the verification response data. If an error occurs before all steps are completed, onError is called instead. If the user closes the widget via the close button, onClose is triggered. Use the overall status (response.status (Boolean, i.e true or false)) to ascertain if the request failed or succeeded.
Webhook NotificationsYou 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
The Sample response data after successful verification
Response
{
    aml: {
        status: false
    },
    data: {
        id: {
            data: {
                id_url: "https://images.dojah.io/id_sample_id_1720624047.jpg",
                id_data: {
                    extras: "",
                    last_name: "John",
                    first_name: "Doe",
                    mrz_status: "",
                    date_issued: "2019-01-01",
                    expiry_date: "2020-01-01",
                    middle_name: "",
                    nationality: "Nigerian",
                    date_of_birth: "1990-01-01",
                    document_type: "National ID",
                    document_number: "123456789"
                },
                back_url: "https://images.dojah.io/id_sample_id_1720624047.jpg"
            },
            status: true,
            message: "Successfully verified your id"
        },
        email: {
            data: {
                email: "abc@gmail.com"
            },
            status: true,
            message: "abc@gmail.com validation Successful"
        },
        index: {
            data: {},
            status: true,
            message: "Successfully continued to the main checks."
        },
        selfie: {
            data: {
                selfie_url: "https://images.dojah.io/selfie_sample_image_1720624219.jpg"
            },
            status: true,
            message: "Successfully validated your liveness"
        },
        countries: {
            data: {
                country: "Nigeria"
            },
            status: true,
            message: "Successfully continued to the next step."
        },
        user_data: {
            data: {
                dob: "1990-12-03",
                last_name: "John",
                first_name: "Doe"
            },
            status: true,
            message: ""
        },
        business_id: {
            image_url: "https://images.dojah.io/selfie_sample_image_1720624219.jpg",
            business_name: "ABC Company LIMITED",
            business_type: "Business",
            business_number: "1237654",
            business_address: "",
            registration_date: ""
        },
        phone_number: {
            data: {
                phone: "234810123456"
            },
            status: true,
            message: "2348103817187 validation Successful"
        },
        business_data: {
            business_name: null,
            business_type: "BN",
            business_number: null,
            business_address: null,
            registration_date: null
        },
        government_data: {
            data: {
                bvn: {
                    entity: {
                        bvn: "222222222222",
                        nin: "",
                        email: "",
                        title: "",
                        gender: "Male",
                        customer: "6bb82c41-e15e-4308-b99d-e9640818eca9",
                        image_url: "https://images.dojah.io/id_John_Doe_1720615487.jpg",
                        last_name: "John",
                        first_name: "Doe",
                        middle_name: "Anon",
                        nationality: "",
                        name_on_card: "",
                        watch_listed: "",
                        date_of_birth: "01-Jun-1982",
                        lga_of_origin: "",
                        phone_number1: "08011111111",
                        phone_number2: "",
                        marital_status: "",
                        enrollment_bank: "",
                        state_of_origin: "",
                        level_of_account: "",
                        lga_of_residence: "",
                        enrollment_branch: "",
                        registration_date: "",
                        state_of_residence: "",
                        residential_address: ""
                    }
                },
               nin: {
                entity: {
                nin: "1234567891",
                firstname: "John",
                middlename: "Doe",
                surname: "Anon",
                maidenname: "",
                telephoneno: "0901234567",
                state: "",
                place: "",
                profession: "ZOOLOGY",
                title: "",
                height: "167",
                email: "",
                birthdate: "1960-01-01",
                birthstate: "",
                birthcountry: "Not Available",
                centralID: "",
                documentno: "",
                educationallevel: "tertiary",
                employmentstatus: "unemployed",
                othername: "",
                pfirstname: "",
                pmiddlename: "",
                psurname: "",
                nspokenlang: "YORUBA",
                ospokenlang: "",
                religion: "christianity",
                residence_Town: "",
                residence_lga: "Alimosho",
                residence_state: "Lagos",
                residencestatus: "birth",
                residence_AddressLine1: "No 2 Anon house, John does estate, Lagos state, Nigeria",
                residence_AddressLine2: "",
                self_origin_lga: "",
                self_origin_place: "",
                self_origin_state: "",
                signature: null,
                nationality: null,
                gender: "Female",
                trackingId: "",
                customer: "1234444y373737373737373737",
                image_url: "https://images.dojah.io/id_SANDBOX_1721830110.jpg"
              }
          }
            },
            status: true,
            message: ""
        },
        additional_document: [
            {
                document_url: "https://dojah-image.s3.amazonaws.com/66bcc73a4ff8e1003100454212aec768-3344-4df5-88f6-7e723c46cbb0.jpeg",
                document_type: "image"
            }
        ]
    },
    value: "123456",
    id_url: "https://images.dojah.io/id_sample_id_1720624047.jpg",
    status: true,
    id_type: "BVN",
    message: "Successfully completed the verification.",
    back_url: "https://images.dojah.io/id_sample_id_1720624047.jpg",
    metadata: {
        ipinfo: {
            as: "AS29465 MTN NIGERIA Communication limited",
            isp: "MTN NIGERIA Communication limited",
            lat: 6.4474,
            lon: 3.3903,
            org: "MTN Nigeria",
            zip: "",
            city: "Lagos",
            proxy: false,
            query: "102.89.34.49",
            mobile: true,
            status: "success",
            country: "Nigeria",
            hosting: true,
            district: "",
            timezone: "Africa/Lagos",
            region_name: "Lagos"
        },
        device_info: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
    },
    selfie_url: "https://images.dojah.io/selfie_sample_image_1720624219.jpg",
    reference_id: "DJ-31038041E0",
    verification_url: "https://app.dojah.io/verifications/bio-data/49fd74a4-8181-4ce8-a87a-0e63f7159257",
    verification_mode: "LIVENESS",
    verification_type: "RC-NUMBER",
    verification_value: "123456",
    verification_status: "Completed"
}
How to retrieve the Selfie PhotoThere’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.