Skip to content

Setup Configuration Components

This section presents the different customizable parameters of the XpressID.

Loading

Alt

Number Parameter Default Value
1 logo.media
logo.show
-
false
2 backgroundColor #000D44
3 text
textColor
Loading
#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

Alt Alt

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.text
modal.cancelled.title.text
modal.error.title.text
modal.completed.title.text
Info
Info
Error
Success
Informacíon
Información
Error
Éxito
10 modal.captured.message.text
modal.cancelled.message.text
modal.error.message.text
modal.completed.message.text
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"
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Document

Autoclassification selector

Alt

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

Alt Alt Alt Alt

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
Docs. de identificación
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)
Carnet Rosa en papel
Permiso verde (CERCU)
11 documentChooser.buttons.iconColor
documentChooser.buttons.states.active.iconColor
#000D44
#FFFFFF
12 documentSelector_countryChooser_picker_searchPlaceholder_text Search… Buscar…
13 documentSelector_countryChooser_picker_dropdown_states_hover_backgroundColor
documentSelector_countryChooser_picker_dropdown_states_hover_textColor
#E6E7ED
#000D44
14 documentSelector_countryChooser_picker_dropdown_states_selected_backgroundColor
documentSelector_countryChooser_picker_dropdown_states_selected_textColor
#E6E7ED
#000D44
15 documentSelector_countryChooser_picker_dropdown_states_active_backgroundColor
documentSelector_countryChooser_picker_dropdown_states_active_textColor
#000D44
#FEFEFD
16 documentSelector_singleCountryTitle_text
documentSelector_singleCountryTitle_textColor
Choose the document type
#00051A
Elija el tipo de documento
#00051A
17 documentSelector_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"
                                            }
                                        },
                                        "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 Modal

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: sdkDocument.views.instructions.active. By default, this parameter is false.

