Template Type Configuration

There are five main types of template types. The aim of each one is to provide a
static string which is passed into the templating function to render to the
page. Internally, each of the five types is converted into a Promise which will
resolve with the string mentioned above.

TemplateType.Function

The Function type provider should be a function which should accept a single
parameter which is the Templates string. This can be used to streamline the
template storage in the consuming application if desired.

The function should return a single string which is ready to be passed through
to the pre processor in the next rendering stage.

[Templates]: {
	type: TemplateType.Function,
	provider: (templateName: Templates) => `<div>
		<h1>Template Heading</h1>
		<p>This is the template for ${templateName}</p>
	</div>`
}

TemplateType.Null

The Null type must not specify any provider function. It is designed to
explicitly state to the system that there should be nothing rendered for this
template.

[Templates]: {
	type: TemplateType.Null
}

TemplateType.Promise

The Promise type provider should be a function which should accept a single
parameter which is the Templates string. This can be used to streamline the
template storage in the consuming application if desired.

The function should return a promise which resolves with a single string to be
passed through to the pre processor in the next rendering stage.

NOTE: You can use this type to programmatically generate asynchronous values
in your own code, or request the content from a web server using your own code
rather than depending on the Url type if desired. This will allow greater
control over request parameters and cookies.

[Templates]: {
	type: TemplateType.Promise,
	provider: new Promise((resolve) =>
		resolve(`<div>
			<h1>Template Heading</h1>
			<p>This is your custom template</p>
		</div>`)
	)
}

TemplateType.String

The String type provider should be a single string to be passed through to the
pre processor in the next rendering stage.

[Templates]: {
	type: TemplateType.String,
	provider: `<div>
			<h1>Template Heading</h1>
			<p>This is the template for ${templateName}</p>
		</div>`
	)
}

TemplateType.Url

The Url type provider should be a single string which will the system will
make an HTTP request to providing current cookies. The resulting string will be
passed through to the pre processor in the next rendering stage.

Loading events will be triggered during these requests for you to use to display
loading messages to your users.

[Templates]: {
	type: TemplateType.Url,
	provider: `https://mywebsite.com/?template=my-template`
}

Pre-Processor Configuration

There are currently two supported pre processors in the solution. The aim of
each one is to accept in a string and process it before returning it for
rendering to the DOM. They are only designed to accept and return static strings
for efficiency and uniformity, but there are parameters passed into them. Each
pre-processor is executed with the entire dictionary spread over the properties
provided by the current template function.

PreProcessor.None

The None processor does nothing to the content passed into it and is
recommended for content which has already been processed for language strings.

PreProcessor.Mustache

The Mustache processor runs the string through the
mustache.js node module which uses the
mustache templating engine internally to process
the provided strings.

Default Templates

This file describes the default templates for each possible layout the SDK will
use during a journey life cycle. These can be overridden by following the
How to Override Templates section of the primary documentation. Any
templates not overridden will default to the values described here.

Some elements of the templates are required for the sdk to function correctly,
whereas others are not. These will be highlighted in the defaults below. These
elements can be moved around and wrapped in other elements if desired, but the
data-jcs-element attribute must remain. Additional class names, attributes and
ids can be added too if desired.

Templates.None

This template is used when nothing should be displayed. You can override this
if required to display some kind of “loading” screen in the very brief moments
it may be visible.

Configuration

Key	Value
Type	TemplateType.Null

Templates.Initializing

This template is used when the SDK is initialising and scanning hardware to
attempt to detect viable capture devices. This can take a variable amount of
time depending on how many capture devices are present on the device.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{INITIALIZING_TITLE}}</h2>
<p>{{INITIALIZING_DESCRIPTION}}</p>

Templates.Camera

This template is used to allow the user to use their device camera to capture an
image on the fly rather than having to take a picture with their normal camera
application and upload it separately. This is especially useful on desktop
devices where it’s more difficult/slower to take a photo and upload it.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_CAMERA}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<form class="camera-options--container">
	<p data-jcs-element="camera__status" class="camera-status"></p>
	<select data-jcs-element="camera__select" class="camera-choices"></select>
</form>
<div class="camera-viewfinder--container">
	<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"></canvas>
</div>
<form class="button-container">
	<input data-jcs-element="camera__capture" class="button button--primary" type="button" value="{{CAMERA_CAPTURE}}" />
</form>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
camera__status	Displays the camera permissions/usability status messages	No
camera__select	Displays the select element for picking the camera to use	No
camera__viewfinder	Displays the preview for the image capture	Yes
camera__capture	Capture a frame	Yes

Templates.Cropper

