Digio React Native SDK


Official React Native SDK for Digio Gateway Integration

Installation

``sh
yarn install @digiotech/react-native
`

Documentation

Documentation of Digio Gateway Integration and their usage

$3

Instantiate the Digio instance with environment & other options

`tsx
import { Digio, DigioConfig, DigioResponse, ServiceMode } from '@digiotech/react-native';

const config: DigioConfig = { environment: Environment.PRODUCTION, serviceMode: ServiceMode.OTP, isGlobal: false };
const digio = new Digio(config);
const documentId = "";
const identifier = "";
const digioResponse: DigioResponse = await digio.start(documentId, identifier);
`

$3

You can consume events and understand the flow or the journey of the user as he is performing it.

For a complete list of events and the payload associated with it, refer here

`tsx
import { useEffect } from 'react';
import { Digio, DigioConfig, GatewayEvent, ServiceMode } from '@digiotech/react-native';

function YourComponent() {
useEffect(() => {
const gatewayEventListener = digio.addGatewayEventListener(
(event: GatewayEvent) => {
// Do some operation on the received events
}
);

return () => {
gatewayEventListener.remove();
}
}, []);
}
`

$3

`tsx
import { useEffect } from 'react';
import { Digio, DigioConfig, GatewayEvent, ServiceMode } from '@digiotech/react-native';

function YourComponent() {
useEffect(() => {
const gatewayEventListener = digio.addGatewayEventListener(
(event: GatewayEvent) => {
// Do some operation on the received events
}
);

return () => {
gatewayEventListener.remove();
}
}, []);

const triggerDigioGateway = async () => {
const config: DigioConfig = { environment: Environment.PRODUCTION, serviceMode: ServiceMode.OTP, isGlobal: false };
const digio = new Digio(config);
const documentId = "";
const identifier = "";
const tokenId = " const digioResponse: DigioResponse = await digio.start(documentId, identifier, tokenId);

}
}
`

Android

- Digio SDK supports android version 8 (SDK level 26) and above
- Add below in your project under build.gradle (module:app)file inside dependencies

`tsx
// Required for esign/mandate sign
implementation 'com.github.digio-tech:protean-esign:v3.12'
// under android {} of build.gradle(module:app)
buildFeatures {
viewBinding true
dataBinding true
}

// Make sure your project using
compileSdkVersion = 35
targetSdkVersion = 35
`

SDK Reference

$3

Parameters:

| Name | Type | Description |
|-----------------|---------|---------------------------------------------------------------------------------------------|
| environment* | string | Environment for which you want to open gateway. One of sandbox or production |
| logo | string | Pass an URL of your brand logo. Note: Pass an optimised image url for best results |
| theme | string | Options for changing the appearance of the gateway. See below for options under it. |
| serviceMode* | string | ServiceMode can be OTP/FACE/IRIS/FP you can set based on your requirment|

Theme:

| Name | Type | Description |
|----------------|---------|--------------------------------------------------------------------------|
| primaryColor | string | Your brand colour's HEX code to alter CTA (call-to-action) button colors |
| secondaryColor | string | HEX Code to alter text colors |
| fontFamily | string | Font Family of your choice. For eg: Crimson Pro |
| fontFormat | string | Format of the Font Family Provided. For eg: ’woff2’,’ot’,’tt’ |
| fontUrl | string | Font Family URL. For eg: '{font_family_url}.woff2' |

$3

| Name | Type | Description |
|-------------|---------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| code* | number | SUCCESS = 1001
FAIL = 1002
CANCEL = -1000
WEBVIEW_CRASH = 1003
WEBVIEW_ERROR = 10017
SDK_CRASH = 1004
Location/Camera/MicroPhone Permission Denied By User = 1008 |
| documentId | string | Document ID Passed from the parent app. For eg: KID22040413040490937VNTC6LAP8KWD |
| message | string | Error message in case of crash or failure |
| permissions | Array | List of mandatory permissions which are not given during kyc journey |

$3

Add required permissions in the manifest file. Note - This is the common SDK for various KYC flows

`



/* Required for geotagging /



/ Required for ID card analysis, selfie and face match/








`
A fintech Android app can't access the following permission
- Read_external_storage
- Read_media_images
- Read_contacts
- Access_fine_location
- Read_phone_numbers
- Read_media_videos

You get a build error due to a theme issue.


- Please add tools:replace="android:theme" under your android manifest.
`
....
tools:replace="android:theme"
...
>
.....

`


You get a build error due to a duplicate class android.support.v4


- Check your gradle.properties below should be added.
`
android.enableJetifier=true
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

`

$3


- Digio SDK supports iOS 15.6 and above
Permissions need to add in your info.plist
`
/ Camera permission incase of selfie/video KYC/ capture document /
NSCameraUsageDescription
$(PRODUCT_NAME) would like to access your camera.
NSPhotoLibraryUsageDescription
$(PRODUCT_NAME) would like to access your photo.
/ Microphone permission incase of video KYC /
NSMicrophoneUsageDescription
$(PRODUCT_NAME) would like to access your microphone to capture video.
/ Location permission for geo tagging for camera/video kyc/ selfie /
NSLocationWhenInUseUsageDescription
$(PRODUCT_NAME) would like to access your location.
NSLocationAlwaysAndWhenInUseUsageDescription
$(PRODUCT_NAME) would like to access your location.
``
Note : All permissions should be checked and taken before triggering Digio SDK