React Native SDK
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.
📘 Get Started with React Native SDK - Dojah
Installation
npm install react-native-dojah-sdks --save
yarn add react-native-dojah-sdks
Confuguration and usage
Reference : https://www.npmjs.com/package/react-native-dojah-sdks
Example Application: https://github.com/dojah-inc/React-native-SDK
At this stage, you can now create a Dojah widget object by passing in your public key in object representing your preferred configuration options.
import React, {useEffect} from 'react';
import Dojah from 'react-native-dojah-sdks';
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';
/**
* These are the configuration options
* available to you are:
* {debug: BOOL, pages: ARRAY[page: STRING, config: OBJECT]}
*
* The config object is as defined below
*
* NOTE: The otp and selfie options are only
* available to the `verification` widget
*/
const config = {
widget_id: '', //this is generated from easyonboard here https://app.dojah.io/easy-onboard
pages: [],
};
/**
* 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: 'Chijioke',
last_name: '', // 'Nna'
dob: '2022-05-01',
};
/**
* These are the metadata options
* You can pass any values within the object
*/
const metadata = {
user_id: '121',
};
const govData = {
bvn: "",
nin: "",
dl: "",
mobile: ""
};
/**
* @param {String} responseType
* 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 = (responseType, data) => {
console.log('Response:', responseType, JSON.stringify(data));
if (responseType === 'success') {
} else if (responseType === 'error') {
} else if (responseType === 'close') {
} else if (responseType === 'begin') {
} else if (responseType === 'loading') {
}
};
/**
* The `ViewStyle` of the outermost `View` wrapping the Dojah container
* defaults to {width: '100%', height: '100%'}
*/
const outerContainerStyle = {width: '100%', height: '100%'};
/**
* The `ViewStyle` of the `WebView` containing the Dojah connection
* This prop is passed to the WebView `style` prop
*/
const style = {};
/**
* The `ViewStyle` of the innermost `View` within the WebView
* This prop is passed to the WebView `containerStyle` prop
*/
const innerContainerStyle = {};
useEffect(() => {
Dojah.hydrate(appID, publicKey);
}, [appID, publicKey]);
return (
<Dojah
appID={appID}
publicKey={publicKey}
type={type}
userData={userData}
govData={govData}
metadata={metadata}
config={config}
response={response}
outerContainerStyle={outerContainerStyle}
style={style}
innerContainerStyle={innerContainerStyle}
/>
);
};
export default App;
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 |
reference_id | string | Reference 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_id | string | Widget ID, Get it from your Easy Onboard application dashboard here |
Other required installations (make sure to follow the instructions in the react-native-webview documentation).
N.B.
https://github.com/react-native-webview/react-native-webview/issues/140#issuecomment-574185464
npm install react-native-webview --save
📘 Kindly request camera permissions before launching the widget
Kindly declare and request camera permission in the main activity, at your application level - MainActivity before launching the SDK
Android configuration
// Add the camera permission:
<uses-permission android:name="android.permission.CAMERA" />
// Add the modify audio settings permission:
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
iOS Confuguration
permissions_path = '../node_modules/react-native-permissions/ios'
pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
The Sample response data after successful verification
{
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 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.
See the example folder for an implementation
📘 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 theservice
you are subscribed to.In Config object Kindly set webhook object value to true (Boolean)
Example : webhook : true
Demo and Setup
https://www.loom.com/share/6aed078b85124a4ba714210271705979
📘 Fix for React-Native android crashing during file/image upload
Permissions: Android android/settings.gradle
include ‘:react-native-permissions’
project(‘:react-native-permissions’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-permissions/android’)
<uses-permission android:name=“android.permission.READ_EXTERNAL_STORAGE” />
Pemission: IOS
<key>NSFileProviderDomainUsageDescription</key>
<string> Dojah wants to access your media files </string>
Was this page helpful?