This template is used for the image cropping utility to display its UI. Users
can use this to adjust the detected image boundaries in an uploaded image to
further assist in document extraction.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_CROPPER}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<div class="cropper--container">
	<canvas data-jcs-element="cropper__canvas" class="cropper"></canvas>
</div>
<form class="button-container">
	<input data-jcs-element="cropper__retry" class="button button--secondary" type="button" value="{{CROPPER_RETRY}}" />
	<input data-jcs-element="cropper__submit" class="button button--primary" type="button" value="{{CROPPER_UPLOAD}}" />
</form>
<div data-jcs-element="cropper__status">
	<p data-jcs-element="cropper__status__message"></p>
</div>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
cropper__canvas	Displays the cropping UI	Yes
cropper__reset	Resets the cropping handles to the extremes of the image	No
cropper__submit	Submits the cropped image to the services for validation	Yes
cropper__status	The outer container for the status messages	No
cropper__status__message	The message container for the status messages	No

Templates.Filesystem

This template is used to present the user with a UI to select an image from
their file system either using the traditional input element approach, or using
the more modern drag and drop approach where available in the browser
environment.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_FILESYSTEM}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<form class="file-input--container">
	<input data-jcs-element="file__input" class="file-input" id="jcs__file__input" type="file" />
</form>
<label data-jcs-element="file__drop__box" class="file-input--alternatives" for="jcs__file__input">
	<span class="file-input--click">{{FILESYSTEM_SELECT}}</span>
	<span data-jcs-element="file__drop__label" class="file-input--drag">{{FILESYSTEM_DROP_IMAGE}}</span>
</label>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
file__input	Allows the user to to select an image from the file system using the browser UI	Yes
file__drop__box	Allows the user to drop an image onto the UI	No
file__drop__label	Displays a message stating drag/drop functionality is supported on their device	No

Templates.Gateway

This template is used to display the entry point to the journey where the images
of identity documents are captured. This is shown when the capture mode is
either camera of file system upload.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_GATEWAY}}</h2>
<form data-jcs-element="gateway__upload" class="upload-toggle--container">
	<label data-jcs-element="gateway__upload__toggle__label" class="upload-toggle--label">
		<input data-jcs-element="gateway__upload__toggle" class="upload-toggle" type="checkbox" />
		<span class="upload-toggle--text">{{GATEWAY_CAMERA}}</span>
	</label>
	<p data-jcs-element="gateway__camera__status"></p>
</form>
<div data-jcs-element="provider__container" class="provider-container"></div>
<form class="button-container">
	<input data-jcs-element="cancel__journey" class="button button--secondary" type="button" value="{{CANCEL_JOURNEY}}" />
</form>

Elements

Name	Purpose	Required
gateway__upload	Contains the upload toggle feature UI	No
gateway__upload__toggle__label	Contains helpful text for the upload toggle selector	No
gateway__upload__toggle	Allows the user to choose to use the camera instead of file upload	No
provider__container	Used as the position to write providers to the DOM	Yes
cancel__journey	Cancel the current journey	No
gateway__camera__status	Status messages for the camera	No

Templates.Liveness

This template is used to take the user through the liveness checking process
using the underlying retina services.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_LIVENESS}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<form class="camera-options--container">
	<p data-jcs-element="camera__status" class="camera-status"></p>
	<select data-jcs-element="camera__select" class="camera-choices"></select>
</form>
<div data-jcs-element="retina__notifications" class="camera-message--container">
	<span data-jcs-element="retina__message" class="camera-message"></span>
	<span data-jcs-element="retina__timer" class=camera-countdown""></span>
</div>
<div class="camera-viewfinder--container" data-fullscreen="false">
	<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"></canvas>
</div>
<form class="button-container">
	<input data-jcs-element="cancel__journey" class="button button--secondary" type="button" value="{{CANCEL_JOURNEY}}" />
	<input data-jcs-element="retina__start" class="button button--primary" type="button" value="{{LIVENESS_START}}" />
</form>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
camera__status	Displays the camera permissions/usability status messages	No
camera__select	Displays the select element for picking the camera to use	No
camera__viewfinder	Displays the camera viewfinder	Yes
retina__notifications	Contains the notifications for the retina service	No
retina__message	Displays the messages instructing the user which poses are required	No
retina__timer	Displays any timer information	No
retina__start	Starts the retina service capturing images	Yes
cancel__journey	Cancel the current journey	No

Templates.Login

