React-Native Advance Integration Scenarios

If you require more control over the journey and order of the steps or show custom screens between ID verification steps, you can use IDWise SDK in dynamic mode. This mode allows you to start specific steps and for you application to regain control after each step. Please note this integration mode requires more code and responsibility on your side.

Starting a new journey in dynamic mode

First ensure you have added the android SDK dependency and initialize the SDK as in Step 1, Step 2, Step 3 and Step 4.

Once the SDK is initialized, it becomes ready to start an ID verification journey flow. To commence the flow, articulated below methods are offer by SDK to start the journey in dynamic mode:

IDWiseModule.startDynamicJourney("<JOURNEY_DEFINITION_ID>","<REFERENCE_NUMBER>","en");

This method takes the following parameters:

flowId: (also called Journey Definition ID): This is a unique identifier that identifies your journey flow. IDWise shares this with you when you register to use IDWise system.
referenceNo: (Optional) This parameter allows you to attach a unique identifier (such as a reference number) with the user undergoing the current journey. It's beneficial for connecting the journey to the user and/or the application that initiated it. You will receive this reference number in the webhook request.
locale: (Optional)This refers to the ISO code representing the desired language for the user interface components. Please reach out to IDWise IDWise Supportfor the list of available languages.

Starting the Steps

When onJourneyStarted(...)or onJourneyResumed(...) are triggered successfully, you can call the IDWise.startStep(...) to start the specific verification Step.

IDWise.startStep(context, stepId)

This method takes the following parameters:

context : Activity of Fragment
stepId : ID of the step you want to start. (Will be provided by IDWise for each step)

IDWise.startStepFromFileUpload(context, stepId, byteArray)

Using this method you can also pass a PDF or an Image File as a ByteArray. Important Note: Size of the byteArray should be less then 6MB. Following is an example

The step events (provided in IDWiseSDKStepCallback parameter provided to startDynamicJourney or resumeDynamicJourney method) will be triggered as step is handled and processed.

Journey and Step Events (Callbacks)

Throughout the journey, IDWise SDK sends back some events to the Hosting app. Here we can listen to those events:

useEffect(() => {
  eventEmitter.addListener("onJourneyStarted", (event) => {
    console.log(`Journey Started with id ${event.journeyId}`);
  });

  eventEmitter.addListener('onJourneyResumed', event => {
    console.log(`Journey Resumed with id ${event.journeyId}`);
  });

  eventEmitter.addListener("onJourneyFinished", (event) => {
    console.log(`Journey Completed with id ${event.journeyId}`);
  });

  eventEmitter.addListener("onJourneyCancelled", (event) => {
    console.log(`Journey Cancelled with id ${event.journeyId}`);
  });

  eventEmitter.addListener('onJourneySummary', event => {
    console.log(`Journey Summary for id ${event.journeyId}`);
    console.log(`Journey Step Summaries ${event.journeyStepSummaries}`);
    console.log(`Journey Result ${event.journeyResult}`);
    console.log(`Journey Is Complete ${event.journeyIsComplete}`);
  });

  eventEmitter.addListener("onError", (event) => {
    console.log(`An Error has occured  ${event.errorCode} : ${event.errorMessage}`);
  });
  
  eventEmitter.addListener('onStepCaptured', event => {
      console.log(`Step Captured with id ${event.stepId}`);
      console.log(`Step Captured Bitmap Base64 ${event.bitmapBase64}`);
  });

  eventEmitter.addListener('onStepResult', event => {
    console.log(`Step Result with id ${event.stepId} : ${event.stepResult}`);
  });
}, []);

Journey callback's usage are articulated below:

onJourneyStarted: This event is triggered when a user's journey begins. It serves to notify your application that the process has been initiated. Useful for logging or implementing any preparatory actions necessary for the journey.
onJourneyFinished: This callback is activated upon the completion of a user's journey. It signifies that the user has successfully navigated through all steps and finished the process. This is typically where you would implement any code required to handle the completion of the journey.
onJourneyCancelled: This event is fired if the user decides to cancel the journey midway. It indicates the user's choice to discontinue the process. This could be useful for providing user-specific feedback or to trigger re-engagement strategies.
onError: This event is invoked when an error occurs at any point during the journey. It allows your application to respond to any unexpected issues, ensuring smooth error handling and user experience. Bellow all possible errors.

Step callback's usage are articulated below:

onStepCaptured: This event is triggered when a user's capture an image or select an image from gallery. The purpose of this method is to handle the captured steps images.
onStepResult: This event is triggered with an outcome after complete of a submission and process. This is typically where you may handle the results of your submitted step.

Get Summary of the Verification Journey

You can get the Status of the journey anytime by calling the following function. You will receive the response against onJourneySummary event having the fields journeyId, journeyStepSummaries, journeyResult and journeyIsComplete.

IDWiseModule.getJourneySummary("<JOURNEY_ID>");

Here is a full sample of how to start an ID verification flow.

Resuming a new journey

IDWiseModule.startDynamicJourney("<JOURNEY_DEFINITION_ID>","<JOURNEY_ID>","en");

This method takes all the same parameters. Only one parameter is replace from referenceNo to journeyId.

journeyId: This is a unique identifier that identifies your journey and it can be used to resume. This is received in the implementation of journeyCallback interface in onJourneyStarted method when you started journey first time.

📘
Sample Project
You can find the sample project for a complete React-Native Integration in dynamic mode.