If you choose to display it, the configuration options are listed below:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkDocument.views.instructions.card.title.documents ["Hold your phone vertically"] ["Sujete el teléfono en vertical"]
4 sdkDocument.views.instructions.card.media.documents alive01.png
5 sdkDocument.views.instructions.card.subtitle.documents ["1. Asegúrese de que todos los datos del documento estén visibles, y de que no hay brillos o sombras. \n 2. Cuando el documento esté enfocado, la captura se tomará automáticamente"] ["1. Ensure all document data is visible, and there are no glares or shadows. \n 2. Once the document is in focus, the capture will be taken automatically]
6 sdkDocument.views.instructions.buttons.startProcess.text Start process.text Comenzar el proceso
  • Example
 {
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document"
        ],
        "options": {
            "document": {
                "captures": [
                    {
                        "documentTypes": [
                            "XX"
                        ],
                        "setup": {
                            "generic": {
                                "common": {
                                    "ui": {
                                        "logo": {
                                            "show": true
                                        },
                                        "buttons": {
                                            "close": {
                                                "show": true
                                            }
                                        }
                                    }
                                }
                            },
                            "sdkDocument": {
                                "views": {
                                    "instructions": {
                                        "active": true,
                                        "card": {
                                            "title": {
                                                "documents": [
                                                    "card.title.documents"
                                                ]
                                            },
                                            "subtitle": {
                                                "documents": [
                                                    "card.subtitle.documents"
                                                ]
                                            }
                                        },
                                        "buttons": {
                                            "startProcess": {
                                                "text": "buttons.startProcess.text"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                ]
            }
        }
    }
}

Capture

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkDocument.views.capture.guidance.preCapture.obverse.card.title
sdkDocument.views.capture.guidance.preCapture.reverse.card.title
sdkDocument.views.capture.manualCapture.obverse.card.title
sdkDocument.views.capture.manualCapture.reverse.card.title
Show the front side of the document
Show the back side of the document
Tap to capture the FRONT side of the document
Tap to capture the BACK side of the document
Muestre la parte DELANTERA del documento
Muestre la parte TRASERA del documento
Pulse el botón para capturar la parte DELANTERA
Pulse el botón para capturar la parte TRASERA
  • Example
{
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document"
        ],
        "options": {
            "document": {
                "captures": [
                    {
                        "documentTypes": [
                            "XX"
                        ],
                        "setup": {
                            "generic": {
                                "common": {
                                    "ui": {
                                        "logo": {
                                            "show": true
                                        },
                                        "buttons": {
                                            "close": {
                                                "show": true
                                            }
                                        }
                                    }
                                }
                            },
                            "sdkDocument": {
                                "views": {
                                    "capture": {
                                        "guidance": {
                                            "preCapture": {
                                                "obverse": {
                                                    "card": {
                                                        "title": "capture.guidance.obverse.card.title"
                                                    }
                                                },
                                                "reverse": {
                                                    "card": {
                                                        "title": "capture.guidance.reverse.card.title"
                                                    }
                                                }
                                            }
                                        },
                                        "manualCapture": {
                                            "obverse": {
                                                "card": {
                                                    "title": "capture.manualCapture.obverse.card.title"
                                                }
                                            },
                                            "reverse": {
                                                "card": {
                                                    "title": "capture.manualCapture.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:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkDocument.views.reviewImage.card.title Make sure the document is well-focused and legible Compruebe que el documento está bien enfocado y es legible
4 sdkDocument.views.reviewImage.card.buttons.continue.text Continue Continuar
5 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
                                        },
                                        "buttons": {
                                            "close": {
                                                "show": true
                                            }
                                        }
                                    }
                                }
                            },
                            "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 Modal

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 false.

If you choose to display it, the configuration options are listed below:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkSelfie.views.instructions.card.title.selfie ["Position yourself in front of the camera"] ["Posiciónese frente a la cámara"]
4 sdkSelfie.views.instructions.card.media.selfie alive01.png
5 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"]
6 sdkSelfie.views.instructions.buttons.startProcess.text Start Comenzar
  • Example
 {
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document",
            "selfie"
        ],
        "options": {
            "selfie": {
                "liveness": "passive",
                "setup": {
                    "generic": {
                        "common": {
                            "ui": {
                                "buttons": {
                                    "close": {
                                        "show": true
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "instructions": {
                                "active": true,
                                "card": {
                                    "title": {
                                        "selfie": [
                                            "card.title.documents"
                                        ]
                                    },
                                    "subtitle": {
                                        "selfie": [
                                            "card.subtitle.documents"
                                        ]
                                    }
                                },
                                "buttons": {
                                    "startProcess": {
                                        "text": "buttons.startProcess.text"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Capture

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkSelfie.views.capture.selfie.card.title
sdkSelfie.views.capture.guidance.centered.card.title
sdkSelfie.views.capture.guidance.notCentered.card.title
Fit your face into the oval
Stay still and do not smile
Recenter your face within the oval
Centre su cara en el óvalo
Manténgase estable y no sonría
Vuelva a centrar su cara en el óvalo
  • Example
{
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document",
            "selfie"
        ],
        "options": {
            "selfie": {
                "liveness": "passive",
                "setup": {
                    "generic": {
                        "common": {
                            "ui": {
                                "buttons": {
                                    "close": {
                                        "show": true
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "capture": {
                                "guidance": {
                                    "centered": {
                                        "card": {
                                            "title": "feedback.centered.card"
                                        }
                                    },
                                    "notCentered": {
                                        "card": {
                                            "title": "feedback.notCentered.card"
                                        }
                                    }
                                },
                                "selfie": {
                                    "card": {
                                        "title": "selfie.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: sdkSelfie.views.reviewImage.active. By default, this parameter is false.

If you choose to display it, the configuration options are listed below:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 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
4 sdkSelfie.views.reviewImage.card.buttons.continue.text Continue Continuar
5 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
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "reviewImage": {
                                "active": true,
                                "card": {
                                    "title": "reviewImage.card.media",
                                    "buttons": {
                                        "continue": {
                                            "text": "reviewImage.buttons.continue.text"
                                        },
                                        "repeat": {
                                            "text": "reviewImage.buttons.repeat.text"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Active Capture

Instructions Modal

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 false.

If you choose to display it, the configuration options are listed below:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 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"]
4 sdkSelfie.views.instructions.card.media.head ["alive01.png", "alive02.png"]
5 sdkSelfie.views.instructions.card.subtitle.head ["Make sure you are not wearing sunglasses, hats, or other items that cover your face", "1. Fit the face in the frame and wait for the detection \n 2. Move your head slightly in the direction indicated by the arrows \n 3. When the screen indicates that you have done it correctly, look at the center again \n 4. Repeat the process 2 times"] [ "Asegúrese de no llevar gafas de sol, gorras u otros elementos que tapen su cara", "1. Encaje la cara en el marco y espere a la detección \n 2. Mueva la cabeza ligeramente en la dirección que le indiquen las flechas \n 3. Cuando la pantalla le indique que lo ha hecho correctamente, vuelva a mirar al centro \n 4. Repita el proceso 2 veces"]
6 sdkSelfie.views.instructions.card.buttons.next.text
sdkSelfie.views.instructions.card.buttons.previous.text
Next
Previous
Siguiente
Anterior
7 sdkSelfie.views.instructions.buttons.startProcess Start Comenzar
8 sdkSelfie.views.instructions.active true
  • Example
{
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document",
            "selfie"
        ],
        "options": {
            "selfie": {
                "liveness": "active",
                "challengeLength": 2,
                "setup": {
                    "generic": {
                        "common": {
                            "ui": {
                                "buttons": {
                                    "close": {
                                        "show": true
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "instructions": {
                                "active": true,
                                "card": {
                                    "title": {
                                        "head": [
                                            "card.title.head"
                                        ]
                                    },
                                    "subtitle": {
                                        "head": [
                                            "card.subtitle.head"
                                        ]
                                    }
                                },
                                "buttons": {
                                    "startProcess": {
                                        "text": "buttons.startProcess.text"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Capture

Alt Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkSelfie.views.capture.selfie.card.title
sdkSelfie.views.capture.guidance.centered.card.title
sdkSelfie.views.capture.guidance.notCentered.card.title
sdkSelfie.views.capture.head.card.title.finish
Fit your face into the oval
Stay still and do not smile
Recenter your face within the oval
Great!
Centre su cara en el óvalo
Manténgase estable y no sonría
Vuelva a centrar su cara en el óvalo
¡Bien!
4 sdkSelfie.views.capture.head.card.title.movement
sdkSelfie.views.capture.head.card.title.back
Move your head
Great! Look back to the center
Mueva la cabeza
¡Bien! Vuelva a mirar al centro
5 sdkSelfie.views.capture.head.card.media.headBottomBack
sdkSelfie.views.capture.head.card.media.headBottom
sdkSelfie.views.capture.head.card.media.headCenter
sdkSelfie.views.capture.head.card.media.headLeftBack
sdkSelfie.views.capture.head.card.media.headLeft
sdkSelfie.views.capture.head.card.media.headRightBack
sdkSelfie.views.capture.head.card.media.headRight
sdkSelfie.views.capture.head.card.media.headTopBack
sdkSelfie.views.capture.head.card.media.headTop
"head_bottom_back.gif"
6 sdkSelfie.views.capture.head.card.footer Step %index of %range Paso %index de %range
  • 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
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "capture": {
                                "guidance": {
                                    "centered": {
                                        "card": {
                                            "title": "feedback.centered.card"
                                        }
                                    },
                                    "notCentered": {
                                        "card": {
                                            "title": "feedback.notCentered.card"
                                        }
                                    }
                                },
                                "selfie": {
                                    "card": {
                                        "title": "selfie.card.title"
                                    }
                                },
                                "head": {
                                    "token": "prueba",
                                    "card": {
                                        "title": {
                                            "movement": "head.card.title.movement",
                                            "back": "head.card.title.back",
                                            "finish": "head.card.title.finish"
                                        },
                                        "footer": "head.card.footer"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

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:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 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
4 sdkSelfie.views.reviewImage.card.buttons.continue.text Continue Continuar
5 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
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkSelfie": {
                        "views": {
                            "reviewImage": {
                                "active": true,
                                "card": {
                                    "title": "reviewImage.card.media",
                                    "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 Modal

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 false.

If you choose to display it, the configuration options are listed below:

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkVideo.views.capture.feedback.selfie.card.title ["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"]
4 sdkVideo.views.instructions.card.media.video ["video.jpg", "video1.jpg" ]
5 sdkVideo.views.instructions.card.subtitle.video ["1. Center your face within the oval and do not smile. \n 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 óvalo y no sonría. \n 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"]
6 sdkVideo.views.instructions.card.buttons.next.text
sdkVideo.views.instructions.card.buttons.previous.text
Next
Previous
Siguiente
Anterior
7 sdkDocument.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
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkVideo": {
                        "views": {
                            "instructions": {
                                "active": true,
                                "card": {
                                    "title": {
                                        "video": [
                                            "card.title.video"
                                        ]
                                    },
                                    "subtitle": {
                                        "video": [
                                            "card.subtitle.video"
                                        ]
                                    },
                                    "buttons": {
                                        "next": {
                                            "text": "next.text"
                                        },
                                        "previous": {
                                            "text": "previous.text"
                                        }
                                    }
                                },
                                "buttons": {
                                    "startProcess": {
                                        "text": "buttons.startProcess.text"
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Capture

Alt Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 generic.common.ui.buttons.close.show false
3 sdkVideo.views.capture.guidance.preCapture.selfie.card.title
sdkVideo.views.capture.guidance.nameAndSurname.card.title
sdkVideo.views.capture.feedback.centered.card.title
sdkVideo.views.capture.feedback.notCentered.card.title
Fit your face into the oval
Say your first and last name out loud
Stay still and do not smile
Recenter your face within the oval
Centre su cara en el óvalo
Diga su nombre y apellidos en voz alta
Manténgase estable y no sonría
Vuelva a centrar la cara en el óvalo
4 sdkVideo.views.capture.guidance.preCapture.obverse.card.title
sdkVideo.views.capture.guidance.preCapture.reverse.card.title
sdkVideo.views.capture.feedback.documentNotFound.card.title
sdkVideo.views.capture.tooFar.obverse.card.title
sdkVideo.views.capture.tooFar.reverse.card.title
Show the front of the document to the front camera
Show the back side of the document to the front camera
The document could not be detected. Please, place it within the box
Zoom in the document
Zoom in the document
Muestre la parte delantera del documento en la cámara frontal
Muestre la parte trasera del documento en la cámara frontal
No se ha podido detectar el documento. Por favor, colóquelo en el recuadro
Acerque el documento
Acerque el documento
  • 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
                                    }
                                },
                                "logo": {
                                    "show": true
                                }
                            }
                        }
                    },
                    "sdkVideo": {
                        "views": {
                            "capture": {
                                "guidance": {
                                    "selfie": {
                                        "card": {
                                            "title": "feedback.selfie.card.title"
                                        },
                                        "centered": {
                                            "card": {
                                                "title": "feedback.centered.card.title"
                                            }
                                        },
                                        "notCentered": {
                                            "card": {
                                                "title": "feedback.notCentered.card.title"
                                            }
                                        }
                                    },
                                    "nameAndSurname": {
                                        "card": {
                                            "title": "feedback.nameAndSurname.card.title"
                                        }
                                    },
                                    "preCapture": {
                                        "obverse": {
                                            "card": {
                                                "title": "feedback.notCentered.card.title"
                                            }
                                        },
                                        "reverse": {
                                            "card": {
                                                "title": "feedback.notCentered.card.title"
                                            }
                                        },
                                        "selfie": {
                                            "card": {
                                                "title": "feedback.selfie.card.title"
                                            }
                                        }
                                    },
                                    "documentNotFound": {
                                        "card": {
                                            "title": "feedback.notCentered.card.title"
                                        }
                                    }
                                },
                                "tooFar": {
                                    "obverse": {
                                        "card": {
                                            "title": "feedback.notCentered.card.title"
                                        }
                                    },
                                    "reverse": {
                                        "card": {
                                            "title": "feedback.notCentered.card.title"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Esign

Alt Alt

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

Alt

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.

Alt

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
An error has occurred, try again later. 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.

Alt

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 horizontal orientation, while other captures such as selfie and video are done in a vertical orientation.

Alt

Alt

Number Parameter Default Value
1 sdkDocument.views.deviceRotated.card.media
sdkSelfie.views.deviceRotated.card.media
sdkVideo.views.deviceRotated.card.media
"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.

Alt

Number Parameter Default Value
1 generic.common.ui.logo.show
generic.common.ui.logo.media
false
-
2 sdkDocument.views.feedback.errors.videoErrorPermission
sdkSelfie.views.feedback.errors.videoErrorPermission
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
3 sdkSelfie.views.feedback.errors.validation.card.buttons.restart.text Restart Reintentar
  • Example
{
    "platform": "web",
    "operationMode": "idv",
    "flowSetup": {
        "core": {
            "confirmProcess": true
        },
        "stages": [
            "document", "selfie"
        ],
        "options": {
            "document": {
                "captures": [
                    {
                        "documentTypes": [
                            "ES2_ID"
                        ],
                        "setup": {
                            "sdkDocument": {
                                "views": {
                                    "feedback": {
                                        "errors": {
                                            "videoErrorPermission": {
                                                "card": {
                                                    "title": "videoErrorPermission.title"
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                ]
            },
            "selfie": {
                "liveness": "passive",
                "setup": {
                    "sdkSelfie": {
                        "views": {
                            "feedback": {
                                "errors": {
                                    "videoErrorPermission": {
                                        "card": {
                                            "title": "videoErrorPermission.title"
                                        }
                                    },
                                    "validation": {
                                        "card": {
                                            "buttons": {
                                                "restart": {
                                                    "text": "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.

Alt

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
  • 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;
}