Custom Pages - Display Captured Image

Introduction

Documents, faces, and additional documents captured during the ID&V flow can be displayed on a Custom Page using session data and substitution variables with parameters that can reference the image or document page.

Data that can be displayed includes the following:

  • Document Capture - Images only
  • Face Capture - Images only
  • Additional Document Capture - Images or PDF

This guide will describe the required steps how to configure the Custom Page and Process Definition to display the image of a document, face, and additional document captured during the Process Instance.

Display Captured Image

The process of displaying a captured document, face, or additional document image is similar among each identity image. This guide uses document image as a lead example but will detail differences for face and additional documents where applicable.

Support for displaying captured images in Custom Pages is available from activities Custom Pages V2, Custom Pages V2 - External, Custom Page Without Response and Custom Page External Without Response.

Step 1 - Prepare the Custom Page

Prepare a Custom Page that includes a HTML <img> tag and an ID that will be used to populate the image using the captured document image.

Document Image Example
Face Image Example

Document Image Example:

HTML
Copy

In the example above, the image will be displayed within the<img src="" id="docImg" alt="Error while trying to show the image"></img> using the ID docImg .

Data will be retrieved using an event listener in Javascript.

  1. if (event.data.variables) - This condition will check to determine that data variables from the Process Instance have been retrieved.

  2. var sessionData = event.data.variables.sessionData - Represents all session data retrieved from the Process Instance. This is stored in the sessionData variable.

  3. var docImage = sessionData.docImg_doc1_FRONT_url - Represents the front document image captured during the Process Instance. The format for retrieving a document from the session data isdocImg_{{docKey}}_{{page}}_url where:

    1. docImg - The name of the session data input parameter defined in the Custom Page activity. This value must be set to 'docImg' in both the custom page and the input parameter of the Custom Page activity.
    2. {{docKey}} - Is the document key defined in the document capture activity.
    3. {{page}} - Can be either the FRONT, BACK or BOTH pages of the document.
  4. document.getElementById("docImg").src = docImage - Updates the source of the docImg HTML element to the docImage session data.

Type to search, ESC to discard
Type to search, ESC to discard
Type to search, ESC to discard

Step 2 - Configure the Process Definition

When configuring the Process Definition, it is important that the Custom Page is added after capture activity for document, face, and additional document capture. This is to ensure that session data exists and is retrievable by the Custom Page.

The custom page can be placed at any place in the process definition once the capture, of the data to be displayed, has been performed.

The example used in the image below demonstrates a basic document capture flow.

After the 'Acceptable Document Type' activity, add a 'Custom Page v2 'activity.

Click the 'Custom Page v2' activity to open the right-side contextual menu. Expand the list of input parameters and find the 'Session Data' input parameter. Add a new map entry for "docImg".

From the screenshot above, the key and value pair are defined as follows:

  • Key - docImg is used to identify the session data in Custom Page that is sent to the HTML image tag in Step 1. For documents, this key must be set to docImg . For faces and external faces, this key must be set to faceImg.
  • Value - {"doc1": "image.iddoc?key=doc1&page=FRONT&profile=UNCROPPED&ttl=PT30M"}

The structure of the value parameter follows a URL parameter like pattern of configuration options separated by an '&' between each configuration.

Example Document Format:

{{key} : "image.iddoc?key={key}&page={page}&profile={profile}&ttl={ttl}"} .

The table below describes each configuration option:

ParameterRequiredDefaultDescription
keyYesThis is the document key. For example 'doc1'.
pageYesFRONT | BACK represents which page of the document will be passed to the Custom Page.
profileYesCROPPED | UNCROPPED determined whether to send the cropped or uncropped document image to the Custom Page.
ttlNoPT15MAn ISO 8601 Duration. The default duration is 15 minutes.

Example Face Format:

{{key}:”image.face?key={key}&ttl={ttl}}

For example: {"face1":"image.face?key=face1&ttl=PT30M"}

The table below describes each configuration option:

ParameterRequiredDefaultDescription
keyYesThis is the face key. For example 'face1'.
ttlNoPT15MAn ISO 8601 Duration. The default duration is 15 minutes.

Example Additional Document Format:

{{key}}: "image.adddoc?Key={key}&addDocId={addDocId}&ttl={ttl}&page={page}

The table below describes each configuration option:

ParameterRequiredDefaultDescription
keyYesthis is the doc key - i.e. adddoc1 or adddoc2 etc.
ttlNoPT15M

This is an ISO Duration

The default duration should come from a global config.

pageYesThis is free form but is currently the page number.
addDocIdYesThis is the id of the additional document which is taken from the additionalDocuments input from the activity.

Once both session data is defined, save the Process Definition. The Custom Page is now able to retrieve session data passed from the document capture process.

Type to search, ESC to discard
Type to search, ESC to discard
Type to search, ESC to discard