@digiotech/react-native

Digio React Native SDK

Official React Native SDK for Digio Gateway Integration

Installation

yarn install @digiotech/react-native

Documentation

Documentation of Digio Gateway Integration and their usage

Basic Usage

Instantiate the Digio instance with environment & other options

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

const config: DigioConfig = { environment: Environment.PRODUCTION };
const digio = new Digio(config);
const documentId = "<document_id>";
const identifier = "<email_or_phone>";
const digioResponse: DigioResponse = await digio.start(documentId, identifier);

Consuming gateway events [Optional]

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

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

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

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

Complete Usage

import { useEffect } from 'react';
import { Digio, DigioConfig, GatewayEvent } 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 };
    const digio = new Digio(config);
    const documentId = "<document_id>";
    const identifier = "<email_or_phone>";
    const tokenId = "<gateway_token_id";
    const digioResponse: DigioResponse = await digio.start(documentId, identifier, tokenId);

  }
}

Android

Note: Incase you are using camera feature and facing black screen on camera then follow below steps

• Add digioKycworkflow.aar file inside your react project under android/app/libs folder. Download digio_kyc_workflow-4.0.15.aar

• Add below in your project under build.gradle file inside dependencies

implementation fileTree(dir: 'libs', include: ['*.aar'])

SDK Reference

DigioConfig

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.

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'

DigioResponse [Response received from Gateway]

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

Android Permissions

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

<!--RECORD_AUDIO and MODIFY_AUDIO_SETTINGS Permission required for Video KYC -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
/** Required for geotagging */
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
/** Required for ID card analysis, selfie and face match**/
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera.autofocus"   android:required="false" />

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

IOS Permission

Permissions need to add in your info.plist

  /**  Camera permission incase of selfie/video KYC/ capture document  **/
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to access your camera.</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to access your photo.</string>
  /**  Microphone permission incase of video KYC  **/
  <key>NSMicrophoneUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to access your microphone to capture video.</string>
  /** Location permission for geo tagging for camera/video kyc/ selfie **/
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to access your location.</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>$(PRODUCT_NAME) would like to access your location.</string>

Note : All permissions should be checked and taken before triggering Digio SDK