Setup Configuration Components¶
This section presents the different customizable parameters of the XpressID.
Loading¶
The loading screen is the same throughout the onboarding process, therefore, when changing its configuration, it will be changed in all the loading screens that appear throughout the entire process.
| Number | Parameter | Default Value |
|---|---|---|
| 1 | logo.media logo.show |
- false |
| 2 | backgroundColor | #000D44 |
| 3 | text textColor |
We are processing your information, please wait #FFFFFF |
| 4 | progressIndicator.backgroundColor progressIndicator.color |
#FFFFFF #00051A |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"loading": {
"text": "text",
"backgroundColor": "#C0C0C0",
"textColor": "#0000FF",
"progressIndicator": {
"backgroundColor": "#000000",
"color": "#FFFF00"
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
}
QR¶
| Number | Parameter | Default Value (EN/ES) | |
|---|---|---|---|
| 1 | logo.media logo.show |
- false |
|
| 2 | backgroundColor | #FFFFFF | |
| 3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
| 4 | buttons.close.show | false | |
| 5 | title.text title.textColor |
We need to verify your identity #00051A |
Necesitamos verificar tu identidad #00051A |
| 6 | subtitle.text subtitle.textColor |
For a seamless experience, we recommend that you complete the process from your mobile phone You can do this by scanning the QR code below #00051A |
Para que la experiencia sea perfecta, te recomendamos que realices el proceso desde tu móvil. Puedes hacerlo escaneando el código QR que se muestra a continuación. #00051A |
| 7 | buttons.continue.backgroundColor buttons.continue.textColor buttons.continue.borderColor buttons.continue.states.hover.backgroundColor buttons.continue.states.hover.textColor buttons.continue.states.hover.borderColor buttons.continue.states.active.backgroundColor buttons.continue.states.active.textColor buttons.continue.states.active.borderColor buttons.continue.text buttons.continue.show |
#FFFFFF #000D44 #000D44 #ee686a #00051A #000D44 #FFFFFF #000D44 #000D44 Continue on desktop true |
- - - - - - - - - Continuar en el navegador true |
| 8 | modal.show | true | |
| 9 | modal.captured.title modal.cancelled.title modal.error.title modal.completed.title |
Info Info Error Success |
Informacíon Información Error Éxito |
| 10 | modal.captured.message modal.cancelled.message modal.error.message modal.completed.message |
Process ongoing from your mobile device The process has been cancelled from your mobile device An error occurred while performing the process from your mobile device, unable to continue. The process has successfully completed from your mobile device |
Proceso en curso desde su dispositivo móvil El proceso se ha cancelado desde su dispositivo móvil Ha ocurrido un error mientras realizaba el proceso desde su dispositivo móvil, no se puede continuar El proceso ha finalizado satisfactoriamente desde su dispositivo móvil |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"qr"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
},
"qr": {
"redirectionUrl": "https://veridas.fakeURL.com/?fakeKey.1=fakeValue.1&fakeKey.2=fakeValue.2",
"setup": {
"logo": {
"show": true
},
"backgroundColor": "#C0C0C0",
"title": {
"text": "title",
"textColor": "#000080"
},
"subtitle": {
"text": "subtitle",
"textColor": "#0000FF"
},
"buttons": {
"continue": {
"text": "continue text",
"backgroundColor": "#FFFF00",
"textColor": "#000000",
"borderColor": "#000000",
"states": {
"hover": {
"backgroundColor": "#800080",
"textColor": "#FFFFFF",
"borderColor": "#FFFFFF"
},
"active": {
"backgroundColor": "#FF0000",
"textColor": "#008080",
"borderColor": "#008080"
}
}
}
},
"modal": {
"captured": {
"title": "modal.captured.title",
"message": "modal.captured.message"
},
"cancelled": {
"title": "modal.cancelled.title",
"message": "modal.cancelled.message"
},
"error": {
"title": "modal.error.title",
"message": "modal.error.message"
},
"completed": {
"title": "modal.completed.title",
"message": "modal.completed.message"
}
}
}
}
}
}
}
Document¶
Autoclassification selector¶
| Number | Parameter | Default Value (EN/ES) | |
|---|---|---|---|
| 1 | logo.media logo.show |
- false |
|
| 2 | backgroundColor | #FFFFFF | |
| 3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
| 4 | buttons.close.show | false | |
| 5 | title.text title.textColor |
Choose one of these options #00051A |
Elige una de estas opciones |
| 6 | optionChooser.buttons.idDocument.text | ID documents | Docs. de identificación |
| 7 | optionChooser.buttons.idDocument.secondaryText | IDS, driver’s license, residence... | IDS, carnet de conducir, residencia... |
| 8 | optionChooser.buttons.iconColor optionChooser.buttons.states.active.iconColor |
#000D44 #FFFFFF |
|
| 9 | optionChooser.buttons.passport.text | Passport | Pasaporte |
| 10 | optionChooser.buttons.backgroundColor optionChooser.buttons.textColor optionChooser.buttons.secondaryTextColor optionChooser.buttons.borderColor optionChooser.buttons.states.active.backgroundColor optionChooser.buttons.states.hover.borderColor |
#FFFFFF #00051A #737999 #000D44 #000D44 #000D44 |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES_IDCard_2015",
"XX_Passport_YYYY"
],
"autoclassificationSelector": {
"setup": {
"backgroundColor": "#FFFFFF",
"title": {
"text": "Choose one of these options",
"textColor": "#00051A"
},
"logo": {
"show": true
},
"containerBox": {
"borderColor": "#000D44",
"show": true
},
"buttons": {
"close": {
"show": true
}
},
"optionChooser": {
"buttons": {
"backgroundColor": "#FFFFFF",
"textColor": "#00051A",
"secondaryTextColor": "#737999",
"borderColor": "#000D44",
"states": {
"active": {
"backgroundColor": "#FFFFFF",
"iconColor": "#000d44"
},
"hover": {
"borderColor": "#000D44"
}
},
"idDocument": {
"text": "ID Documents",
"secondaryText": "IDS, driver’s license, residence..."
},
"passport": {
"text": "Passport"
}
}
}
}
}
}
]
}
}
}
}
Document & country selector¶
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | logo.media logo.show |
- false |
|
| 2 | backgroundColor | #FFFFFF | |
| 3 | containerBox.show containerBox.borderColor |
true #000D44 |
|
| 4 | buttons.close.show | false | |
| 5 | title.text title.textColor |
Choose your document’s country & document type #00051A |
Elige tu país y tipo de documento #00051A |
| 6 | countryChooser.title.text countryChooser.title.textColor |
What country does your document belong to? #00051A |
¿A qué país pertenece tu documento? #00051A |
| 7 | countryChooser.picker.backgroundColor countryChooser.picker.textColor countryChooser.picker.borderColor countryChooser.picker.states.hover.borderColor countryChooser.defaultCountry geolocation |
#FFFFFF #000D44 #000D44 #ee686a ES true |
#FFFFFF #000D44 #000D44 #ee686a ES true |
| 8 | documentChooser.title.text documentChooser.title.textColor |
What kind of ID is it? #00051A |
¿Qué tipo de ID es? #00051A |
| 9 | documentChooser.buttons.backgroundColor documentChooser.buttons.textColor documentChooser.buttons.borderColor documentChooser.buttons.states.active.backgroundColor documentChooser.buttons.states.hover.borderColor |
#FFFFFF #00051A #000D44 #000D44 #EE686A true |
#FFFFFF #00051A #000D44 #000D44 #EE686A true |
| 10 | documentChooser.buttons.idCard.text documentChooser.buttons.drivingLicense.text documentChooser.buttons.healthCard.text documentChooser.buttons.professionalCard.text documentChooser.buttons.passport.text documentChooser.buttons.others.text documentChooser.buttons.cartaceo.text documentChooser.buttons.fm3.text documentChooser.buttons.anyCard.text documentChooser.buttons.pinkPaper.text documentChooser.buttons.cercu.text |
ID card Driver’s license Health card Professional card Passport Other documents Cartaceo ID card FM3 (residence permit) Any Identification Pink Paper Driving License (paper) Green Paper (CERCU) |
Documento de identidad Licencia de conducir Tarjeta sanitaria Cédula profesional Pasaporte Otros documentos Cartaceo de identidad (papel) FM3 (permiso de residencia) Docs. de identificación Carnet Rosa en papel Permiso verde (CERCU) |
| 11 | documentChooser.buttons.iconColor documentChooser.buttons.states.active.iconColor |
#000D44 #FFFFFF |
|
| 12 | countryChooser.picker.searchPlaceholder.text | Search… | Buscar… |
| 13 | countryChooser.picker.dropdown.states.hover.backgroundColor documentSelector.countryChooser.picker.dropdown.states.hover.textColor |
#E6E7ED #000D44 |
|
| 14 | countryChooser.picker.dropdown.states.selected.backgroundColor documentSelector.countryChooser.picker.dropdown.states.selected.textColor |
#E6E7ED #000D44 |
|
| 15 | countryChooser.picker.dropdown.states.active.backgroundColor documentSelector.countryChooser.picker.dropdown.states.active.textColor |
#000D44 #FEFEFD |
|
| 16 | singleCountryTitle.text documentSelector.singleCountryTitle.textColor |
Choose the document type #00051A |
Elija el tipo de documento #00051A |
| 17 | countryChooser.singleCountrySelectorTitle.text documentSelector.countryChooser.singleCountrySelectorTitle.textColor |
Only documents from {{ country }} are accepted #00051A |
Solamente se admiten documentos de {{ country }} #00051A |
- Example:
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"SelectedByUser"
],
"documentSelector": {
"setup": {
"backgroundColor": "#1ca515",
"logo": {
"show": true
},
"title": {
"text": "title.text1",
"textColor": "#FFFFFF"
},
"containerBox": {
"borderColor": "#1ca515",
"show": true
},
"buttons": {
"close": {
"show": true
}
},
"countryChooser": {
"title": {
"text": "title.text",
"textColor": "#92f70a"
},
"picker": {
"backgroundColor": "#0a4bf7",
"textColor": "#f70acc",
"borderColor": "#f7400a",
"states": {
"hover": {
"borderColor": "#f0f70a"
}
},
"picker": {
"searchPlaceholder": {
"text": "picker.searchPlaceholder.text"
}
},
"dropdown": {
"states": {
"hover": {
"backgroundColor": "#FF5733",
"textColor": "#6BFF33"
},
"active": {
"backgroundColor": "#3361FF",
"textColor": "#FC33FF"
},
"selected": {
"backgroundColor": "#0a4bf7",
"textColor": "#FC33FF"
}
}
}
}
},
"documentChooser": {
"title": {
"text": "title.text",
"textColor": "#0af7f0"
},
"buttons": {
"backgroundColor": "#000000",
"iconColor": "#0af718",
"textColor": "#748575",
"borderColor": "#FFFFFF",
"states": {
"active": {
"backgroundColor": "#FFFFFF",
"iconColor": "#000D44"
},
"hover": {
"borderColor": "#000000"
}
},
"idCard": {
"text": "idCard"
},
"drivingLicense": {
"text": "drivingLicense"
},
"healthCard": {
"text": "healthCard"
},
"professionalCard": {
"text": "professionalCard"
},
"passport": {
"text": "passport"
},
"others": {
"text": "others"
},
"cartaceo": {
"text": "cartaceo"
},
"fm3": {
"text": "fm3"
},
"anyCard": {
"text": "anyCard"
},
"pinkPaper": {
"text": "pinkPaper"
},
"cercu": {
"text": "cercu"
}
}
},
"geolocation": false
}
}
}
]
}
}
}
}
Document Capture¶
Theme¶
The UI can be configured under a theme. Properties for configuring document capture can be found here: Document theme.
Instructions¶
The instructional screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkDocument.views.instructions.active. By default, this parameter is true.
In the event that a document with only an obverse side is captured, only that side instructions will be displayed. However, if a document with both obverse and reverse sides is captured, two screens with the relevant capture instructions will be displayed, one for each side capture.
Obverse¶
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkDocument.views.instructions.card.title.documents | [ Capture the front of your document, ] |
[ Capture la parte delantera de su documento, ] |
| 3 | sdkDocument.views.instructions.card.subtitle.documents | [ Frame your document within the grid and the capture will be done automatically, ] |
[ Encuadre su documento en el rectángulo y la captura se realizará de forma automática, ] |
| 4 | sdkDocument.views.instructions.card.media.documents | [ /images/document1.svg, /images/document2.svg, ] |
|
| 5 | sdkDocument.views.instructions.buttons.startProcess.text | Start | Comenzar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkDocument": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"documents": [
"card.title.documents"
],
"documentsBack": [
"card.title.documentsBack"
]
},
"subtitle": {
"documents": [
"card.subtitle.documents"
],
"documentsBack": [
"card.subtitle.documentsBack"
]
},
"media": {
"documents": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
]
}
}
}
}
Reverse¶
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkDocument.views.instructions.card.title.documentsBack | [ Rotate your document and capture the back part, ] |
[ Gire su documento y capture la parte trasera, ] |
| 3 | sdkDocument.views.instructions.card.media.documentsBack | [ /images/document-back.svg, /images/document-back.svg, ] |
|
| 4 | sdkDocument.views.instructions.buttons.startProcess.text | Start | Comenzar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkDocument": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"documents": [
"card.title.documents"
],
"documentsBack": [
"card.title.documentsBack"
]
},
"subtitle": {
"documents": [
"card.subtitle.documents"
],
"documentsBack": [
"card.subtitle.documentsBack"
]
},
"media": {
"documents": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
],
"documentsBack": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
]
}
}
}
}
Capture¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkDocument.views.capture.guidance.preCapture.obverse.card.header sdkDocument.views.capture.guidance.preCapture.reverse.card.header |
FRONT of the document BACK of the document |
PARTE DELANTERA PARTE TRASERA |
| 4 | sdkDocument.views.capture.guidance.preCapture.obverse.card.title sdkDocument.views.capture.guidance.preCapture.reverse.card.title |
Place the document in the rectangle | Coloque el documento en el rectángulo |
| 5 | sdkDocument.views.capture.guidance.preCapture.obverse.card.short sdkDocument.views.capture.guidance.preCapture.reverse.card.short sdkDocument.views.capture.manualCapture.obverse.card.title sdkDocument.views.capture.manualCapture.reverse.card.title sdkDocument.views.capture.manualCapture.buttons.captureButton.media |
Fit the BACK side of the document Fit the FRONT part of the document Tap the screen to capture Tap the screen to capture /images/icon-capture.png |
Encaje la parte TRASERA del documento Encaje la parte DELANTERA del documento Toque la pantalla para capturar Toque la pantalla para capturar /images/icon-capture.png |
| 6 | sdkDocument.views.capture.centered.obverse.card.media sdkDocument.views.capture.centered.reverse.card.media |
/images/icon-ok.png | |
| 7 | sdkDocument.views.capture.centered.obverse.card.title sdkDocument.views.capture.centered.reverse.card.title |
Stay steady | Manténgase estable |
| 8 | sdkDocument.views.capture.tooFar.obverse.card.title sdkDocument.views.capture.tooFar.reverse.card.title sdkDocument.views.capture.tooClose.obverse.card.title sdkDocument.views.capture.tooClose.reverse.card.title sdkDocument.views.capture.notCentered.obverse.card.title sdkDocument.views.capture.notCentered.reverse.card.title |
Bring the document closer Bring the document closer Move the document away Move the document away Center the document Center the document |
Acerque el documento Acerque el documento Aleje el documento Aleje el documento Centre el documento Centre el documento |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkDocument.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 300000 ms Max is 300000, min 60000. |
| sdkDocument.views.capture.manualCapture.manualCaptureButtonDelay | Duration in milliseconds after which the capture allows manual capture by touch or click the screen. | 20000 ms Min is 1500 |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkDocument": {
"views": {
"capture": {
"manualCapture": {
"obverse": {
"card": {
"title": "capture.manualCapture.obverse.card.title"
}
},
"reverse": {
"card": {
"title": "capture.manualCapture.reverse.card.title"
}
}
},
"guidance": {
"preCapture": {
"obverse": {
"card": {
"title": "capture.guidance.obverse.card.title",
"short": "capture.guidance.obverse.card.short"
}
},
"reverse": {
"card": {
"title": "capture.guidance.reverse.card.title",
"short": "capture.guidance.reverse.card.short"
}
}
}
},
"centered": {
"obverse": {
"card": {
"title": "capture.centered.obverse.card.title",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
},
"reverse": {
"card": {
"title": "capture.centered.reverse.card.title",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
}
}
}
}
}
]
}
}
}
}
Success¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | sdkDocument.views.capture.success.obverse.card.title sdkDocument.views.capture.success.reverse.card.title |
Front part captured correctly Back part captured correctly |
Parte delantera capturada correctamente Parte trasera capturada correctamente |
| 3 | sdkDocument.views.capture.successTick.show | true |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkDocument": {
"views": {
"capture": {
"successTick": {
"show": true
},
"success": {
"obverse": {
"card": {
"title": "capture.success.obverse.card.title"
}
},
"reverse": {
"card": {
"title": "capture.success.reverse.card.title"
}
}
}
}
}
}
}
}
]
}
}
}
}
Review Image¶
The review image screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkDocument.views.reviewImage.active. By default, this parameter is false.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkDocument.views.reviewImage.card.title | Make sure there are no glares, that the data isn't covered, and that it's read correctly | Asegúrese de que no hay brillos, de que los datos no están tapados y se leen correctamente |
| 3 | sdkDocument.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
| 4 | sdkDocument.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
],
"setup": {
"generic": {
"common": {
"ui": {
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkDocument": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.title",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
]
}
}
}
}
Selfie¶
Theme¶
The UI can be configured under a theme. Properties for configuring selfie capture can be found here: Selfie theme.
Passive Capture¶
Instructions¶
The instructional modal screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.instructions.active. By default, this parameter is true.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkSelfie.views.instructions.card.title.selfie | [ Position yourself in front of the camera, ] |
[ Posiciónese frente a la cámara, ] |
| 3 | sdkSelfie.views.instructions.card.subtitle.selfie | [ Make sure you are not wearing sunglasses, hats, or other items that cover your face, ] |
[ Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara, ] |
| 4 | sdkSelfie.views.instructions.card.media.selfie | [ /images/alive01.png, /images/alive02.png, ] |
|
| 5 | sdkSelfie.views.instructions.buttons.startProcess.text | Start | Comenzar |
| 6 | sdkSelfie.views.instructions.card.buttons.previous.media sdkSelfie.views.instructions.card.buttons.previous.text |
/images/arrow-left.svg Previous |
Anterior |
| 7 | sdkSelfie.views.instructions.progressIndicator.show | true | |
| 8 | sdkSelfie.views.instructions.card.buttons.next.media sdkSelfie.views.instructions.card.buttons.next.text |
/images/arrow-right.svg Next |
Siguiente |
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkSelfie": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"selfie": [
"card.title.selfie"
]
},
"subtitle": {
"selfie": [
"card.subtitle.selfie"
]
},
"media": {
"selfie": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
]
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Capture¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkSelfie.views.capture.guidance.selfie.card.title | Fit your face into the frame and look to the camera | Centre su cara en el marco, y mire hacia la cámara |
| 4 | sdkSelfie.views.capture.guidance.tooFar.card.title sdkSelfie.views.capture.guidance.tooClose.card.title sdkSelfie.views.capture.guidance.centered.card.title |
Get closer Move away Stay still and do not smile |
Acérquese Aléjese Manténgase estable y no sonría |
| 5 | sdkSelfie.views.capture.guidance.selfie.card.header | Follow the instructions | Siga las instrucciones |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkSelfie.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 300000 ms Max is 300000, min 60000. |
| sdkSelfie.views.capture.selectCamera | Selection of the camera with which you want to take the capture. There are two camera configurations, the rear or front of the mobile. Only available in passive capture | "back" or "front" |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkSelfie": {
"views": {
"capture": {
"guidance": {
"tooFar": {
"card": {
"title": "feedback.tooFar.card.title"
}
},
"tooClose": {
"card": {
"title": "feedback.tooClose.card.title"
}
},
"selfie": {
"card": {
"title": "selfie.card.title",
"header": "selfie.card.header"
}
}
}
}
}
}
}
}
}
}
}
Success¶
| Number | Parameter | Default value |
|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
| 3 | sdkSelfie.views.capture.successTick.show | true |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"sdkSelfie": {
"views": {
"capture": {
"successTick": {
"show": true
}
}
}
},
"generic": {
"common": {
"ui": {
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
}
}
}
}
}
}
Review Image¶
The review image screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.reviewImage.active. By default, this parameter is false.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkSelfie.views.reviewImage.card.title | Make sure the face appears good and has a natural expression | Asegúrese de que la cara se ve bien y tiene una expresión natural |
| 3 | sdkSelfie.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
| 4 | sdkSelfie.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkSelfie": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.title",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
}
}
}
Active Capture¶
Instructions¶
The instructional modal screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.instructions.active. By default, this parameter is true.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkSelfie.views.instructions.card.title.head | [ Position yourself in front of the camera, Follow the instructions, ] |
[ Posiciónese frente a la cámara, Siga las instrucciones, ] |
| 3 | sdkSelfie.views.instructions.card.subtitle.head | [ Make sure you are not wearing sunglasses, hats, or other items that cover your face, Fit the face in the frame and move your head slightly in the directions indicated by the arrow., ] |
[ Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara, Encaje la cara en el marco y mueva la cabeza ligeramente en las direcciones que le vaya indicando la flecha, ] |
| 4 | sdkSelfie.views.instructions.card.media.head | [ /images/alive01.png, /images/alive02.png, /images/alive03.png, ] |
|
| 5 | sdkSelfie.views.instructions.buttons.startProcess.text | Start | Comenzar |
| 6 | sdkSelfie.views.instructions.card.buttons.previous.media sdkSelfie.views.instructions.card.buttons.previous.text |
/images/arrow-left.svg Previous |
Anterior |
| 7 | sdkSelfie.views.instructions.progressIndicator.show | true | |
| 8 | sdkSelfie.views.instructions.card.buttons.next.media sdkSelfie.views.instructions.card.buttons.next.text |
/images/arrow-right.svg Next |
Siguiente |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
},
"sdkSelfie": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"head": [
"card.title.head",
"card.title.head2"
]
},
"subtitle": {
"head": [
"card.subtitle.documents",
"card.subtitle.documents2"
]
},
"media": {
"head": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png",
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
]
},
"buttons": {
"next": {
"text": "card.buttons.next.text",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"previous": {
"text": "card.buttons.previous.text",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Capture Selfie¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkSelfie.views.capture.guidance.selfie.card.title | Fit your face into the frame and look to the camera | Centre su cara en el marco, y mire hacia la cámara |
| 4 | sdkSelfie.views.capture.guidance.tooFar.card.title sdkSelfie.views.capture.guidance.tooClose.card.title sdkSelfie.views.capture.guidance.centered.card.title |
Get closer Move away Stay still and do not smile |
Acérquese Aléjese Manténgase estable y no sonría |
| 5 | sdkSelfie.views.capture.guidance.selfie.card.header | Follow the instructions | Siga las instrucciones |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkSelfie.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 300000 ms Max is 300000, min 60000. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "passive",
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkSelfie": {
"views": {
"capture": {
"guidance": {
"tooFar": {
"card": {
"title": "feedback.tooFar.card.title"
}
},
"tooClose": {
"card": {
"title": "feedback.tooClose.card.title"
}
},
"selfie": {
"card": {
"title": "selfie.card.title",
"header": "selfie.card.header"
}
}
}
}
}
}
}
}
}
}
}
Capture Challenge¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkSelfie.views.capture.head.card.title.movement | Head movements | Movimientos de cabeza |
| 4 | sdkSelfie.views.capture.head.card.title.left sdkSelfie.views.capture.head.card.title.right sdkSelfie.views.capture.head.card.title.top sdkSelfie.views.capture.head.card.title.bottom sdkSelfie.views.capture.head.card.title.back |
Turn your head to the LEFT Turn your head to the RIGHT Turn your head to the TOP Turn your head to the BOTTOM Great! Look back to the CENTER |
Gire su cara hacía la IZQUIERDA Gire su cara hacía la DERECHA Gire su cara hacía ARRIBA Gire su cara hacía ABAJO ¡Bien! Vuelva a mirar al CENTRO |
| 5 | sdkSelfie.views.capture.head.arrows.arrowTop | /images/topArrow.svg | |
| 6 | sdkSelfie.views.capture.head.arrows.arrowRight | /images/rightArrow.svg | |
| 7 | sdkSelfie.views.capture.head.arrows.arrowBottom | /images/bottomArrow.svg | |
| 8 | sdkSelfie.views.capture.head.arrows.arrowLeft | /images/leftArrow.svg |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkSelfie.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 300000 ms Max is 300000, min 60000. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkSelfie": {
"views": {
"capture": {
"head": {
"token": "prueba",
"card": {
"title": {
"movement": "head.card.title.movement",
"left": "head.card.title.left",
"right": "head.card.title.right",
"top": "head.card.title.top",
"bottom": "head.card.title.bottom",
"back": "head.card.title.back"
},
"footer": "head.card.footer"
},
"arrows": {
"arrowTop": "/images/topArrow.svg",
"arrowBottom": "/images/bottomArrow.svg",
"arrowLeft": "/images/leftArrow.svg",
"arrowRight": "/images/rightArrow.svg"
}
}
}
}
}
}
}
}
}
}
Success¶
| Number | Parameter | Default value |
|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
| 3 | sdkSelfie.views.capture.successTick.show | true |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"sdkSelfie": {
"views": {
"capture": {
"successTick": {
"show": true
}
}
}
},
"generic": {
"common": {
"ui": {
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
}
}
}
}
}
}
}
}
}
Review Image¶
The review image screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkSelfie.views.reviewImage.active. By default, this parameter is false.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkSelfie.views.reviewImage.card.title | Make sure the face appears good and has a natural expression | Asegúrese de que la cara se ve bien y tiene una expresión natural |
| 3 | sdkSelfie.views.reviewImage.card.buttons.continue.text | Continue | Continuar |
| 4 | sdkSelfie.views.reviewImage.card.buttons.repeat.text | Repeat | Repetir |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkSelfie": {
"views": {
"reviewImage": {
"active": true,
"card": {
"title": "reviewImage.card.title",
"buttons": {
"continue": {
"text": "reviewImage.buttons.continue.text"
},
"repeat": {
"text": "reviewImage.buttons.repeat.text"
}
}
}
}
}
}
}
}
}
}
}
Video¶
Theme¶
The UI can be configured under a theme. Properties for configuring video capture can be found here: Video theme.
Instructions¶
The instructional modal screen is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: sdkVideo.views.instructions.active. By default, this parameter is true.
If you choose to display it, the configuration options are listed below:
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 2 | sdkVideo.views.instructions.card.title.video | [ Center your face and say your first and last name, Show your document to the camera on both sides, ] |
[ Centre su cara y diga su nombre y apellidos, Muestre su documento a cámara por ambos lados, ] |
| 3 | sdkVideo.views.instructions.card.subtitle.video | [ 1. Center your face within the frame and do not smile., 2. Say your first and last name out loud when prompted on screen, Show the document to the camera, first the front and then the back, as indicated on the screen, ] |
[ 1. Centre su cara en el marco, mire hacia la cámara y no sonría. , 2. Diga su nombre y apellidos en voz alta cuando se indique en pantalla, Muestre el documento a cámara, primero la parte delantera y luego la parte trasera, como se indica en pantalla, ] |
| 4 | sdkVideo.views.instructions.card.media.video | [ /images/video.jpg, /images/video1.jpg, ] |
|
| 5 | sdkVideo.views.instructions.card.buttons.previous.media sdkVideo.views.instructions.card.buttons.previous.text |
/images/arrow-left.svg Previous |
Anterior |
| 6 | sdkVideo.views.instructions.progressIndicator.show | true | |
| 7 | sdkVideo.views.instructions.card.buttons.next.media sdkVideo.views.instructions.card.buttons.next.text |
/images/arrow-right.svg Next |
Siguiente |
| 8 | sdkVideo.views.instructions.buttons.startProcess.text | Start | Comenzar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkVideo": {
"views": {
"instructions": {
"active": true,
"card": {
"title": {
"video": [
"card.title.vide1",
"card.title.video2"
]
},
"subtitle": {
"video": [
"card.subtitle.video1",
"card.subtitle.video2"
]
},
"buttons": {
"next": {
"text": "next.text",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
},
"previous": {
"text": "previous.text",
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
},
"media": {
"video": [
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png",
"https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
]
}
},
"progressIndicator": {
"show": false
},
"buttons": {
"startProcess": {
"text": "buttons.startProcess.text"
}
}
}
}
}
}
}
}
}
}
Face capture¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkVideo.views.capture.guidance.preCapture.selfie.card.title | Fit your face into the frame | Centre la cara en el marco |
| 4 | sdkVideo.views.capture.guidance.preCapture.selfie.card.header | Follow the instructions | Siga las instrucciones |
| 5 | sdkVideo.views.capture.guidance.nameAndSurname.card.title sdkVideo.views.capture.guidance.selfie.centered.card.title |
Say your first and last name out loud Stay still and do not smile |
Diga su nombre y apellidos en voz alta Manténgase estable y no sonría |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkVideo.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 120000 ms Max is 120000, min 60000. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkVideo": {
"views": {
"capture": {
"guidance": {
"nameAndSurname": {
"card": {
"title": "feedback.nameAndSurname.card.title"
}
},
"preCapture": {
"selfie": {
"card": {
"title": "feedback.selfie.card.title",
"header": "feedback.selfie.card.header"
}
}
}
}
}
}
}
}
}
}
}
}
Document capture¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkVideo.views.capture.guidance.preCapture.obverse.card.title sdkVideo.views.capture.guidance.preCapture.reverse.card.title |
Show the FRONT of the document to the FRONT CAMERA Show the BACK of the document to the FRONT CAMERA |
Muestre la parte DELANTERA del documento dentro del recuadro en la CÁMARA FRONTAL Muestre la parte TRASERA del documento dentro del recuadro en la CÁMARA FRONTAL |
| 4 | sdkVideo.views.capture.guidance.preCapture.obverse.card.short sdkVideo.views.capture.guidance.preCapture.reverse.card.short |
Fit the FRONT part of the document Fit the BACK part of the document |
Encaje la parte DELANTERA del documento Encaje la parte TRASERA del documento |
| 5 | sdkVideo.views.capture.guidance.obverse.card.header sdkVideo.views.capture.guidance.reverse.card.header |
Capture | Capture |
| 6 | sdkVideo.views.capture.centered.obverse.card.media sdkVideo.views.capture.centered.reverse.card.media |
/images/icon-ok.png | |
| 7 | sdkVideo.views.capture.centered.obverse.card.title sdkVideo.views.capture.centered.reverse.card.title sdkVideo.views.capture.notCentered.obverse.card.title sdkVideo.views.capture.notCentered.reverse.card.title |
Stay steady Stay steady Center the document Center the document |
Manténgase estable Centre el documento |
Additionally, there are some timing configuration parameters related to capture.
| Parameter | Description | Default Value |
|---|---|---|
| sdkVideo.views.capture.detectionTimeout | Duration in milliseconds after which the capture should stop recording and shut down. | 120000 ms Max is 120000, min 60000. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkVideo": {
"views": {
"capture": {
"guidance": {
"obverse": {
"card": {
"header": "obverse.card.header"
}
},
"reverse": {
"card": {
"header": "reverse.card.header"
}
},
"preCapture": {
"obverse": {
"card": {
"title": "preCapture.obverse.card.title",
"short": "preCapture.obverse.card.short"
}
},
"reverse": {
"card": {
"title": "preCapture.reverse.card.title",
"short": "preCapture.reverse.card.short"
}
}
}
},
"centered": {
"obverse": {
"card": {
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png",
"title": "centered.obverse.card.title"
}
},
"reverse": {
"card": {
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png",
"title": "centered.reverse.card.title"
}
}
}
}
}
}
}
}
}
}
}
Document capture success¶
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | sdkVideo.views.capture.success.obverse.card.title sdkVideo.views.capture.success.reverse.card.title |
Front part captured correctly Back part captured correctly |
Parte delantera capturada correctamente Parte trasera capturada correctamente |
| 3 | sdkVideo.views.capture.successTick.show | true |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"XX"
]
}
]
},
"video": {
"setup": {
"generic": {
"common": {
"ui": {
"buttons": {
"close": {
"show": true,
"media": "https://cdn2.iconfinder.com/data/icons/threads-by-instagram/24/x-logo-twitter-new-brand-contained-outline-48.png"
}
},
"logo": {
"show": true,
"media": "https://cloudfour.com/examples/img-currentsrc/images/kitten-large.png"
}
}
}
},
"sdkVideo": {
"views": {
"capture": {
"success": {
"obverse": {
"card": {
"title": "success.obverse.card.title"
}
},
"reverse": {
"card": {
"title": "success.card.reverse.title"
}
}
},
"successTick": {
"show": true
}
}
}
}
}
}
}
}
}
Esign¶
| Number | Parameter | Default Value (EN/ES) | |
|---|---|---|---|
| 1 | backgroundColor | #FFFFFF | |
| 2 | title.text title.textColor |
Sign here #00051A |
Firmar aquí - |
| 3 | buttons.refuse.text buttons.refuse.backgroundColor buttons.refuse.textColor buttons.refuse.borderColor buttons.refuse.states.hover.backgroundColor buttons.refuse.states.hover.textColor buttons.refuse.states.hover.borderColor buttons.refuse.states.active.backgroundColor buttons.refuse.states.active.textColor buttons.refuse.states.active.borderColor |
Refuse #FFFFFF #000D44 #000D44 #EE686A #000D44 #000D44 #000D44 #FFFFFF #000D44 |
Rechazar - - - - - - - - - |
| 4 | buttons.sign.text buttons.sign.backgroundColor buttons.sign.textColor buttons.sign.borderColor buttons.sign.states.hover.backgroundColor buttons.sign.states.hover.textColor buttons.sign.states.hover.borderColor buttons.sign.states.active.backgroundColor buttons.sign.states.active.textColor buttons.sign.states.active.borderColor |
Sign #000D44 #000D44 #FFFFFF #EE686A #000D44 #EE686A #EE686A #000D44 #EE686A |
Firmar - - - - - - - - - |
| 5 | checkBox.text checkBox.textColor checkBox.box.backgroundColor checkBox.states.hover.textColor checkBox.states.hover.box.backgroundColor checkBox.states.active.textColor checkBox.states.active.box.backgroundColor |
Accept terms & conditions #000D44 #FFFFFF #EE686A #EE686A #EE686A #000D44 |
Aceptar términos y condiciones - - - - - |
| 6 | textInput.placeholder.text textInput.placeholder.textColor textInput.textColor textInput.borderColor textInput.states.hover.borderColor textInput.states.active.borderColor |
Name or initials #D5D7DF #D5D7DF #000D44 #EE686A #000D44 |
Nombre o iniciales - - - - - |
| 7 | modal.title.text modal.title.textColor |
Terms and conditions #000D44 |
Términos y condiciones - |
| 8 | modal.description.text modal.description.textColor |
These are my terms and conditions #000D44 |
Estos son mis términos y condiciones - |
| 9 | modal.buttons.close.text modal.buttons.close.backgroundColor modal.buttons.close.textColor modal.buttons.close.borderColor modal.buttons.close.states.hover.backgroundColor modal.buttons.close.states.hover.textColor modal.buttons.close.states.hover.borderColor modal.buttons.close.states.active.backgroundColor modal.buttons.close.states.active.textColor modal.buttons.close.states.active.borderColor |
Close #FFFFFF #000D44 #000D44 #EE686A #000D44 #000D44 #000D44 #FFFFFF #000D44 |
Cerrar - - - - - - - - - |
| 10 | modal.accept.close.text modal.accept.close.backgroundColor modal.accept.close.textColor modal.buttons.accept.borderColor modal.buttons.accept.states.hover.backgroundColor modal.buttons.accept.states.hover.textColor modal.buttons.accept.states.hover.borderColor modal.buttons.accept.states.active.backgroundColor modal.buttons.accept.states.active.textColor modal.buttons.accept.states.active.borderColor |
Accept #000D44 #FFFFFF #000D44 #EE686A #000D44 #EE686A #EE686A #000D44 #EE686A |
Aceptar - - - - - - - - - |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {"confirmProcess": true},
"stages": ["document", "selfie", "esign"],
"options": {
"document": {
"captures": [
{
"documentTypes":["XX"]
}
]
},
"esign": {
"title": "PruebasXpressid2",
"signers": [
{
"name": "David",
"email": "damatriain@veridas.com"
}
],
"libraryDocumentIds":["7f698377-7710-4655-98ee-0055a66cd541"],
"setup": {
"backgroundColor": "#ff0017",
"title": {
"text": "Custom title",
"textColor": "#00ff13"
},
"buttons": {
"refuse": {
"backgroundColor": "#0078ff",
"text": "Custom refuse",
"textColor": "#ff0017",
"borderColor": "#fff300",
"states": {
"hover": {
"backgroundColor": "#0078ff",
"textColor": "#00ff13",
"borderColor": "#ff0017"
},
"active": {
"backgroundColor": "#00ff13",
"textColor": "#ff0017",
"borderColor": "#0078ff"
}
}
},
"sign": {
"backgroundColor": "#0078ff",
"text": "Custom sign",
"textColor": "#00ff13",
"borderColor": "#ff0017",
"states": {
"hover": {
"backgroundColor": "#fff300",
"textColor": "#9700ff",
"borderColor": "#00ff13"
},
"active": {
"backgroundColor": "#999690",
"textColor": "#000000",
"borderColor": "#ffffff"
}
}
}
},
"checkBox": {
"text": "Custom checkbox",
"textColor": "#ff0017",
"box": {
"backgroundColor": "#00ff13"
},
"states": {
"hover": {
"textColor": "#0078ff",
"backgroundColor": "#fff300"
},
"active": {
"textColor": "#9700ff",
"backgroundColor": "#00ff13"
}
}
},
"textInput": {
"textColor": "#00ff13",
"borderColor": "#000000",
"placeHolder": {
"text": "Custom placeholder",
"textColor": "#ffffff"
},
"states": {
"hover": {
"borderColor": "#f3a108"
},
"active": {
"borderColor": "#0078ff"
}
}
},
"modal": {
"title": {
"text": "Custom modal title",
"textColor": "#0078ff"
},
"description": {
"text": "Custom modal description",
"textColor": "#00ff13"
},
"buttons": {
"close": {
"text": "Custom close",
"backgroundColor": "#ff0017",
"textColor": "#0078ff",
"borderColor": "#9700ff",
"states": {
"hover": {
"backgroundColor": "#f3a108",
"textColor": "#0078ff",
"borderColor": "#000000"
},
"active": {
"backgroundColor": "#f008f3",
"textColor": "#000000",
"borderColor": "#00ff13"
}
}
},
"accept": {
"text": "Custom accept",
"backgroundColor": "#00ff13",
"textColor": "#ff0017",
"borderColor": "#9700ff",
"states": {
"hover": {
"backgroundColor": "#ffffff",
"textColor": "#f000ff",
"borderColor": "#0078ff"
},
"active": {
"backgroundColor": "#fff300",
"textColor": "#ff0017",
"borderColor": "#00ff13"
}
}
}
}
}
}
}
}
}
}
Success¶
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | backgroundColor | #FFFFFF | |
| 2 | containerBox.show containerBox.borderColor |
true #000D44 |
|
| 3 | text textColor |
The process has been successfully completed | El proceso se ha completado con éxito #000D44 |
| 4 | iconColor | #000D44 |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"success": {
"backgroundColor": "#00ff00",
"containerBox": {
"borderColor": "#ee0000"
},
"text": "Success",
"textColor": "#0000ff",
"iconColor": "#aadea2"
}
}
}
Errors¶
Error Modal¶
The error modal pop up is configurable to be displayed or not. If you do not desired to show this screen, the applicable configuration parameter would be: show. By default, this parameter is true.
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | generic.title connection.title document.obverse.title document.reverse.title document.generic.title selfie.title video.title |
Error | |
| 2 | generic.message connection.message document.obverse.message document.reverse.message document.generic.message selfie.message video.message show |
An error has occurred, try again later. true |
Ha ocurrido un error, inténtalo más tarde. |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup":{
"errorModal":{
"generic":{
"title": "Title",
"message": "Message"
},
"connection":{
"title": "Title",
"message": "Message"
},
"document":{
"obverse":{
"title": "Title",
"message": "Message"
},
"reverse":{
"title": "Title",
"message": "Message"
},
"generic":{
"title": "Title",
"message": "Message"
}
},
"selfie":{
"title": "Title",
"message": "Message"
},
"video":{
"title": "Title",
"message": "Message"
},
"show": true
}
}
}
Final Error¶
This error screen appears a few seconds after the error modal and leads to the complete termination of the process. Additionally, it consistently appears whenever a token has expired or been consumed.
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | backgroundColor | #FFFFFF | |
| 2 | containerBox.show containerBox.borderColor |
true #000D44 |
|
| 3 | text textColor |
An error has occurred Further action is not possible | El proceso se ha completado con éxito ##5b5a5a |
| 4 | iconColor | ##da0e1a |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup":{
"error":{
"backgroundColor": "#00ff00",
"containerBox":{
"borderColor": "#ee0000",
"show": true
},
"text": "Success",
"textColor": "#0000ff",
"iconColor": "#aadea2"
}
}
}
Device Rotation Error¶
This error occurs when a process is being executed on a mobile device, and the orientation for capturing is incorrect. The proper way to capture a document is in a vertical or horizontal orientation, while other captures such as selfie and video are done in a vertical orientation.
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | sdkDocument.views.deviceRotated.card.media sdkSelfie.views.deviceRotated.card.media sdkVideo.views.deviceRotated.card.media |
/images/rotateMedia.gif | |
| 2 | sdkDocument.views.deviceRotated.card.title sdkSelfie.views.deviceRotated.card.title sdkVideo.views.deviceRotated.card.title |
To continue, put the phone in HORIZONTAL orientation To continue, put the phone in VERTICAL orientation To continue, put the phone in VERTICAL orientation |
Para continuar, coloque el teléfono en orientación HORIZONTAL Para continuar, coloque el teléfono en orientación VERTICAL Para continuar, coloque el teléfono en orientación VERTICAL |
| 3 | sdkDocument.views.feedback.errors.orientationChangedRestartMessage.card.title sdkSelfie.views.feedback.errors.orientationChangedRestartMessage.card.title sdkVideo.views.feedback.errors.orientationChangedRestartMessage.card.title |
The process could not be completed due to an unexpected change in the device's orientation | No se ha podido completar el proceso debido a un cambio de orientación inesperado del dispositivo |
| 4 | sdkDocument.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkSelfie.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text sdkVideo.views.feedback.errors.orientationChangedRestartMessage.card.buttons.restart.text |
Try again | Reintentar |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document",
"selfie",
"video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
],
"setup": {
"sdkDocument": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
}
]
},
"selfie": {
"setup": {
"sdkSelfie": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
},
"video": {
"setup": {
"sdkVideo": {
"views": {
"deviceRotated": {
"card": {
"title": "deviceRotated.title"
}
},
"feedback": {
"errors": {
"orientationChangedRestartMessage": {
"card": {
"title": "orientationChangedRestartMessage.title",
"buttons": {
"restart": {
"text": "button text"
}
}
}
}
}
}
}
}
}
}
}
}
}
Permission Error¶
This error occurs when you have not provided the necessary camera and microphone permissions to the browser in order to complete the process.
| Number | Parameter | Default value (EN/ES) | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false /images/veridasLogo.png |
|
| 2 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
|
| 3 | sdkDocument.views.feedback.errors.videoErrorPermission.card.title sdkSelfie.views.feedback.errors.videoErrorPermission.card.title sdkVideo.views.feedback.errors.videoErrorPermission.card.title |
Please, make sure to allow the page access to the camera and microphone | Por favor, asegúrese de permitir a la página acceso a la cámara y micrófono |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document", "selfie", "video"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
],
"setup": {
"sdkDocument": {
"views": {
"feedback": {
"errors": {
"videoErrorPermission": {
"card": {
"title": "document card.title"
}
}
}
}
}
}
}
}
]
},
"selfie": {
"liveness": "passive",
"setup": {
"sdkSelfie": {
"views": {
"feedback": {
"errors": {
"videoErrorPermission": {
"card": {
"title": "selfie card.title"
}
},
"orientationChangedRestartMessage": {
"card": {
"buttons": {
"restart": {
"text": "selfie restart.text"
}
}
}
}
}
}
}
}
}
},
"video": {
"setup": {
"sdkVideo": {
"views": {
"feedback": {
"errors": {
"videoErrorPermission": {
"card": {
"title": "video card.title"
}
},
"orientationChangedRestartMessage": {
"card": {
"buttons": {
"restart": {
"text": "video restart.text"
}
}
}
}
}
}
}
}
}
}
}
}
}
Challenge Error¶
This error occurs during the active selfie capture when it fails to detect the correct movement as required in the challenge.
| Number | Parameter | Default Value | |
|---|---|---|---|
| 1 | generic.common.ui.logo.show generic.common.ui.logo.media |
false - |
|
| 2 | sdkSelfie.views.feedback.errors.validation.card.title | The process could not be completed. Please, try again | No se ha podido completar el proceso. Por favor, inténtelo de nuevo |
| 3 | sdkSelfie.views.feedback.errors.validation.card.buttons.restart.text | Restart | Reiniciar |
| 4 | generic.common.ui.buttons.close.show generic.common.ui.buttons.close.media |
false /images/closeButton.svg |
- Example
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"selfie"
],
"options": {
"selfie": {
"liveness": "active",
"challengeLength": 2,
"setup": {
"sdkSelfie": {
"views": {
"feedback": {
"errors": {
"validation": {
"card": {
"title": "errors.validation.card.title",
"buttons": {
"restart": {
"text": "errors.validation.card.button"
}
}
}
}
}
}
}
}
}
}
}
}
}
CssParts¶
Customize UI with cssParts¶
The cssParts property allows you to personalize the appearance of the user interface (UI) elements for document capture, selfie capture, and video recording processes. It accepts a string value that represents the HTTPS URL of a CSS file. This CSS file will contain the custom styles you define to modify the look and feel of these capture components.
Below are the CSS properties that can be customized for each capture process:
- Document capture: Refer to the guide here.
- Selfie capture: Refer to the guide here.
- Video capture: Refer to the guide here.
Example¶
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"ES2_ID"
]
}
]
}
}
},
"setup": {
"cssParts": "https://example.com/static/custom.css"
}
}
Where the file custom.css can contain the following as an example:
/* Custom styles for the document capture process */
/* SDK Document */
vd-document::part(display_message_container) {
background-color: #eb3d1e;
}
vd-document::part(display_message_text) {
color: #ffffff;
}
vd-document::part(head_steps) {
color: #ffffff;
}
/* SDK Selfie */
vd-selfie::part(display_message_container) {
background-color: #eb3d1e;
}
vd-selfie::part(display_message_text) {
color: #ffffff;
}
vd-selfie::part(head_steps) {
color: #ffffff;
}
/* SDK Video */
vd-video::part(display_message_container) {
background-color: #eb3d1e;
}
vd-video::part(display_message_text) {
color: #ffffff;
}
vd-video::part(head_steps) {
color: #ffffff;
}
Customize Font Family¶
It is possible to change the font in XpressID using the customization CSS file. To do this, if you want to use a font that is not supported by the browser, you need to import the font from a URL and assign that font to the XpressID variable --global-font-family-primary responsible for applying the font.
Example .css¶
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
:root {
--global-font-family-primary: "Oswald";
}
Example¶
{
"platform": "web",
"operationMode": "idv",
"flowSetup": {
"core": {
"confirmProcess": true
},
"stages": [
"document"
],
"options": {
"document": {
"captures": [
{
"documentTypes": [
"SelectedByUser"
]
}
]
}
}
},
"setup": {
"cssParts": "https://example.com/static/custom.css"
}
}