This template is used to show the user the login page where they can provide a
username and password to authenticate with the service. This is not necessary if
specifying an API key/token instead.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_LOGIN}}</h2>
<form data-jcs-element="login__form" class="login-form">
	<div class="input--container">
		<span class="input--label">{{LOGIN_USERNAME}}</span>
		<input data-jcs-element="login__username" class="input" id="login_username" type="text" />
	</div>
	<div class="input--container">
		<span class="input--label">{{LOGIN_PASSWORD}}</span>
		<input data-jcs-element="login__password" class="input" id="login_password" type="password" />
	</div>
	<div class="login-error--container">
		<p data-jcs-element="login__errors" class="login-error"></p>
	</div>
	<div class="button-container">
		<input data-jcs-element="login__submit" class="button button--primary" type="submit" value="{{LOGIN_SUBMIT}}" />
	</div>
</form>

Elements

Name	Purpose	Required
login__form	Holds the form elements and handles submission fo data to the services when submitted	Yes
login__username	Provider space for the user to enter their username	Yes
login__password	Provides space for the user to enter their password	Yes
login__errors	Displays any errors	No
login__submit	Submits the form	No

Templates.Result

This template is used for showing the journey results, regardless of outcome.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_RESULTS}}</h2>
<div class="info-container">
	{{#result}}
	<p class="info-item journey-result">
		<span class="info-item__name">{{INFO_JOURNEY_RESULT}}</span>
		<span class="info-item__value">{{result}}</span>
	</p>
	{{/result}}
	{{#referenceId}}
	<p class="info-item journey-reference">
		<span class="info-item__name">{{INFO_JOURNEY_REFERENCE}}</span>
		<span class="info-item__value">{{referenceId}}</span>
	</p>
	{{/referenceId}}
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span class="info-item__value">{{journeyId}}</span>
	</p>
	<h3>{{RESULTS_DOCUMENTS}}</h3>
	<ol class="documents">
		{{#documents}}
			<li class="document" data-document="{{_type}}" data-result="{{_result}}">
				<ul class="document__details">
					<li class="info-item document-details__type">
						<span class="info-item__name">{{RESULTS_DOCUMENT_TYPE}}</span>
						<span class="info-item__value">{{type}}</span>
					</li>
					<li class="info-item document-details__result">
						<span class="info-item__name">{{RESULTS_DOCUMENT_RESULT}}</span>
						<span class="info-item__value">{{result}}</span>
					</li>
				</ul>
				<ul class="document__extracted-fields">
					{{#extractedFields}}
						<li class="info-item extracted-field" data-field="{{_name}}">
							<span class="info-item__name">{{name}}</span>
							</span class="info-item__value">{{value}}</span>
						</li>
					{{/extractedFields}}
					{{^extractedFields}}
						<li class="info-item">
							<span class="info-item__value">{{RESULTS_EXTRACTED_FIELDS_NONE}}</span>
						</li>
					{{/extractedFields}}
				</ul>
			</li>
		{{/documents}}
		{{^documents}}
			<li class="info-item">
				<span class="info-item__value">{{RESULTS_DOCUMENTS_NONE}}</span>
			</li>
		{{/documents}}
	</ol>
	<h3>{{RESULTS_DETAILS}}</h3>
	<ul>
		{{#resultDetails}}
			<li class="info-item" data-result-detail="{{_name}}">
				<span class="info-item__name">{{name}}</span>
				<span class="info-item__value">{{value}}</span>
			</li>
		{{/resultDetails}}
		{{^resultDetails}}
			<li class="info-item">
				<span class="info-item__value">{{RESULTS_DETAILS_NONE}}</span>
			</li>
		{{/resultDetails}}
	</ul>
</div>
<form class="button-container">
	<input data-jcs-element="result__logout" class="button button--secondary" type="button" value="{{RESULTS_LOGOUT}}" />
	<input data-jcs-element="result__journey__restart" class="button button--primary" type="button" value="{{RESULTS_NEW_JOURNEY}}" />
</form>

Elements

Name	Purpose	Required
result__logout	Invoke a log out of the currently logged in user	No
result__journey__restart	Invoke a new journey	No

Templates.Scanner

This template is used for showing the scanning UI to the user. This doesn’t
require any user interaction to function as intended. Actions are triggered by
the remote scanning services.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_SCANNER}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<div data-jcs-element="scanner__box__title" class="scanner-title">{{SCANNER_TITLE_WAITING}}</div>
<div data-jcs-element="scanner__box__subtitle" class="scanner-description">{{SCANNER_DESC_WAITING}}</div>
<form class="button-container">
	<input data-jcs-element="scanner__action" class="button button--primary" type="button" value="" />
</form>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
scanner__box__title	Displays top line text for the scanner status	No
scanner__box__subtitle	Displays the bottom line text for the scanner status	No
scanner__action	Begin the currently displayed scanner action	No

Templates.View

This template is used to show the user the image which has been captured by the
camera or selected from the filesystem.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_VIEW}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<div class="image-preview--container">
	<img data-jcs-element="view__preview" class="image-preview">
</div>
<form class="button-container">
	<input data-jcs-element="view__retry" class="button button--secondary" type="button" value="{{VIEW_RETRY}}" />
	<input data-jcs-element="view__begin__crop" class="button button--secondary" type="button" value="{{VIEW_CROP}}" />
	<input data-jcs-element="view__upload" class="button button--primary" type="button" value="{{VIEW_UPLOAD}}" />
</form>
<div data-jcs-element="view__status">
	<p data-jcs-element="view__status__message"></p>
</div>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
view__preview	Displays the captured image	Yes
view__cancel	Cancel the current journey	No
view__begin__crop	Send the current image to the cropping service for processing	No
view__upload	Upload the current image	Yes
view__status	The outer container for the status messages	No
view__status__message	The message container for the status messages	No

Templates.SmartCapture

This template is used to take the user through the smart capture process using
the underlying internal ides web assembly services.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_SMART_CAPTURE}}</h2>
<div class="info-container">
	<p class="info-item journey-state">
		<span class="info-item__name">{{INFO_JOURNEY_STATE}}</span>
		<span data-jcs-element="info__journey__state" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION}}</span>
		<span data-jcs-element="info__journey__action" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-action-attempt">
		<span class="info-item__name">{{INFO_JOURNEY_ACTION_ATTEMPT}}</span>
		<span data-jcs-element="info__journey__action__attempt" class="info-item__value">...</span>
	</p>
	<p class="info-item journey-id">
		<span class="info-item__name">{{INFO_JOURNEY_ID}}</span>
		<span data-jcs-element="info__journey__id" class="info-item__value">...</span>
	</p>
</div>
<form class="camera-options--container">
	<p data-jcs-element="camera__status" class="camera-status"></p>
	<select data-jcs-element="camera__select" class="camera-choices"></select>
</form>
<div class="camera-viewfinder--container">
	<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"></canvas>
</div>
<div class="camera-conditions--container">
	<span data-jcs-element="camera__condition__capturing" class="camera-condition camera-condition--capturing">{{CAMERA_CONDITION_CAPTURING}}</span>
	<span data-jcs-element="camera__condition__alignment" class="camera-condition camera-condition--alignment">{{CAMERA_CONDITION_ALIGNMENT}}</span>
	<span data-jcs-element="camera__condition__blur" class="camera-condition camera-condition--blur">{{CAMERA_CONDITION_BLUR}}</span>
	<span data-jcs-element="camera__condition__glare" class="camera-condition camera-condition--glare">{{CAMERA_CONDITION_GLARE}}</span>
	<span data-jcs-element="camera__condition__low__resolution" class="camera-condition camera-condition--low-resolution">{{CAMERA_CONDITION_LOW_RESOLUTION}}</span>
</div>
<form class="button-container">
	<input data-jcs-element="camera__capture" class="button button--primary" type="button" value="{{CAMERA_CAPTURE}}" />
</form>

Elements

Name	Purpose	Required
info__journey__state	Displays the current state of the journey	No
info__journey__action	Displays the currently required action	No
info__journey__action__attempt	Displays how many attempts have been taken for the currently required action	No
info__journey__id	Displays the current journey’s ID	No
camera__status	Displays the camera permissions/usability status messages	No
camera__select	Displays the select element for picking the camera to use	No
camera__viewfinder	Displays the preview for the image capture	Yes
camera__condition__capturing	Displays whilst the automatic capture process is running	No
camera__condition__alignment	Displays when the document isn’t wholly in the viewfinder or is too close to the edges	No
camera__condition__blur	Displays when the image is too blurry	No
camera__condition__glare	Displays when the image has signs of glare present	No
camera__condition__low__resolution	Displays when the document in view isn’t covering enough of the viewfinder	No
camera__capture	Begin automatic capture process	Yes

Templates.JourneySelect

This template is used when presenting the user with a list of the available
journeys. The user will be able to see a list of the journeys which are
configured in the back office, and pick from one. If there is only one journey
available, this screen will be bypassed. If there are none configured, an error
message will be shown.

Configuration

Key	Value
Type	TemplateType.String
Processor	PreProcessor.Mustache

Default Provider

<h2 class="section-title">{{PROVIDER_TITLE_JOURNEY_SELECT}}</h2>
<form class="journey-select--choices">
	<select data-jcs-element="journey-select__choices" class="journey-choices"></select>
</form>
<form class="button-container">
	<input data-jcs-element="journey-select__continue" class="button button--primary" type="button" value="{{JOURNEY_SELECT_CONTINUE}}" />
</form>

Elements

Name	Purpose	Required
journey-select__choices	Populated with a list of available journeys	Yes
journey-select__continue	Continues the process with the selected journey	Yes