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 thedata-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
<div class="dark-inner-provider-container">
<div>
<form class="camera-options--container">
<select data-jcs-element="camera__select" class="camera-choices camera-choices-half-s camera-choices-full-xs control control--select"></select>
</form>
<div class="help-container">
<div class="camera-viewfinder--container">
<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"></canvas>
<div data-jcs-element="overlay_viewfinder" class="camera-viewfinder--overlay--transparent">
<div class="loading-animation-container" data-jcs-element="loading-animation" style="display:none">
</div>
</div>
</div>
<div data-jcs-element="info__journey__action__container" class="camera-capture--caption" style="display: none">
<p data-jcs-element="info__journey__action__text"></p>
</div>
<div data-jcs-element="info__journey__action__selfie__container" class="camera-capture--caption" style="display: none">
{{CAMERA_CAPTURE_SELFIE_CAPTION}}
</div>
<div data-jcs-element="info__journey__action__address__container" class="camera-capture--caption" style="display: none">
{{CAMERA_CAPTURE_ADDRESS_CAPTION}}
</div>
<div class="help-inner-container" data-jcs-element="capture__help__container" style="display:none">
<h2>{{HELP_MODAL_AUTOCAPTURE_TITLE}}</h2>
<p>{{HELP_MODAL_AUTOCAPTURE_SUBTITLE}}</p>
<b>{{HELP_MODAL_AUTOCAPTURE_TIPS}}</b>
<div class="help-images-container">
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__modal__glare__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_GLARE_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_GLARE_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__modal__low__res__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_FAR_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_FAR_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__modal__blur__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_BLUR_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_BLUR_SUBTITLE}}</p>
</div>
</div>
</div>
<div class="modal-footer modal-bottom modal-actions-container">
<p data-jcs-element="capture__modal__manual__capture__text">{{HELP_MODAL_AUTOCAPTURE_MANUAL_CAPTURE}}</p>
<div class="actions-container">
<div data-jcs-element="capture__modal__camera__manual__capture">
<label class="control control--switch manual--mode--switch" aria-label="switch">
<input type="checkbox" data-jcs-element="capture__modal__camera__manual__capture__check" checked />
<div class="control__switch control__switch__blue">
<div class="icon ico-checkmark-16 control__switchIcon text-black">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon ico-checkmark-16 control__switchIcon text-black"><path d="M13 4L6 12L3 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
</div>
</label>
<p class="action-caption">{{HELP_MODAL_AUTOCAPTURE_TURN_MANUAL_CAPTURE}}</p>
</div>
<div class="spacer"></div>
<div class="help-button-container" data-jcs-element="capture__modal__close__help">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round"/>
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
</div>
<div class="help-inner-container" data-jcs-element="capture__selfie__help__container" style="display:none">
<h2>{{HELP_MODAL_SELFIE_TITLE}}</h2>
<p>{{HELP_MODAL_SELFIE_SUBTITLE}}</p>
<div class="show-mobile">
<div class="help-info-inner-container" data-jcs-element="preview__info__container__fm">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_ID}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="capture__selfie__modal__close__help">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg">
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ID}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg">
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg">
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg">
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg">
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg">
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg">
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg">
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg">
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</li>
</ul>
</div>
</div>
<div class="help-inner-container" data-jcs-element="capture__address__help__container" style="display:none">
<h2>{{HELP_MODAL_POA_TITLE}}</h2>
<p>{{HELP_MODAL_POA_SUBTITLE}}</p>
<b>{{HELP_MODAL_POA_TIPS}}</b>
<div class="help-images-container">
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__address__modal__glare__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_POA_GLARE_TITLE}}</b>
<p>{{HELP_MODAL_POA_GLARE_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__address__modal__low__res__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_POA_FAR_TITLE}}</b>
<p>{{HELP_MODAL_POA_FAR_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="capture__address__modal__blur__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_POA_BLUR_TITLE}}</b>
<p>{{HELP_MODAL_POA_BLUR_SUBTITLE}}</p>
</div>
</div>
</div>
<div class="modal-footer modal-bottom modal-actions-container">
<div class="actions-container">
<div>
</div>
<div class="spacer"></div>
<div class="help-button-container" data-jcs-element="capture__address__modal__close__help">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round"/>
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
</div>
<div class="notification notification-blue" data-jcs-element="attempt__count__container">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25H8.00081C12.2787 0.254627 15.7454 3.72135 15.75 7.99919L15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM7.99958 1.75C4.54799 1.75023 1.75 4.54836 1.75 8C1.75 11.4518 4.54822 14.25 8 14.25C11.4515 14.25 14.2496 11.4522 14.25 8.00081C14.2463 4.55026 11.4501 1.75394 7.99958 1.75ZM8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55229 3 9 3.44772 9 4C9 4.55228 8.55229 5 8 5ZM7 6.25C6.58579 6.25 6.25 6.58579 6.25 7C6.25 7.41421 6.58579 7.75 7 7.75H7.25V11.25H6.5C6.08579 11.25 5.75 11.5858 5.75 12C5.75 12.4142 6.08579 12.75 6.5 12.75H8H9.5C9.91421 12.75 10.25 12.4142 10.25 12C10.25 11.5858 9.91421 11.25 9.5 11.25H8.75V7C8.75 6.58579 8.41421 6.25 8 6.25H7Z" fill="#4A88C6"/>
</svg>
<p>{{PREVIEW_ATTEMPT_NUMBER_START}}<span data-jcs-element="attempt__counter"></span>{{PREVIEW_ATTEMPT_NUMBER_END}}</p>
</div>
</div>
<div class="actions-container">
<div data-jcs-element="camera__manual__capture" class="item">
<div data-jcs-element="camera__manual__capture__inner" style="display: none;">
<label class="control control--switch manual--mode--switch" aria-label="switch">
<input type="checkbox" checked/>
<div class="control__switch">
<div class="icon ico-checkmark-16 control__switchIcon text-black">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon ico-checkmark-16 control__switchIcon text-black"><path d="M13 4L6 12L3 9" stroke="rgb(0, 13, 26)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
</div>
</label>
<p class="action-caption">{{HELP_MODAL_POA_TURN_MANUAL_CAPTURE}}</p>
</div>
</div>
<form class="manual-capture-button-container item">
<div class="camera-capture--container">
<input data-jcs-element="camera__capture" class="camera-capture--button" type="button" />
</div>
</form>
<div class="item">
<div class="help-button-container" data-jcs-element="capture__close__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M16 16L8 8M8 16L16 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
<div class="help-button-container" data-jcs-element="capture__open__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 7C11.0445 7 10 7.68564 10 9C10 9.55228 9.55229 10 9 10C8.44771 10 8 9.55228 8 9C8 6.31436 10.227 5 12 5C14.2091 5 16 6.79086 16 9C16 10.8638 14.7252 12.4299 13 12.874V12.8746V12.8787V12.8827V12.8868V12.8909V12.895V12.8991V12.9031V12.9072V12.9113V12.9153V12.9194V12.9234V12.9275V12.9315V12.9355V12.9396V12.9436V12.9476V12.9517V12.9557V12.9597V12.9637V12.9677V12.9717V12.9757V12.9796V12.9836V12.9876V12.9915V12.9955V12.9995V13.0034V13.0073V13.0113V13.0152V13.0191V13.023V13.0269V13.0308V13.0347V13.0386V13.0425V13.0463V13.0502V13.0541V13.0579V13.0617V13.0656V13.0694V13.0732V13.077V13.0808V13.0846V13.0884V13.0922V13.0959V13.0997V13.1034V13.1071V13.1109V13.1146V13.1183V13.122V13.1257V13.1294V13.133V13.1367V13.1403V13.144V13.1476V13.1512V13.1548V13.1584V13.162V13.1656V13.1691V13.1727V13.1762V13.1797V13.1832V13.1868V13.1902V13.1937V13.1972V13.2007V13.2041V13.2075V13.211V13.2144V13.2178V13.2211V13.2245V13.2279V13.2312V13.2345V13.2379V13.2412V13.2445V13.2477V13.251V13.2542V13.2575V13.2607V13.2639V13.2671V13.2703V13.2735V13.2766V13.2797V13.2829V13.286V13.2891V13.2921V13.2952V13.2983V13.3013V13.3043V13.3073V13.3103V13.3133V13.3162V13.3191V13.3221V13.325V13.3279V13.3307V13.3336V13.3364V13.3392V13.342V13.3448V13.3476V13.3504V13.3531V13.3558V13.3585V13.3612V13.3639V13.3665V13.3691V13.3718V13.3744V13.3769V13.3795V13.382V13.3845V13.387V13.3895V13.392V13.3944V13.3969V13.3993V13.4017V13.404V13.4064V13.4087V13.411V13.4133V13.4156V13.4178V13.42V13.4223V13.4244V13.4266V13.4288V13.4309V13.433V13.4351V13.4371V13.4392V13.4412V13.4432V13.4452V13.4471V13.4491V13.451V13.4529V13.4547V13.4566V13.4584V13.4602V13.462V13.4637V13.4655V13.4672V13.4689V13.4705V13.4722V13.4738V13.4754V13.477V13.4785V13.48V13.4815V13.483V13.4845V13.4859V13.4873V13.4887V13.49V13.4914V13.4927V13.494V13.4952V13.4965V13.4977V13.4988V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V13.4988V13.4977V13.4965V13.4952V13.494V13.4927V13.4914V13.49V13.4887V13.4873V13.4859V13.4845V13.483V13.4815V13.48V13.4785V13.477V13.4754V13.4738V13.4722V13.4705V13.4689V13.4672V13.4655V13.4637V13.462V13.4602V13.4584V13.4566V13.4547V13.4529V13.451V13.4491V13.4471V13.4452V13.4432V13.4412V13.4392V13.4371V13.4351V13.433V13.4309V13.4288V13.4266V13.4244V13.4223V13.42V13.4178V13.4156V13.4133V13.411V13.4087V13.4064V13.404V13.4017V13.3993V13.3969V13.3944V13.392V13.3895V13.387V13.3845V13.382V13.3795V13.3769V13.3744V13.3718V13.3691V13.3665V13.3639V13.3612V13.3585V13.3558V13.3531V13.3504V13.3476V13.3448V13.342V13.3392V13.3364V13.3336V13.3307V13.3279V13.325V13.3221V13.3191V13.3162V13.3133V13.3103V13.3073V13.3043V13.3013V13.2983V13.2952V13.2921V13.2891V13.286V13.2829V13.2797V13.2766V13.2735V13.2703V13.2671V13.2639V13.2607V13.2575V13.2542V13.251V13.2477V13.2445V13.2412V13.2379V13.2345V13.2312V13.2279V13.2245V13.2211V13.2178V13.2144V13.211V13.2075V13.2041V13.2007V13.1972V13.1937V13.1902V13.1868V13.1832V13.1797V13.1762V13.1727V13.1691V13.1656V13.162V13.1584V13.1548V13.1512V13.1476V13.144V13.1403V13.1367V13.133V13.1294V13.1257V13.122V13.1183V13.1146V13.1109V13.1071V13.1034V13.0997V13.0959V13.0922V13.0884V13.0846V13.0808V13.077V13.0732V13.0694V13.0656V13.0617V13.0579V13.0541V13.0502V13.0463V13.0425V13.0386V13.0347V13.0308V13.0269V13.023V13.0191V13.0152V13.0113V13.0073V13.0034V12.9995V12.9955V12.9915V12.9876V12.9836V12.9796V12.9757V12.9717V12.9677V12.9637V12.9597V12.9557V12.9517V12.9476V12.9436V12.9396V12.9355V12.9315V12.9275V12.9234V12.9194V12.9153V12.9113V12.9072V12.9031V12.8991V12.895V12.8909V12.8868V12.8827V12.8787V12.8746V12.8705V12.8664V12.8623V12.8582V12.8541V12.85V12.8459V12.8418V12.8376V12.8335V12.8294V12.8253V12.8212V12.8171V12.8129V12.8088V12.8047V12.8006V12.7964V12.7923V12.7882V12.784V12.7799V12.7758V12.7716V12.7675V12.7634V12.7592V12.7551V12.751V12.7469V12.7427V12.7386V12.7345V12.7303V12.7262V12.7221V12.718V12.7138V12.7097V12.7056V12.7015V12.6973V12.6932V12.6891V12.685V12.6809V12.6768V12.6727V12.6686V12.6645V12.6604V12.6563V12.6522V12.6481V12.644V12.6399V12.6358V12.6317V12.6277V12.6236V12.6195V12.6155V12.6114V12.6073V12.6033V12.5992V12.5952V12.5912V12.5871V12.5831V12.5791V12.575V12.571V12.567V12.563V12.559V12.555V12.551V12.547V12.5431V12.5391V12.5351V12.5312V12.5272V12.5233V12.5193V12.5154V12.5114V12.5075V12.5036V12.4997V12.4958V12.4919V12.488V12.4841V12.4803V12.4764V12.4725V12.4687V12.4648V12.461V12.4572V12.4534V12.4496V12.4458V12.442V12.4382V12.4344V12.4306V12.4269V12.4231V12.4194V12.4157V12.4119V12.4082V12.4045V12.4008V12.3971V12.3935V12.3898V12.3862V12.3825V12.3789V12.3753V12.3716V12.368V12.3645V12.3609V12.3573V12.3538V12.3502V12.3467V12.3432V12.3396V12.3361V12.3327V12.3292V12.3257V12.3223V12.3188V12.3154V12.312V12.3086V12.3052V12.3018V12.2984V12.2951V12.2917V12.2884V12.2851V12.2818V12.2785V12.2753V12.272V12.2687V12.2655V12.2623V12.2591V12.2559V12.2527V12.2496V12.2464V12.2433V12.2402V12.2371V12.234V12.2309V12.2279V12.2248V12.2218V12.2188V12.2158V12.2128V12.2099V12.2069V12.204V12.2011V12.1982V12.1953V12.1924V12.1896V12.1867V12.1839V12.1811V12.1784V12.1756V12.1728V12.1701V12.1674V12.1647V12.162V12.1594V12.1567V12.1541V12.1515V12.1489V12.1463V12.1438V12.1413V12.1388V12.1363V12.1338V12.1313V12.1289V12.1265V12.1241V12.1217V12.1193V12.117V12.1147V12.1124V12.1101V12.1078V12.1056V12.1034V12.1012V12.099V12.0968V12.0947V12.0926V12.0905V12.0884V12.0864V12.0843V12.0823V12.0803V12.0783V12.0764V12.0745V12.0726V12.0707V12.0688V12.067V12.0652V12.0634V12.0616V12.0599V12.0581V12.0564V12.0548V12.0531V12.0515V12.0499V12.0483V12.0467V12.0452V12.0437V12.0422V12.0407V12.0393V12.0378V12.0365V12.0351V12.0337V12.0324V12.0311V12.0298V12.0286V12.0274V12.0262V12.025V12.0239V12.0227V12.0216V12.0206V12.0195V12.0185V12.0175V12.0166V12.0156V12.0147V12.0138V12.013V12.0121V12.0113V12.0105V12.0098V12.0091V12.0084V12.0077V12.007V12.0064V12.0058V12.0053V12.0047V12.0042V12.0037V12.0033V12.0029V12.0025V12.0021V12.0018V12.0015V12.0012V12.0009V12.0007V12.0005V12.0004V12.0002V12.0001V12.0001V12L12 12H11C11 11.4477 11.4477 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7ZM12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z" fill="white"/>
</svg>
<p class="action-caption">{{HELP_MODAL_NEED_HELP}}</p>
</div>
</div>
</div>
</div>
</div>
Elements
| Name | Purpose | Required |
| info__journey__action__container | Container to hold the text title when camera is being used for document capture | No |
| info__journey__action__text | Displays the text for document action | No |
| info__journey__action__selfie__container | Container to hold the text title when camera is being used for selfie capture | No |
| info__journey__action__address__container | Container to hold the text title when camera is being used for poa capture | No |
| capture__help__container | Container to show help modal for document step | No |
| capture__modal__glare__animation__container | Container to hold glare animation for document step | No |
| capture__modal__low__res__animation__container | Container to hold low resolution animation for document step | No |
| capture__modal__blur__animation__container | Container to hold blur animation modal for document step | No |
| capture__modal__camera__manual__capture__check | Check to move back to smart capture is enabled | No |
| capture__modal__close__help | Button to close document help modal | No |
| capture__selfie__help__container | Container to show help modal for document step | No |
| capture__selfie__modal__close__help | Button to close selfie help modal | No |
| capture__address__help__container | Container to show help modal for document step | No |
| capture__address__modal__glare__animation__container | Container to hold glare animation for PoA step | No |
| capture__address__modal__low__res__animation__container | Container to hold low resolution animation for PoA step | No |
| capture__address__modal__blur__animation__container | Container to hold blur animation modal for PoA step | No |
| capture__address__modal__close__help | Button to close document help modal | No |
| camera__select | Displays the select element for picking the camera to use | No |
| camera__viewfinder | Displays the preview for the image capture | Yes |
| overlay_viewfinder | Displays an overlay above image capture | No |
| camera__capture | Capture a frame | Yes |
| camera__manual__capture | Container for the smart capture check | Yes |
| camera__manual__capture__inner | Inner Container for the smart capture check | Yes |
| capture__close__help | Close help modal for desktop devices | Yes |
| capture__open__help | Open help modal for desktop devices | Yes |
| attempt__count__container | Container to hold the attempt information | No |
| attempt__counter | Display the remaining attempts | No |
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>
<div class="light-inner-provider-container">
<div>
<div data-jcs-element="identity__document__file__upload">
<div class="preview-title-container">
<h2 class="preview-title">{{PROVIDER_TITLE_FILESYSTEM_ID}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_FILESYSTEM_ID}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__id">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ID}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__id">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_ID}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/licence-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ID}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-angle.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ID}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ID}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ID}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button"
data-jcs-element="preview__page__close__info__id">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ID}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/licence-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ID}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-angle.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ID}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ID}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ID}}</span>
</li>
</ul>
</div>
<div>
<h3>{{FILESYSTEM_IDENTITY_DOCUMENT}} - <span data-jcs-element="info__journey__action"></h3>
</div>
</div>
<div data-jcs-element="facematch__file__upload">
<div class="preview-title-container">
<h2>{{PROVIDER_TITLE_FILESYSTEM_FACEMATCH}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_FILESYSTEM_FACEMATCH}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__fm">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__fm">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="preview__page__close__info__fm">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</li>
</ul>
</div>
<div>
<h3><span>{{FILESYSTEM_FACEMATCH}}</span></h3>
</div>
</div>
<div data-jcs-element="address__file__upload">
<div class="preview-title-container">
<h2>{{PROVIDER_TITLE_FILESYSTEM_ADDRESS}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_FILESYSTEM_ADDRESS}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__poa">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__poa">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/address-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ADDRESS}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/address-angled.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ADDRESS}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/address-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ADDRESS}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/address-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ADDRESS}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="preview__page__close__info__poa">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/address-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ADDRESS}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/address-angled.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ADDRESS}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/address-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ADDRESS}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/address-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ADDRESS}}</span>
</li>
</ul>
</div>
<div>
<h3><span>{{FILESYSTEM_ADDRESS}}</span></h3>
</div>
</div>
<div>
<p class="color-gray">{{FILESYSTEM_SUPPORTED_TYPES_START}}<i>{{FILESYSTEM_SUPPORTED_TYPES_END}}</i></p>
<p class="color-gray">{{FILESYSTEM_MAX_FILE_SIZE}}</p>
</div>
<div class="file-upload-container" data-jcs-element="file__drop__box">
<form class="file-input--container">
<input data-jcs-element="file__input" class="file-input" id="jcs__file__input" type="file" />
</form>
<div class="drag-and-drop-container">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M28.75 18.75C34.2733 18.75 38.75 23.2267 38.75 28.75C38.75 34.2733 34.2733 38.75 28.75 38.75C23.2267 38.75 18.75 34.2733 18.75 28.75C18.75 23.2267 23.2267 18.75 28.75 18.75Z"
stroke="#7E878F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path d="M28.75 33.75V23.75" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M28.75 23.75L25 27.5" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M28.75 23.75L32.5 27.5" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M6.25 11.25H23.75" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M6.25 18.75H16.25" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M6.25 26.25H12.5" stroke="#7E878F" stroke-width="1.5" stroke-linecap="round"
stroke-linejoin="round" />
<path
d="M12.5 33.75H3.75C2.37 33.75 1.25 32.63 1.25 31.25V3.75C1.25 2.37 2.37 1.25 3.75 1.25H21.465C22.1283 1.25 22.7633 1.51333 23.2317 1.98167L28.0183 6.76833C28.4867 7.23667 28.75 7.87167 28.75 8.535V12.5"
stroke="#7E878F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<span class="color-gray">{{FILESYSTEM_DRAG_DROP}}</span>
<span class="color-gray">{{FILESYSTEM_OR}}</span>
</div>
<button class="button button--secondary"
onclick="document.getElementById('jcs__file__input').click()">{{FILESYSTEM_CHOOSE}}</button>
</div>
<div>
<p class="check-error-color" data-jcs-element="file__too__large__error">{{FILESYSTEM_CHECK_FILE_TOO_BIG}} </p>
<p class="check-error-color" data-jcs-element="invalid__format__error"> {{FILESYSTEM_CHECK_FILE_INCORRECT_FORMAT}}</p>
<p data-jcs-element="uploading__file__without__preview">{{FILESYSTEM_UPLOADING}}</p>
</div>
<div class="notification notification-blue" data-jcs-element="attempt__count__container">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25H8.00081C12.2787 0.254627 15.7454 3.72135 15.75 7.99919L15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM7.99958 1.75C4.54799 1.75023 1.75 4.54836 1.75 8C1.75 11.4518 4.54822 14.25 8 14.25C11.4515 14.25 14.2496 11.4522 14.25 8.00081C14.2463 4.55026 11.4501 1.75394 7.99958 1.75ZM8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55229 3 9 3.44772 9 4C9 4.55228 8.55229 5 8 5ZM7 6.25C6.58579 6.25 6.25 6.58579 6.25 7C6.25 7.41421 6.58579 7.75 7 7.75H7.25V11.25H6.5C6.08579 11.25 5.75 11.5858 5.75 12C5.75 12.4142 6.08579 12.75 6.5 12.75H8H9.5C9.91421 12.75 10.25 12.4142 10.25 12C10.25 11.5858 9.91421 11.25 9.5 11.25H8.75V7C8.75 6.58579 8.41421 6.25 8 6.25H7Z"
fill="#4A88C6" />
</svg>
<p>{{PREVIEW_ATTEMPT_NUMBER_START}}<span
data-jcs-element="attempt__counter"></span>{{PREVIEW_ATTEMPT_NUMBER_END}}</p>
</div>
</div>
</div> <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 |
| identity__document__file__upload | Container for identity document file upload guidance | No |
| preview__page__open__info__id | Container to hold the button to open the document id file upload help modal for mobile | No |
| preview__info__container__id | Container to hold the document id help modal for mobile | No |
| preview__page__close__info__id | Container to hold the button to close the document id file upload help modal for mobile | No |
| facematch__file__upload | Container for facematch file upload guidance | No |
| preview__page__open__info__fm | Container to hold the button to open the face match file upload help modal for mobile | No |
| preview__info__container__fm | Container to hold the face match help modal for mobile | No |
| preview__page__close__info__fm | Container to hold the button to close the face match file upload help modal for mobile | No |
| address__file__upload | Container for proof of address file upload guidance | No |
| preview__page__open__info__poa | Container to hold the button to open the proof of address file upload help modal for mobile | No |
| preview__info__container__poa | Container to hold the proof of address help modal for mobile | No |
| preview__page__close__info__poa | Container to hold the button to close the proof of address file upload help modal for mobile | No |
| file__drop__box | Container for file drag and drop | No |
| file__input | Input for file upload | No |
| file__too__large__error | Container for file too large error message | No |
| invalid__format__error | Container for invalid format error message | No |
| uploading__file__without__preview | Container for file pdf without preview warning | No |
| attempt__count__container | Container to hold the attempt information | No |
| attempt__counter | Display the remaining attempts | 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 or 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}}<div data-jcs-element="provider__container" class="provider-container"></div>
<form class="button-container button-cancel-container button-gateway-container">
<button data-jcs-element="cancel__journey" class="button button--secondary-destructive button-full-xs" aria-label="Button Title">
{{CANCEL_JOURNEY}}
</button>
<button data-jcs-element="gateway__upload__toggle" class="button button--tertiary button--worker" aria-label="Button Title">
<div data-jcs-element="gateway__upload__toggle__upload__label">
{{MANUAL_PHOTO_UPLOAD_TOGGLE_FALSE}}
</div>
<div data-jcs-element="gateway__upload__toggle__camera__label">
{{MANUAL_PHOTO_UPLOAD_TOGGLE_TRUE}}
</div>
</button>
</form>
Elements
| Name | Purpose | Required |
| gateway__upload__toggle | Allows the user to choose to use the camera instead of file upload | No |
| gateway__upload__toggle__upload__label | Contains helpful text for the upload toggle selector | No |
| gateway__upload__toggle__camera__label | Contains helpful text for the camera toggle selector | No |
| provider__container | Used as the position to write providers to the DOM | Yes |
| cancel__journey | Cancel the current journey | 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
<div class="dark-inner-provider-container">
<div>
<form class="camera-options--container">
<select data-jcs-element="camera__select"
class="camera-choices camera-choices-half-s camera-choices-full-xs control control--select"></select>
</form>
<div class="camera-viewfinder--container" data-fullscreen="false">
<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"
style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
<div data-jcs-element="animation__viewfinder" class="camera-viewfinder"
style="position: absolute; left: 0; top: 0; z-index: 1; display: none; align-items: flex-end; justify-content: center;">
<div style="display: flex; align-items: center;">
<div class="animation-container" data-jcs-element="animation__container">
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 56 56" fill="none">
<rect x="2" y="2" width="52" height="52" rx="13" fill="#111111" fill-opacity="0.8" stroke="white"
stroke-width="4" />
<ellipse cx="16.3333" cy="19.9452" rx="2.33333" ry="2.30137" fill="white" />
<ellipse cx="40.4447" cy="19.9452" rx="2.33333" ry="2.30137" fill="white" />
<path d="M20.2222 37.5891C24.8888 40.274 33.4444 40.274 37.7222 37.5891" stroke="white" stroke-width="4" />
</svg>
</div>
<div class="liveness-actions-container">
<p data-jcs-element="animation__title">{{LIVENESS_ACTION_LOOK_STRAIGHT_TITLE}}</p>
<p data-jcs-element="animation__text">{{LIVENESS_ACTION_LOOK_STRAIGHT_TEXT}}</p>
</div>
</div>
</div>
<div data-jcs-element="liveness__start__button__container__overlay" class="camera-viewfinder--overlay"></div>
<div data-jcs-element="liveness__start__button__container__button" class="camera-viewfinder--overlay--transparent">
<p class="camera-viewfinder--overlay-text">
<button data-jcs-element="retina__start" class="button button--primary camera-button">{{LIVENESS_START}}</button>
</p>
</div>
</div>
</div>
</div>
<form class="button-container button-cancel-container">
<button data-jcs-element="cancel__journey" class="button button--secondary-destructive button-full-xs"
aria-label="Button Title">
{{CANCEL_JOURNEY}}
</button>
</form> Elements
| Name | Purpose | Required |
| camera__select | Displays the select element for picking the camera to use | No |
| camera__viewfinder | Displays the camera viewfinder | Yes |
| animation__viewfinder | Displays the animation step guidance overlay | No |
| animation__container | Container within the overlay to hold the animation | No |
| animation__title | Animation hint title | No |
| animation__text | Animation hint description | No |
| liveness__start__button__container__overlay | Overlay position in top of image viewfinder before starting capturing | No |
| liveness__start__button__container__button | Container to hold over the camera viewfinder the retina start button | No |
| retina__start | Starts the retina service capturing images | Yes |
| cancel__journey | Cancel the current journey | No |
Templates.PassiveLiveness
This template is used to take the user through the passive liveness checking process
Configuration
| Key | Value |
| Type | TemplateType.String |
| Processor | PreProcessor.Mustache |
Default Provider
<div data-jcs-element="provider__container" class="provider-container" style="display: none;"></div>
<div class="dark-inner-provider-container" data-jcs-element="passive__liveness__step__container">
<div>
<form class="camera-options--container">
<select data-jcs-element="camera__select"
class="camera-choices camera-choices-half-s camera-choices-full-xs control control--select"></select>
</form>
<div class="help-container">
<div class="camera-viewfinder--container" data-fullscreen="false">
<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder"></canvas>
<div data-jcs-element="overlay_viewfinder" class="camera-viewfinder--overlay--transparent">
<div class="loading-animation-container" data-jcs-element="loading-animation" style="display:none">
</div>
</div>
</div>
<div class="camera-capture--caption">
{{CAMERA_CAPTURE_SELFIE_CAPTION}}
</div>
<div class="help-inner-container" data-jcs-element="mobile__help__container" style="display: none;">
<div class="preview-info-mobile-button">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__fm">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="mobile__close__help">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_CLOSE}}</p>
</div>
</div>
</div>
<div class="help-inner-container" data-jcs-element="desktop__help__container" style="display: none;">
<h2>{{HELP_MODAL_SELFIE_TITLE}}</h2>
<p>{{HELP_MODAL_SELFIE_SUBTITLE}}</p>
<div class="preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</li>
</ul>
</div>
</div>
</div>
<div class="actions-container">
<div data-jcs-element="camera__manual__capture__spacer" class="item">
</div>
<form class="manual-capture-button-container item">
<div class="camera-capture--container">
<input data-jcs-element="camera__capture" class="camera-capture--button" type="button" />
</div>
</form>
<div class="item show-mobile">
<div class="help-button-container show-mobile" data-jcs-element="mobile__open__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 7C11.0445 7 10 7.68564 10 9C10 9.55228 9.55229 10 9 10C8.44771 10 8 9.55228 8 9C8 6.31436 10.227 5 12 5C14.2091 5 16 6.79086 16 9C16 10.8638 14.7252 12.4299 13 12.874V12.8746V12.8787V12.8827V12.8868V12.8909V12.895V12.8991V12.9031V12.9072V12.9113V12.9153V12.9194V12.9234V12.9275V12.9315V12.9355V12.9396V12.9436V12.9476V12.9517V12.9557V12.9597V12.9637V12.9677V12.9717V12.9757V12.9796V12.9836V12.9876V12.9915V12.9955V12.9995V13.0034V13.0073V13.0113V13.0152V13.0191V13.023V13.0269V13.0308V13.0347V13.0386V13.0425V13.0463V13.0502V13.0541V13.0579V13.0617V13.0656V13.0694V13.0732V13.077V13.0808V13.0846V13.0884V13.0922V13.0959V13.0997V13.1034V13.1071V13.1109V13.1146V13.1183V13.122V13.1257V13.1294V13.133V13.1367V13.1403V13.144V13.1476V13.1512V13.1548V13.1584V13.162V13.1656V13.1691V13.1727V13.1762V13.1797V13.1832V13.1868V13.1902V13.1937V13.1972V13.2007V13.2041V13.2075V13.211V13.2144V13.2178V13.2211V13.2245V13.2279V13.2312V13.2345V13.2379V13.2412V13.2445V13.2477V13.251V13.2542V13.2575V13.2607V13.2639V13.2671V13.2703V13.2735V13.2766V13.2797V13.2829V13.286V13.2891V13.2921V13.2952V13.2983V13.3013V13.3043V13.3073V13.3103V13.3133V13.3162V13.3191V13.3221V13.325V13.3279V13.3307V13.3336V13.3364V13.3392V13.342V13.3448V13.3476V13.3504V13.3531V13.3558V13.3585V13.3612V13.3639V13.3665V13.3691V13.3718V13.3744V13.3769V13.3795V13.382V13.3845V13.387V13.3895V13.392V13.3944V13.3969V13.3993V13.4017V13.404V13.4064V13.4087V13.411V13.4133V13.4156V13.4178V13.42V13.4223V13.4244V13.4266V13.4288V13.4309V13.433V13.4351V13.4371V13.4392V13.4412V13.4432V13.4452V13.4471V13.4491V13.451V13.4529V13.4547V13.4566V13.4584V13.4602V13.462V13.4637V13.4655V13.4672V13.4689V13.4705V13.4722V13.4738V13.4754V13.477V13.4785V13.48V13.4815V13.483V13.4845V13.4859V13.4873V13.4887V13.49V13.4914V13.4927V13.494V13.4952V13.4965V13.4977V13.4988V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V13.4988V13.4977V13.4965V13.4952V13.494V13.4927V13.4914V13.49V13.4887V13.4873V13.4859V13.4845V13.483V13.4815V13.48V13.4785V13.477V13.4754V13.4738V13.4722V13.4705V13.4689V13.4672V13.4655V13.4637V13.462V13.4602V13.4584V13.4566V13.4547V13.4529V13.451V13.4491V13.4471V13.4452V13.4432V13.4412V13.4392V13.4371V13.4351V13.433V13.4309V13.4288V13.4266V13.4244V13.4223V13.42V13.4178V13.4156V13.4133V13.411V13.4087V13.4064V13.404V13.4017V13.3993V13.3969V13.3944V13.392V13.3895V13.387V13.3845V13.382V13.3795V13.3769V13.3744V13.3718V13.3691V13.3665V13.3639V13.3612V13.3585V13.3558V13.3531V13.3504V13.3476V13.3448V13.342V13.3392V13.3364V13.3336V13.3307V13.3279V13.325V13.3221V13.3191V13.3162V13.3133V13.3103V13.3073V13.3043V13.3013V13.2983V13.2952V13.2921V13.2891V13.286V13.2829V13.2797V13.2766V13.2735V13.2703V13.2671V13.2639V13.2607V13.2575V13.2542V13.251V13.2477V13.2445V13.2412V13.2379V13.2345V13.2312V13.2279V13.2245V13.2211V13.2178V13.2144V13.211V13.2075V13.2041V13.2007V13.1972V13.1937V13.1902V13.1868V13.1832V13.1797V13.1762V13.1727V13.1691V13.1656V13.162V13.1584V13.1548V13.1512V13.1476V13.144V13.1403V13.1367V13.133V13.1294V13.1257V13.122V13.1183V13.1146V13.1109V13.1071V13.1034V13.0997V13.0959V13.0922V13.0884V13.0846V13.0808V13.077V13.0732V13.0694V13.0656V13.0617V13.0579V13.0541V13.0502V13.0463V13.0425V13.0386V13.0347V13.0308V13.0269V13.023V13.0191V13.0152V13.0113V13.0073V13.0034V12.9995V12.9955V12.9915V12.9876V12.9836V12.9796V12.9757V12.9717V12.9677V12.9637V12.9597V12.9557V12.9517V12.9476V12.9436V12.9396V12.9355V12.9315V12.9275V12.9234V12.9194V12.9153V12.9113V12.9072V12.9031V12.8991V12.895V12.8909V12.8868V12.8827V12.8787V12.8746V12.8705V12.8664V12.8623V12.8582V12.8541V12.85V12.8459V12.8418V12.8376V12.8335V12.8294V12.8253V12.8212V12.8171V12.8129V12.8088V12.8047V12.8006V12.7964V12.7923V12.7882V12.784V12.7799V12.7758V12.7716V12.7675V12.7634V12.7592V12.7551V12.751V12.7469V12.7427V12.7386V12.7345V12.7303V12.7262V12.7221V12.718V12.7138V12.7097V12.7056V12.7015V12.6973V12.6932V12.6891V12.685V12.6809V12.6768V12.6727V12.6686V12.6645V12.6604V12.6563V12.6522V12.6481V12.644V12.6399V12.6358V12.6317V12.6277V12.6236V12.6195V12.6155V12.6114V12.6073V12.6033V12.5992V12.5952V12.5912V12.5871V12.5831V12.5791V12.575V12.571V12.567V12.563V12.559V12.555V12.551V12.547V12.5431V12.5391V12.5351V12.5312V12.5272V12.5233V12.5193V12.5154V12.5114V12.5075V12.5036V12.4997V12.4958V12.4919V12.488V12.4841V12.4803V12.4764V12.4725V12.4687V12.4648V12.461V12.4572V12.4534V12.4496V12.4458V12.442V12.4382V12.4344V12.4306V12.4269V12.4231V12.4194V12.4157V12.4119V12.4082V12.4045V12.4008V12.3971V12.3935V12.3898V12.3862V12.3825V12.3789V12.3753V12.3716V12.368V12.3645V12.3609V12.3573V12.3538V12.3502V12.3467V12.3432V12.3396V12.3361V12.3327V12.3292V12.3257V12.3223V12.3188V12.3154V12.312V12.3086V12.3052V12.3018V12.2984V12.2951V12.2917V12.2884V12.2851V12.2818V12.2785V12.2753V12.272V12.2687V12.2655V12.2623V12.2591V12.2559V12.2527V12.2496V12.2464V12.2433V12.2402V12.2371V12.234V12.2309V12.2279V12.2248V12.2218V12.2188V12.2158V12.2128V12.2099V12.2069V12.204V12.2011V12.1982V12.1953V12.1924V12.1896V12.1867V12.1839V12.1811V12.1784V12.1756V12.1728V12.1701V12.1674V12.1647V12.162V12.1594V12.1567V12.1541V12.1515V12.1489V12.1463V12.1438V12.1413V12.1388V12.1363V12.1338V12.1313V12.1289V12.1265V12.1241V12.1217V12.1193V12.117V12.1147V12.1124V12.1101V12.1078V12.1056V12.1034V12.1012V12.099V12.0968V12.0947V12.0926V12.0905V12.0884V12.0864V12.0843V12.0823V12.0803V12.0783V12.0764V12.0745V12.0726V12.0707V12.0688V12.067V12.0652V12.0634V12.0616V12.0599V12.0581V12.0564V12.0548V12.0531V12.0515V12.0499V12.0483V12.0467V12.0452V12.0437V12.0422V12.0407V12.0393V12.0378V12.0365V12.0351V12.0337V12.0324V12.0311V12.0298V12.0286V12.0274V12.0262V12.025V12.0239V12.0227V12.0216V12.0206V12.0195V12.0185V12.0175V12.0166V12.0156V12.0147V12.0138V12.013V12.0121V12.0113V12.0105V12.0098V12.0091V12.0084V12.0077V12.007V12.0064V12.0058V12.0053V12.0047V12.0042V12.0037V12.0033V12.0029V12.0025V12.0021V12.0018V12.0015V12.0012V12.0009V12.0007V12.0005V12.0004V12.0002V12.0001V12.0001V12L12 12H11C11 11.4477 11.4477 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7ZM12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z"
fill="white" />
</svg>
<p class="action-caption">{{HELP_MODAL_NEED_HELP}}</p>
</div>
</div>
<div class="item show-desktop">
<div class="help-button-container show-desktop" data-jcs-element="desktop__close__help" style="display: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke="white" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke="white" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_CLOSE}}</p>
</div>
<div class="help-button-container show-desktop" data-jcs-element="desktop__open__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 7C11.0445 7 10 7.68564 10 9C10 9.55228 9.55229 10 9 10C8.44771 10 8 9.55228 8 9C8 6.31436 10.227 5 12 5C14.2091 5 16 6.79086 16 9C16 10.8638 14.7252 12.4299 13 12.874V12.8746V12.8787V12.8827V12.8868V12.8909V12.895V12.8991V12.9031V12.9072V12.9113V12.9153V12.9194V12.9234V12.9275V12.9315V12.9355V12.9396V12.9436V12.9476V12.9517V12.9557V12.9597V12.9637V12.9677V12.9717V12.9757V12.9796V12.9836V12.9876V12.9915V12.9955V12.9995V13.0034V13.0073V13.0113V13.0152V13.0191V13.023V13.0269V13.0308V13.0347V13.0386V13.0425V13.0463V13.0502V13.0541V13.0579V13.0617V13.0656V13.0694V13.0732V13.077V13.0808V13.0846V13.0884V13.0922V13.0959V13.0997V13.1034V13.1071V13.1109V13.1146V13.1183V13.122V13.1257V13.1294V13.133V13.1367V13.1403V13.144V13.1476V13.1512V13.1548V13.1584V13.162V13.1656V13.1691V13.1727V13.1762V13.1797V13.1832V13.1868V13.1902V13.1937V13.1972V13.2007V13.2041V13.2075V13.211V13.2144V13.2178V13.2211V13.2245V13.2279V13.2312V13.2345V13.2379V13.2412V13.2445V13.2477V13.251V13.2542V13.2575V13.2607V13.2639V13.2671V13.2703V13.2735V13.2766V13.2797V13.2829V13.286V13.2891V13.2921V13.2952V13.2983V13.3013V13.3043V13.3073V13.3103V13.3133V13.3162V13.3191V13.3221V13.325V13.3279V13.3307V13.3336V13.3364V13.3392V13.342V13.3448V13.3476V13.3504V13.3531V13.3558V13.3585V13.3612V13.3639V13.3665V13.3691V13.3718V13.3744V13.3769V13.3795V13.382V13.3845V13.387V13.3895V13.392V13.3944V13.3969V13.3993V13.4017V13.404V13.4064V13.4087V13.411V13.4133V13.4156V13.4178V13.42V13.4223V13.4244V13.4266V13.4288V13.4309V13.433V13.4351V13.4371V13.4392V13.4412V13.4432V13.4452V13.4471V13.4491V13.451V13.4529V13.4547V13.4566V13.4584V13.4602V13.462V13.4637V13.4655V13.4672V13.4689V13.4705V13.4722V13.4738V13.4754V13.477V13.4785V13.48V13.4815V13.483V13.4845V13.4859V13.4873V13.4887V13.49V13.4914V13.4927V13.494V13.4952V13.4965V13.4977V13.4988V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V13.4988V13.4977V13.4965V13.4952V13.494V13.4927V13.4914V13.49V13.4887V13.4873V13.4859V13.4845V13.483V13.4815V13.48V13.4785V13.477V13.4754V13.4738V13.4722V13.4705V13.4689V13.4672V13.4655V13.4637V13.462V13.4602V13.4584V13.4566V13.4547V13.4529V13.451V13.4491V13.4471V13.4452V13.4432V13.4412V13.4392V13.4371V13.4351V13.433V13.4309V13.4288V13.4266V13.4244V13.4223V13.42V13.4178V13.4156V13.4133V13.411V13.4087V13.4064V13.404V13.4017V13.3993V13.3969V13.3944V13.392V13.3895V13.387V13.3845V13.382V13.3795V13.3769V13.3744V13.3718V13.3691V13.3665V13.3639V13.3612V13.3585V13.3558V13.3531V13.3504V13.3476V13.3448V13.342V13.3392V13.3364V13.3336V13.3307V13.3279V13.325V13.3221V13.3191V13.3162V13.3133V13.3103V13.3073V13.3043V13.3013V13.2983V13.2952V13.2921V13.2891V13.286V13.2829V13.2797V13.2766V13.2735V13.2703V13.2671V13.2639V13.2607V13.2575V13.2542V13.251V13.2477V13.2445V13.2412V13.2379V13.2345V13.2312V13.2279V13.2245V13.2211V13.2178V13.2144V13.211V13.2075V13.2041V13.2007V13.1972V13.1937V13.1902V13.1868V13.1832V13.1797V13.1762V13.1727V13.1691V13.1656V13.162V13.1584V13.1548V13.1512V13.1476V13.144V13.1403V13.1367V13.133V13.1294V13.1257V13.122V13.1183V13.1146V13.1109V13.1071V13.1034V13.0997V13.0959V13.0922V13.0884V13.0846V13.0808V13.077V13.0732V13.0694V13.0656V13.0617V13.0579V13.0541V13.0502V13.0463V13.0425V13.0386V13.0347V13.0308V13.0269V13.023V13.0191V13.0152V13.0113V13.0073V13.0034V12.9995V12.9955V12.9915V12.9876V12.9836V12.9796V12.9757V12.9717V12.9677V12.9637V12.9597V12.9557V12.9517V12.9476V12.9436V12.9396V12.9355V12.9315V12.9275V12.9234V12.9194V12.9153V12.9113V12.9072V12.9031V12.8991V12.895V12.8909V12.8868V12.8827V12.8787V12.8746V12.8705V12.8664V12.8623V12.8582V12.8541V12.85V12.8459V12.8418V12.8376V12.8335V12.8294V12.8253V12.8212V12.8171V12.8129V12.8088V12.8047V12.8006V12.7964V12.7923V12.7882V12.784V12.7799V12.7758V12.7716V12.7675V12.7634V12.7592V12.7551V12.751V12.7469V12.7427V12.7386V12.7345V12.7303V12.7262V12.7221V12.718V12.7138V12.7097V12.7056V12.7015V12.6973V12.6932V12.6891V12.685V12.6809V12.6768V12.6727V12.6686V12.6645V12.6604V12.6563V12.6522V12.6481V12.644V12.6399V12.6358V12.6317V12.6277V12.6236V12.6195V12.6155V12.6114V12.6073V12.6033V12.5992V12.5952V12.5912V12.5871V12.5831V12.5791V12.575V12.571V12.567V12.563V12.559V12.555V12.551V12.547V12.5431V12.5391V12.5351V12.5312V12.5272V12.5233V12.5193V12.5154V12.5114V12.5075V12.5036V12.4997V12.4958V12.4919V12.488V12.4841V12.4803V12.4764V12.4725V12.4687V12.4648V12.461V12.4572V12.4534V12.4496V12.4458V12.442V12.4382V12.4344V12.4306V12.4269V12.4231V12.4194V12.4157V12.4119V12.4082V12.4045V12.4008V12.3971V12.3935V12.3898V12.3862V12.3825V12.3789V12.3753V12.3716V12.368V12.3645V12.3609V12.3573V12.3538V12.3502V12.3467V12.3432V12.3396V12.3361V12.3327V12.3292V12.3257V12.3223V12.3188V12.3154V12.312V12.3086V12.3052V12.3018V12.2984V12.2951V12.2917V12.2884V12.2851V12.2818V12.2785V12.2753V12.272V12.2687V12.2655V12.2623V12.2591V12.2559V12.2527V12.2496V12.2464V12.2433V12.2402V12.2371V12.234V12.2309V12.2279V12.2248V12.2218V12.2188V12.2158V12.2128V12.2099V12.2069V12.204V12.2011V12.1982V12.1953V12.1924V12.1896V12.1867V12.1839V12.1811V12.1784V12.1756V12.1728V12.1701V12.1674V12.1647V12.162V12.1594V12.1567V12.1541V12.1515V12.1489V12.1463V12.1438V12.1413V12.1388V12.1363V12.1338V12.1313V12.1289V12.1265V12.1241V12.1217V12.1193V12.117V12.1147V12.1124V12.1101V12.1078V12.1056V12.1034V12.1012V12.099V12.0968V12.0947V12.0926V12.0905V12.0884V12.0864V12.0843V12.0823V12.0803V12.0783V12.0764V12.0745V12.0726V12.0707V12.0688V12.067V12.0652V12.0634V12.0616V12.0599V12.0581V12.0564V12.0548V12.0531V12.0515V12.0499V12.0483V12.0467V12.0452V12.0437V12.0422V12.0407V12.0393V12.0378V12.0365V12.0351V12.0337V12.0324V12.0311V12.0298V12.0286V12.0274V12.0262V12.025V12.0239V12.0227V12.0216V12.0206V12.0195V12.0185V12.0175V12.0166V12.0156V12.0147V12.0138V12.013V12.0121V12.0113V12.0105V12.0098V12.0091V12.0084V12.0077V12.007V12.0064V12.0058V12.0053V12.0047V12.0042V12.0037V12.0033V12.0029V12.0025V12.0021V12.0018V12.0015V12.0012V12.0009V12.0007V12.0005V12.0004V12.0002V12.0001V12.0001V12L12 12H11C11 11.4477 11.4477 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7ZM12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z"
fill="white" />
</svg>
<p class="action-caption">{{HELP_MODAL_NEED_HELP}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="notification notification-orange" data-jcs-element="passive__liveness__message__container" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.9212 13.5664L7.99878 1.70494L1.99909 13.5664H13.9212ZM15.3721 13.1144L9.18082 0.71445C8.95064 0.27521 8.49571 0 7.99982 0C7.50392 0 7.04899 0.27521 6.81882 0.71445L0.546752 13.1144C0.33024 13.5277 0.345567 14.0242 0.587162 14.4234C0.828758 14.8226 1.26147 15.0665 1.72808 15.0664H14.1908C14.6574 15.0665 15.0901 14.8226 15.3317 14.4234C15.5733 14.0242 15.5886 13.5277 15.3721 13.1144ZM7.99976 4.75C8.41397 4.75 8.74976 5.08579 8.74976 5.5V9.5C8.74976 9.91421 8.41397 10.25 7.99976 10.25C7.58554 10.25 7.24976 9.91421 7.24976 9.5V5.5C7.24976 5.08579 7.58554 4.75 7.99976 4.75ZM7.99976 13C8.55204 13 8.99976 12.5523 8.99976 12C8.99976 11.4477 8.55204 11 7.99976 11C7.44747 11 6.99976 11.4477 6.99976 12C6.99976 12.5523 7.44747 13 7.99976 13Z"
fill="#F88618" />
</svg>
<div>
<p data-jcs-element="passive__liveness__message__title" style="font-weight: bold;"></p>
<p data-jcs-element="passive__liveness__message"></p>
</div>
</div>
<form class="button-container button-cancel-container">
<button data-jcs-element="cancel__journey" class="button button--secondary-destructive button-full-xs"
aria-label="Button Title">
{{CANCEL_JOURNEY}}
</button>
</form> Elements
| Name | Purpose | Required |
| provider__container | Used as the position to write the preview provider to the DOM | Yes |
| passive__liveness__step__container | Used as the container to hold the passive liveness capturing view | Yes |
| camera__select | Displays the select element for picking the camera to use | No |
| camera__viewfinder | Displays the camera viewfinder | Yes |
| overlay_viewfinder | Container to overlay the camera viewfinder | No |
| loading-animation | Container to hold the loading animation | No |
| mobile__help__container | Container to hold the mobile help modal | No |
| preview__info__container__fm | Container to hold the mobile help modal guidance instructions | No |
| mobile__close__help | Container to hold the close help modal for mobile | No |
| desktop__help__container | Container to hold the desktop help modal | No |
| camera__capture | Button to capture the passive liveness image | No |
| mobile__open__help | Container to hold the open help modal for mobile | No |
| desktop__close__help | Container to hold the close help modal for desktop | No |
| desktop__open__help | Container to hold the open help modal for desktop | No |
| passive__liveness__message__container | Container to hold the liveness errors | No |
| passive__liveness__message__title | Container to hold the liveness error title | No |
| passive__liveness__message | Container to hold the liveness error description | No |
| 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
<div data-jcs-element="identity__document__file__upload">
<div class="preview-title-container">
<h2>{{PROVIDER_TITLE_SCANNER}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_SCANNER_ID}}</span>
</div>
<div>
<h3>{{FILESYSTEM_IDENTITY_DOCUMENT}} - <span data-jcs-element="info__journey__action"></h3>
</div>
</div>
<div class="scanner-container" data-jcs-element="scanner__container">
<div class="scanner-inner-container">
<div class="scanner-feedback-container">
<div class="scanner-loading-container" data-jcs-element="image__processing">
</div>
<div class="scanner-animation-container" data-jcs-element="scanner__animation" style="display:none">
</div>
<div>
<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;margin-top:0px;margin-bottom:0px;" data-jcs-element="error__image">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.241 0.71445L20.0783 13.1144C20.3524 13.5277 20.333 14.0242 20.0272 14.4234C19.7213 14.8226 19.1736 15.0665 18.5829 15.0664H2.80676C2.21608 15.0665 1.66833 14.8226 1.3625 14.4234C1.05667 14.0242 1.03727 13.5277 1.31134 13.1144L9.25098 0.71445C9.54236 0.27521 10.1182 0 10.746 0C11.3737 0 11.9496 0.27521 12.241 0.71445ZM9.90174 5.61532C9.90174 5.24713 10.2796 4.94865 10.7457 4.94865C11.2117 4.94865 11.5896 5.24713 11.5896 5.61532V9.61532C11.5896 9.98351 11.2117 10.282 10.7457 10.282C10.2796 10.282 9.90174 9.98351 9.90174 9.61532V5.61532ZM10.7884 13.2887H10.7648C10.0732 13.2869 9.50657 12.8546 9.48032 12.3087C9.46804 12.0447 9.59059 11.788 9.82041 11.5961C10.0502 11.4043 10.368 11.2935 10.7023 11.2887H10.7259C11.4174 11.2893 11.9849 11.7209 12.0121 12.2667C12.0253 12.5312 11.9029 12.7888 11.6726 12.9812C11.4423 13.1735 11.1235 13.2844 10.7884 13.2887Z" fill="#F88618"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="20.254" height="16" fill="white" transform="translate(0.619141)"/>
</clipPath>
</defs>
</svg>
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: none;margin-top:0px;margin-bottom:0px;" data-jcs-element="success__image">
<circle cx="8" cy="8" r="8" fill="#219C4C"/>
<path d="M11.8787 5.09131L7.03018 10.9095L4.12109 8.00039" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span data-jcs-element="scanner__box__title" class="scanner-title" style="display: none;">
{{SCANNER_TITLE_WAITING}}
</span>
</div>
</div>
<button class="button button--secondary" data-jcs-element="scanner__action">{{SCANNER_DESC_LOADING}}</button>
</div>
</div>
<div data-jcs-element="scanner__error" style="display: none;">
<p class="check-error-color" data-jcs-element="scanner__error__busy">{{SCANNER_DESC_BUSY}}</p>
<p class="check-error-color" data-jcs-element="scanner__error__offline">{{SCANNER_DESC_OFFLINE}}</p>
</div> Elements
| Name | Purpose | Required |
| info__journey__action | Displays the currently required action | No |
| scanner__container | Container to hold all the scanner content | No |
| image__processing | Container to hold loading animation while processing | No |
| scanner__animation | Container to hold scanner animation while scanning | No |
| error__image | Image to show along scanner__box__title if error state | No |
| success__image | Image to show along scanner__box__title if successful state | No |
| scanner__box__title | Displays top line text for the scanner status | No |
| scanner__action | Begin the currently displayed scanner action | No |
| scanner__error | Container to hold the scanner error messages | No |
| scanner__error__busy | Displays scanner error busy message | No |
| scanner__error__offline | Displays scanner offline busy message | 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
<div class="light-inner-provider-container">
<div>
<div data-jcs-element="identity__document__preview">
<div class="preview-title-container">
<h2 class="preview-title">{{PROVIDER_TITLE_VIEW_ID}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_VIEW_ID}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__id">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ID}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__id">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_ID}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/licence-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ID}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-angle.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ID}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ID}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error"
src="assets/images/licence-bad-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ID}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button"
data-jcs-element="preview__page__close__info__id">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ID}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/licence-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ID}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-angle.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ID}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ID}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/licence-bad-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ID}}</span>
</li>
</ul>
</div>
</div>
<div data-jcs-element="facematch__preview">
<div class="preview-title-container">
<h2>{{PROVIDER_TITLE_VIEW_FACEMATCH}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_VIEW_FACEMATCH}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__fm">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__fm">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="preview__page__close__info__fm">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_FACEMATCH}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/selfie-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-partial.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_FACEMATCH}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-glasses.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_FACEMATCH}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/selfie-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_FACEMATCH}}</span>
</li>
</ul>
</div>
</div>
<div data-jcs-element="address__preview">
<div class="preview-title-container">
<h2>{{PROVIDER_TITLE_VIEW_ADDRESS}}</h2>
<span class="preview-description">{{PROVIDER_SUBTITLE_VIEW_ADDRESS}}</span>
</div>
<div class="show-mobile">
<div class="preview-info-mobile-button" data-jcs-element="preview__page__open__info__poa">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
</div>
<div class="preview-info-inner-container" data-jcs-element="preview__info__container__poa">
<span class="preview-info-title">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
<div class="id-example-container">
<div class="id-example-container-row">
<div class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/address-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ADDRESS}}</span>
</div>
<div class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/address-angled.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ADDRESS}}</span>
</div>
</div>
<div class="id-example-container-row">
<div class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/address-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ADDRESS}}</span>
</div>
<div class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/address-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ADDRESS}}</span>
</div>
</div>
</div>
<div class="modal-close-button close-preview-info-button" data-jcs-element="preview__page__close__info__poa">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round" />
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
<div class="show-desktop preview-info-container">
<div class="preview-info-title">
<img class="preview-info-icon" src="assets/images/info-icon.svg" />
<span class="preview-info-main-text">{{PREVIEW_INFO_TITLE_ADDRESS}}</span>
</div>
<ul class="id-example-container">
<li class="id-example id-example-good">
<img class="sample-image sample-image-success" src="assets/images/address-good.svg" />
<div class="separating-rectangle separating-rectangle-success"></div>
<div class="preview-label preview-label-success">
<img class="preview-label-icon" src="assets/images/green-check-icon.svg" />
<span>{{PREVIEW_INFO_GOOD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_GOOD_EXAMPLE_ADDRESS}}</span>
</li>
<li class="id-example id-example-angle-check">
<img class="sample-image sample-image-error" src="assets/images/address-angled.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_ANGLE_ADDRESS}}</span>
</li>
<li class="id-example id-example-cover-check">
<img class="sample-image sample-image-error" src="assets/images/address-covered.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_COVER_ADDRESS}}</span>
</li>
<li class="id-example id-example-blur-check">
<img class="sample-image sample-image-error" src="assets/images/address-blurred.svg" />
<div class="separating-rectangle separating-rectangle-error"></div>
<div class="preview-label preview-label-error">
<img class="preview-label-icon" src="assets/images/red-x-icon.svg" />
<span>{{PREVIEW_INFO_BAD}}</span>
</div>
<span class="preview-info-example-text ">{{PREVIEW_INFO_BAD_EXAMPLE_BLUR_ADDRESS}}</span>
</li>
</ul>
</div>
</div>
<div class="image-preview--container image-preview-container">
<img data-jcs-element="view__preview" class="image-preview">
<div data-jcs-element="overlay_viewfinder" class="camera-viewfinder--overlay--transparent">
<div class="loading-animation-container" data-jcs-element="loading-animation">
</div>
</div>
</div>
<div class="notification notification-blue" data-jcs-element="attempt__count__container">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25H8.00081C12.2787 0.254627 15.7454 3.72135 15.75 7.99919L15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM7.99958 1.75C4.54799 1.75023 1.75 4.54836 1.75 8C1.75 11.4518 4.54822 14.25 8 14.25C11.4515 14.25 14.2496 11.4522 14.25 8.00081C14.2463 4.55026 11.4501 1.75394 7.99958 1.75ZM8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55229 3 9 3.44772 9 4C9 4.55228 8.55229 5 8 5ZM7 6.25C6.58579 6.25 6.25 6.58579 6.25 7C6.25 7.41421 6.58579 7.75 7 7.75H7.25V11.25H6.5C6.08579 11.25 5.75 11.5858 5.75 12C5.75 12.4142 6.08579 12.75 6.5 12.75H8H9.5C9.91421 12.75 10.25 12.4142 10.25 12C10.25 11.5858 9.91421 11.25 9.5 11.25H8.75V7C8.75 6.58579 8.41421 6.25 8 6.25H7Z"
fill="#4A88C6" />
</svg>
<p>{{PREVIEW_ATTEMPT_NUMBER_START}}<span
data-jcs-element="attempt__counter"></span>{{PREVIEW_ATTEMPT_NUMBER_END}}</p>
</div>
<div class="button-container button-actions-container">
<button data-jcs-element="view__retry" class="button button--secondary button-full-xs"
aria-label="{{VIEW_RETRY}}">
{{VIEW_RETRY}}
</button>
<button data-jcs-element="view__upload" class="button button--primary button-full-xs"
aria-label="{{VIEW_UPLOAD}}">
{{VIEW_UPLOAD}}
</button>
</div>
<div data-jcs-element="view__status">
<p data-jcs-element="view__status__message"></p>
</div>
</div>
</div> Elements
| Name | Purpose | Required |
| identity__document__preview | Contains most of the elements in the upper part of the preview page for document step | No |
| preview__page__open__info__id | Displays the main title text for mobile for document step | No |
| preview__info__container__id | Displays the main title text for desktop for document step | No |
| preview__page__close__info__id | Displays the ‘close’ button for mobile help modal for document step | No |
| facematch__preview | Contains most of the elements in the upper part of the preview page for facematch step | No |
| preview__page__open__info__fm | Displays the main title text for mobile for facematch step | No |
| preview__info__container__fm | Displays the main title text for desktop for facematch step | No |
| preview__page__close__info__fm | Displays the ‘close’ button for mobile help modal for facematch step | No |
| preview__page__open__info__poa | Displays the ‘open’ button for mobile help modal for PoA step | No |
| preview__info__container__poa | Displays the main title text for desktop for PoA step | No |
| preview__page__close__info__poa | Displays the ‘close’ button for mobile help modal for PoA step | No |
| view__preview | Displays the captured image | Yes |
| overlay_viewfinder | Displays an overlay above the preview with the loading animation | No |
| loading-animation | Displays the loading animation | No |
| attempt__count__container | Contains the information related to triple scan attempt counting | No |
| attempt__counter | Displays the remaining capture attempts to the user | No |
| view__retry | Retry the capture | Yes |
| 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
<div class="dark-inner-provider-container">
<div>
<form class="camera-options--container">
<select data-jcs-element="camera__select" class="camera-choices camera-choices-half-s camera-choices-full-xs control control--select"></select>
</form>
<div class="help-container">
<div class="camera-viewfinder--container">
<div data-jcs-element="camera__viewfinder__inner__container" class="camera-viewfinder--inner-container" style="position: relative;">
<canvas data-jcs-element="camera__viewfinder" class="camera-viewfinder" style="position: relative; left: 0; top: 0; z-index: 0;"></canvas>
<div data-jcs-element="animation__viewfinder" class="camera-viewfinder" style="position: absolute; left: 0; top: 0; z-index: 1;"></div>
<div data-jcs-element="overlay_viewfinder" class="camera-viewfinder--overlay"></div>
<div data-jcs-element="overlay_viewfinder" class="camera-viewfinder--overlay--transparent">
<p class="camera-viewfinder--overlay-text">
<button data-jcs-element="camera__capture" class="button button--primary camera-button">{{CAMERA_CAPTURE_START_BUTTON}}</button>
</p>
</div>
<svg class="canvas-overlay" data-jcs-element="canvas__condition__error" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="22" fill="white" stroke="#D87212" stroke-width="4" stroke-linecap="round"/>
<path d="M24 14V26M24 34V33.8972" stroke="#D87212" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
<div class="uploading--container">
<span data-jcs-element="camera__condition__uploading" class="camera-condition camera-condition--uploading">{{CAMERA_CONDITION_UPLOADING}}</span>
</div>
<div data-jcs-element="camera__conditions" class="camera-conditions--container">
<div class="camera-conditions--container-list show-desktop">
<div data-jcs-element="camera__condition__glare" class="camera-conditions--container-list-item camera-condition--glare">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.65385 0C6.84323 0 7.01636 0.107001 7.10106 0.276393L13.2549 12.5841C13.3324 12.7391 13.3241 12.9231 13.233 13.0706C13.1419 13.218 12.981 13.3077 12.8077 13.3077H0.500001C0.326712 13.3077 0.165778 13.218 0.0746751 13.0706C-0.0164282 12.9231 -0.0247102 12.7391 0.0527869 12.5841L6.20663 0.276393C6.29133 0.107001 6.46446 0 6.65385 0ZM11.9987 12.3077L6.65385 1.61803L1.30902 12.3077H11.9987ZM6.65403 4.92308C6.93018 4.92308 7.15403 5.14693 7.15403 5.42308V7.88461C7.15403 8.16076 6.93018 8.38461 6.65403 8.38461C6.37789 8.38461 6.15403 8.16076 6.15403 7.88461V5.42308C6.15403 5.14693 6.37789 4.92308 6.65403 4.92308ZM6.65381 10.9615C6.99368 10.9615 7.26919 10.686 7.26919 10.3462C7.26919 10.0063 6.99368 9.73077 6.65381 9.73077C6.31394 9.73077 6.03842 10.0063 6.03842 10.3462C6.03842 10.686 6.31394 10.9615 6.65381 10.9615Z" fill="#F88618"/>
</svg>
<span>
{{CAMERA_CONDITION_GLARE}}
</span>
</div>
<div data-jcs-element="camera__condition__blur" class="camera-conditions--container-list-item camera-condition--blur">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.65385 0C6.84323 0 7.01636 0.107001 7.10106 0.276393L13.2549 12.5841C13.3324 12.7391 13.3241 12.9231 13.233 13.0706C13.1419 13.218 12.981 13.3077 12.8077 13.3077H0.500001C0.326712 13.3077 0.165778 13.218 0.0746751 13.0706C-0.0164282 12.9231 -0.0247102 12.7391 0.0527869 12.5841L6.20663 0.276393C6.29133 0.107001 6.46446 0 6.65385 0ZM11.9987 12.3077L6.65385 1.61803L1.30902 12.3077H11.9987ZM6.65403 4.92308C6.93018 4.92308 7.15403 5.14693 7.15403 5.42308V7.88461C7.15403 8.16076 6.93018 8.38461 6.65403 8.38461C6.37789 8.38461 6.15403 8.16076 6.15403 7.88461V5.42308C6.15403 5.14693 6.37789 4.92308 6.65403 4.92308ZM6.65381 10.9615C6.99368 10.9615 7.26919 10.686 7.26919 10.3462C7.26919 10.0063 6.99368 9.73077 6.65381 9.73077C6.31394 9.73077 6.03842 10.0063 6.03842 10.3462C6.03842 10.686 6.31394 10.9615 6.65381 10.9615Z" fill="#F88618"/>
</svg>
<span>
{{CAMERA_CONDITION_BLUR}}
</span>
</div>
<div data-jcs-element="camera__condition__low__resolution" class="camera-conditions--container-list-item camera-condition--low-resolution">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.65385 0C6.84323 0 7.01636 0.107001 7.10106 0.276393L13.2549 12.5841C13.3324 12.7391 13.3241 12.9231 13.233 13.0706C13.1419 13.218 12.981 13.3077 12.8077 13.3077H0.500001C0.326712 13.3077 0.165778 13.218 0.0746751 13.0706C-0.0164282 12.9231 -0.0247102 12.7391 0.0527869 12.5841L6.20663 0.276393C6.29133 0.107001 6.46446 0 6.65385 0ZM11.9987 12.3077L6.65385 1.61803L1.30902 12.3077H11.9987ZM6.65403 4.92308C6.93018 4.92308 7.15403 5.14693 7.15403 5.42308V7.88461C7.15403 8.16076 6.93018 8.38461 6.65403 8.38461C6.37789 8.38461 6.15403 8.16076 6.15403 7.88461V5.42308C6.15403 5.14693 6.37789 4.92308 6.65403 4.92308ZM6.65381 10.9615C6.99368 10.9615 7.26919 10.686 7.26919 10.3462C7.26919 10.0063 6.99368 9.73077 6.65381 9.73077C6.31394 9.73077 6.03842 10.0063 6.03842 10.3462C6.03842 10.686 6.31394 10.9615 6.65381 10.9615Z" fill="#F88618"/>
</svg>
<span>
{{CAMERA_CONDITION_LOW_RESOLUTION}}
</span>
</div>
<div data-jcs-element="camera__condition__alignment" class="camera-conditions--container-list-item camera-condition--alignment">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.65385 0C6.84323 0 7.01636 0.107001 7.10106 0.276393L13.2549 12.5841C13.3324 12.7391 13.3241 12.9231 13.233 13.0706C13.1419 13.218 12.981 13.3077 12.8077 13.3077H0.500001C0.326712 13.3077 0.165778 13.218 0.0746751 13.0706C-0.0164282 12.9231 -0.0247102 12.7391 0.0527869 12.5841L6.20663 0.276393C6.29133 0.107001 6.46446 0 6.65385 0ZM11.9987 12.3077L6.65385 1.61803L1.30902 12.3077H11.9987ZM6.65403 4.92308C6.93018 4.92308 7.15403 5.14693 7.15403 5.42308V7.88461C7.15403 8.16076 6.93018 8.38461 6.65403 8.38461C6.37789 8.38461 6.15403 8.16076 6.15403 7.88461V5.42308C6.15403 5.14693 6.37789 4.92308 6.65403 4.92308ZM6.65381 10.9615C6.99368 10.9615 7.26919 10.686 7.26919 10.3462C7.26919 10.0063 6.99368 9.73077 6.65381 9.73077C6.31394 9.73077 6.03842 10.0063 6.03842 10.3462C6.03842 10.686 6.31394 10.9615 6.65381 10.9615Z" fill="#F88618"/>
</svg>
<span>
{{CAMERA_CONDITION_ALIGNMENT}}
</span>
</div>
</div>
<div class="camera-conditions--container-detail" data-jcs-element="camera__condition__detail">
<div class="camera-conditions--container-detail-animation" data-jcs-element="camera__condition__detail__animation">
</div>
<div class="camera-conditions--container-detail-description">
<div class="camera-conditions--container-detail-description-title">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C11.3788 0 11.725 0.214002 11.8944 0.552786L21.8944 20.5528C22.0494 20.8628 22.0329 21.2309 21.8507 21.5257C21.6684 21.8205 21.3466 22 21 22H1C0.653423 22 0.331557 21.8205 0.14935 21.5257C-0.0328564 21.2309 -0.0494204 20.8628 0.105574 20.5528L10.1056 0.552786C10.275 0.214002 10.6212 0 11 0ZM19.382 20L11 3.23607L2.61804 20H19.382ZM11 8C11.5523 8 12 8.44771 12 9V13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13V9C10 8.44771 10.4477 8 11 8ZM11 18C11.5523 18 12 17.5523 12 17C12 16.4477 11.5523 16 11 16C10.4477 16 10 16.4477 10 17C10 17.5523 10.4477 18 11 18Z" fill="#F88618"/>
</svg>
<span class="camera-conditions--container-detail-description-title-text" data-jcs-element="camera__condition__detail__description__title">
</span>
</div>
<div class="camera-conditions--container-detail-description-hint" data-jcs-element="camera__condition__detail__description__hint">
</div>
</div>
</div>
</div>
<div data-jcs-element="info__journey__action__container" class="camera-capture--caption">
<p data-jcs-element="info__journey__action__text"></p>
</div>
<div>
</div>
<form class="button-camera-container button-container" data-jcs-element="camera__capture__hint">
<p class="camera-capture--caption">
{{CAMERA_CAPTURE_CAPTION}}
</p>
</form>
<div class="help-inner-container" data-jcs-element="capture__help__container">
<h2>{{HELP_MODAL_AUTOCAPTURE_TITLE}}</h2>
<p>{{HELP_MODAL_AUTOCAPTURE_SUBTITLE}}</p>
<b>{{HELP_MODAL_AUTOCAPTURE_TIPS}}</b>
<div class="help-images-container">
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="modal__glare__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_GLARE_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_GLARE_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="modal__low__res__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_FAR_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_FAR_SUBTITLE}}</p>
</div>
</div>
<div class="help-image-inner-container">
<div class="help-image" data-jcs-element="modal__blur__animation__container"></div>
<div class="help-text">
<b>{{HELP_MODAL_AUTOCAPTURE_BLUR_TITLE}}</b>
<p>{{HELP_MODAL_AUTOCAPTURE_BLUR_SUBTITLE}}</p>
</div>
</div>
</div>
<div class="modal-footer modal-bottom modal-actions-container">
<p data-jcs-element="capture__modal__manual__capture__text">{{HELP_MODAL_AUTOCAPTURE_MANUAL_CAPTURE}}</p>
<div class="actions-container">
<div class="help-button-container" data-jcs-element="capture__modal__camera__manual__capture">
<label class="control control--switch manual--mode--switch" aria-label="switch">
<input type="checkbox" data-jcs-element="capture__modal__camera__manual__capture__check" />
<div class="control__switch control__switch__blue">
<div class="icon ico-checkmark-16 control__switchIcon text-black">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon ico-checkmark-16 control__switchIcon text-black"><path d="M13 4L6 12L3 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
</div>
</label>
<p class="action-caption">{{HELP_MODAL_AUTOCAPTURE_TURN_MANUAL_CAPTURE}}</p>
</div>
<div class="spacer">
</div>
<div class="help-button-container" data-jcs-element="smart__capture__modal__close__help">
<svg width="24" height="24" class="help-button-modal-close" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke-width="2" stroke-linecap="round"/>
<path d="M16 16L8 8M8 16L16 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
</div>
</div>
</div>
<div class="notification notification-blue" data-jcs-element="attempt__count__container">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.25 8C0.25 3.71979 3.71979 0.25 8 0.25H8.00081C12.2787 0.254627 15.7454 3.72135 15.75 7.99919L15.75 8C15.75 12.2802 12.2802 15.75 8 15.75C3.71979 15.75 0.25 12.2802 0.25 8ZM7.99958 1.75C4.54799 1.75023 1.75 4.54836 1.75 8C1.75 11.4518 4.54822 14.25 8 14.25C11.4515 14.25 14.2496 11.4522 14.25 8.00081C14.2463 4.55026 11.4501 1.75394 7.99958 1.75ZM8 5C7.44772 5 7 4.55228 7 4C7 3.44772 7.44772 3 8 3C8.55229 3 9 3.44772 9 4C9 4.55228 8.55229 5 8 5ZM7 6.25C6.58579 6.25 6.25 6.58579 6.25 7C6.25 7.41421 6.58579 7.75 7 7.75H7.25V11.25H6.5C6.08579 11.25 5.75 11.5858 5.75 12C5.75 12.4142 6.08579 12.75 6.5 12.75H8H9.5C9.91421 12.75 10.25 12.4142 10.25 12C10.25 11.5858 9.91421 11.25 9.5 11.25H8.75V7C8.75 6.58579 8.41421 6.25 8 6.25H7Z" fill="#4A88C6"/>
</svg>
<p>{{PREVIEW_ATTEMPT_NUMBER_START}}<span data-jcs-element="attempt__counter"></span>{{PREVIEW_ATTEMPT_NUMBER_END}}</p>
</div>
</div>
<div class="actions-container">
<div data-jcs-element="camera__manual__capture">
<label class="control control--switch manual--mode--switch" aria-label="switch">
<input type="checkbox" data-jcs-element="camera__manual__capture__check" />
<div class="control__switch">
<div class="icon ico-checkmark-16 control__switchIcon text-black">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon ico-checkmark-16 control__switchIcon text-black"><path d="M13 4L6 12L3 9" stroke="rgb(0, 13, 26)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
</div>
</div>
</label>
<p class="action-caption">{{HELP_MODAL_AUTOCAPTURE_TURN_MANUAL_CAPTURE}}</p>
</div>
<div class="spacer">
</div>
<div>
<div class="help-button-container" data-jcs-element="smart__capture__close__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="11" stroke="white" stroke-width="2" stroke-linecap="round"/>
<path d="M16 16L8 8M8 16L16 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p class="action-caption">{{REQUIRED_ACTION_Close}}</p>
</div>
<div class="help-button-container" data-jcs-element="smart__capture__open__help">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12ZM12 7C11.0445 7 10 7.68564 10 9C10 9.55228 9.55229 10 9 10C8.44771 10 8 9.55228 8 9C8 6.31436 10.227 5 12 5C14.2091 5 16 6.79086 16 9C16 10.8638 14.7252 12.4299 13 12.874V12.8746V12.8787V12.8827V12.8868V12.8909V12.895V12.8991V12.9031V12.9072V12.9113V12.9153V12.9194V12.9234V12.9275V12.9315V12.9355V12.9396V12.9436V12.9476V12.9517V12.9557V12.9597V12.9637V12.9677V12.9717V12.9757V12.9796V12.9836V12.9876V12.9915V12.9955V12.9995V13.0034V13.0073V13.0113V13.0152V13.0191V13.023V13.0269V13.0308V13.0347V13.0386V13.0425V13.0463V13.0502V13.0541V13.0579V13.0617V13.0656V13.0694V13.0732V13.077V13.0808V13.0846V13.0884V13.0922V13.0959V13.0997V13.1034V13.1071V13.1109V13.1146V13.1183V13.122V13.1257V13.1294V13.133V13.1367V13.1403V13.144V13.1476V13.1512V13.1548V13.1584V13.162V13.1656V13.1691V13.1727V13.1762V13.1797V13.1832V13.1868V13.1902V13.1937V13.1972V13.2007V13.2041V13.2075V13.211V13.2144V13.2178V13.2211V13.2245V13.2279V13.2312V13.2345V13.2379V13.2412V13.2445V13.2477V13.251V13.2542V13.2575V13.2607V13.2639V13.2671V13.2703V13.2735V13.2766V13.2797V13.2829V13.286V13.2891V13.2921V13.2952V13.2983V13.3013V13.3043V13.3073V13.3103V13.3133V13.3162V13.3191V13.3221V13.325V13.3279V13.3307V13.3336V13.3364V13.3392V13.342V13.3448V13.3476V13.3504V13.3531V13.3558V13.3585V13.3612V13.3639V13.3665V13.3691V13.3718V13.3744V13.3769V13.3795V13.382V13.3845V13.387V13.3895V13.392V13.3944V13.3969V13.3993V13.4017V13.404V13.4064V13.4087V13.411V13.4133V13.4156V13.4178V13.42V13.4223V13.4244V13.4266V13.4288V13.4309V13.433V13.4351V13.4371V13.4392V13.4412V13.4432V13.4452V13.4471V13.4491V13.451V13.4529V13.4547V13.4566V13.4584V13.4602V13.462V13.4637V13.4655V13.4672V13.4689V13.4705V13.4722V13.4738V13.4754V13.477V13.4785V13.48V13.4815V13.483V13.4845V13.4859V13.4873V13.4887V13.49V13.4914V13.4927V13.494V13.4952V13.4965V13.4977V13.4988V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V13.4988V13.4977V13.4965V13.4952V13.494V13.4927V13.4914V13.49V13.4887V13.4873V13.4859V13.4845V13.483V13.4815V13.48V13.4785V13.477V13.4754V13.4738V13.4722V13.4705V13.4689V13.4672V13.4655V13.4637V13.462V13.4602V13.4584V13.4566V13.4547V13.4529V13.451V13.4491V13.4471V13.4452V13.4432V13.4412V13.4392V13.4371V13.4351V13.433V13.4309V13.4288V13.4266V13.4244V13.4223V13.42V13.4178V13.4156V13.4133V13.411V13.4087V13.4064V13.404V13.4017V13.3993V13.3969V13.3944V13.392V13.3895V13.387V13.3845V13.382V13.3795V13.3769V13.3744V13.3718V13.3691V13.3665V13.3639V13.3612V13.3585V13.3558V13.3531V13.3504V13.3476V13.3448V13.342V13.3392V13.3364V13.3336V13.3307V13.3279V13.325V13.3221V13.3191V13.3162V13.3133V13.3103V13.3073V13.3043V13.3013V13.2983V13.2952V13.2921V13.2891V13.286V13.2829V13.2797V13.2766V13.2735V13.2703V13.2671V13.2639V13.2607V13.2575V13.2542V13.251V13.2477V13.2445V13.2412V13.2379V13.2345V13.2312V13.2279V13.2245V13.2211V13.2178V13.2144V13.211V13.2075V13.2041V13.2007V13.1972V13.1937V13.1902V13.1868V13.1832V13.1797V13.1762V13.1727V13.1691V13.1656V13.162V13.1584V13.1548V13.1512V13.1476V13.144V13.1403V13.1367V13.133V13.1294V13.1257V13.122V13.1183V13.1146V13.1109V13.1071V13.1034V13.0997V13.0959V13.0922V13.0884V13.0846V13.0808V13.077V13.0732V13.0694V13.0656V13.0617V13.0579V13.0541V13.0502V13.0463V13.0425V13.0386V13.0347V13.0308V13.0269V13.023V13.0191V13.0152V13.0113V13.0073V13.0034V12.9995V12.9955V12.9915V12.9876V12.9836V12.9796V12.9757V12.9717V12.9677V12.9637V12.9597V12.9557V12.9517V12.9476V12.9436V12.9396V12.9355V12.9315V12.9275V12.9234V12.9194V12.9153V12.9113V12.9072V12.9031V12.8991V12.895V12.8909V12.8868V12.8827V12.8787V12.8746V12.8705V12.8664V12.8623V12.8582V12.8541V12.85V12.8459V12.8418V12.8376V12.8335V12.8294V12.8253V12.8212V12.8171V12.8129V12.8088V12.8047V12.8006V12.7964V12.7923V12.7882V12.784V12.7799V12.7758V12.7716V12.7675V12.7634V12.7592V12.7551V12.751V12.7469V12.7427V12.7386V12.7345V12.7303V12.7262V12.7221V12.718V12.7138V12.7097V12.7056V12.7015V12.6973V12.6932V12.6891V12.685V12.6809V12.6768V12.6727V12.6686V12.6645V12.6604V12.6563V12.6522V12.6481V12.644V12.6399V12.6358V12.6317V12.6277V12.6236V12.6195V12.6155V12.6114V12.6073V12.6033V12.5992V12.5952V12.5912V12.5871V12.5831V12.5791V12.575V12.571V12.567V12.563V12.559V12.555V12.551V12.547V12.5431V12.5391V12.5351V12.5312V12.5272V12.5233V12.5193V12.5154V12.5114V12.5075V12.5036V12.4997V12.4958V12.4919V12.488V12.4841V12.4803V12.4764V12.4725V12.4687V12.4648V12.461V12.4572V12.4534V12.4496V12.4458V12.442V12.4382V12.4344V12.4306V12.4269V12.4231V12.4194V12.4157V12.4119V12.4082V12.4045V12.4008V12.3971V12.3935V12.3898V12.3862V12.3825V12.3789V12.3753V12.3716V12.368V12.3645V12.3609V12.3573V12.3538V12.3502V12.3467V12.3432V12.3396V12.3361V12.3327V12.3292V12.3257V12.3223V12.3188V12.3154V12.312V12.3086V12.3052V12.3018V12.2984V12.2951V12.2917V12.2884V12.2851V12.2818V12.2785V12.2753V12.272V12.2687V12.2655V12.2623V12.2591V12.2559V12.2527V12.2496V12.2464V12.2433V12.2402V12.2371V12.234V12.2309V12.2279V12.2248V12.2218V12.2188V12.2158V12.2128V12.2099V12.2069V12.204V12.2011V12.1982V12.1953V12.1924V12.1896V12.1867V12.1839V12.1811V12.1784V12.1756V12.1728V12.1701V12.1674V12.1647V12.162V12.1594V12.1567V12.1541V12.1515V12.1489V12.1463V12.1438V12.1413V12.1388V12.1363V12.1338V12.1313V12.1289V12.1265V12.1241V12.1217V12.1193V12.117V12.1147V12.1124V12.1101V12.1078V12.1056V12.1034V12.1012V12.099V12.0968V12.0947V12.0926V12.0905V12.0884V12.0864V12.0843V12.0823V12.0803V12.0783V12.0764V12.0745V12.0726V12.0707V12.0688V12.067V12.0652V12.0634V12.0616V12.0599V12.0581V12.0564V12.0548V12.0531V12.0515V12.0499V12.0483V12.0467V12.0452V12.0437V12.0422V12.0407V12.0393V12.0378V12.0365V12.0351V12.0337V12.0324V12.0311V12.0298V12.0286V12.0274V12.0262V12.025V12.0239V12.0227V12.0216V12.0206V12.0195V12.0185V12.0175V12.0166V12.0156V12.0147V12.0138V12.013V12.0121V12.0113V12.0105V12.0098V12.0091V12.0084V12.0077V12.007V12.0064V12.0058V12.0053V12.0047V12.0042V12.0037V12.0033V12.0029V12.0025V12.0021V12.0018V12.0015V12.0012V12.0009V12.0007V12.0005V12.0004V12.0002V12.0001V12.0001V12L12 12H11C11 11.4477 11.4477 11 12 11C13.1046 11 14 10.1046 14 9C14 7.89543 13.1046 7 12 7ZM12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477 16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z" fill="white"/>
</svg>
<p class="action-caption">{{HELP_MODAL_NEED_HELP}}</p>
</div>
</div>
</div>
</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 |
| info__journey__action__container | Contains the instructions for the current step | No |
| info__journey__action__text | Displays the text of the instructions for the current step | 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__viewfinder__inner__container | Contains all the elements of the viewfinder animations | Yes |
| overlay_viewfinder | Displays an overlay on top of the camera viewfinder to cover it when required | Yes |
| loading-animation | Displays an overlay on top of the camera viewfinder to show the loading icon when required | No |
| camera__conditions | Contains the overlays for camera condition alerts | No |
| 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__condition__detail | Contains the information regarding the current camera condition | No |
| camera__condition__detail__animation | Contains the animation corresponding to the camera condition | No |
| camera__condition__detail__description__title | Contains the title corresponding to the current camera condition | No |
| camera__condition__detail__description__hint | Contains the hint corresponding to the current camera condition | No |
| camera__condition__uploading | Displays uploading animation | No |
| camera__capture | Begin automatic capture process | Yes |
| camera__capture__hint | Displays guidance to the user about the capture process | Yes |
| camera__manual__capture | Contains the manual capture toggle and label | Yes |
| camera__manual__capture__check | Displays the manual capture toggle | Yes |
| smart__capture__close__help | Displays the ‘close’ button for smart capture help modal | Yes |
| smart__capture__open__help | Displays the ‘open’ button for smart capture help modal | Yes |
| canvas__condition__error | Displays an error icon over the viewfinder whenever there are quality checks | No |
| capture__help__container | ||
| capture__modal__manual__capture__text | Displays assistance text suggesting the use of manual capture | |
| capture__modal__camera__manual__capture | Contains the manual capture toggle and label for the help modal | No |
| capture__modal__camera__manual__capture__check | Displays the manual capture toggle within the help modal | No |
| modal__glare__animation__container | Displays the glare check animation | No |
| modal__low__res__animation__container | Displays the low-resolution check animation | No |
| modal__blur__animation__container | Displays the blur check animation | No |
| smart__capture__modal__close__help | Displays the ‘close’ button for the manual capture help modal | No |
| attempt__count__container | Contains the information related to triple scan attempt counting | Yes |
| attempt__counter | Displays the remaining capture attempts to the user | 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 |
Animations
For the animations mentioned in the default templates above, the animation framework lottie has been used, available at lottie.js.
import * as lottie from 'lottie-web/build/player/lottie';
lottiePlayer.loadAnimation({
renderer: 'svg',
container: htmlContainer,
loop,
autoplay,
path: animationPath,
rendererSettings: settings
}).play(); The settings above indicate which kind of renderer is used to display the animation in the provided container using the json lottie animation file indicated.
To update the animation, the json file can be modified or replaced. If it uses the same name, no update will be needed in the templates nor providers.