SDK for invoking client side journey for any of Digio request
npm install @digiotech/react-native
Official React Native SDK for Digio Gateway Integration
``sh`
yarn install @digiotech/react-native
Documentation of Digio Gateway Integration and their usage
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);
`
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();
}
}, []);
}
`
`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 = "
}
}
`
`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
`
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
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' |
| 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
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
....
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.
``