Configuration¶

The configuration can be inserted using two methods. To know more, please go to Initialize SDK in the API section of this documentation.

Validation¶

The SDK internally validates the configuration received, following this process:

Those properties not inserted in the config will take the default values, as shown below.
Each filled property will have its type validated against the types as shown in the table below.
Each filled property will be compared to the allowed values indicated in the table below in bold.

If all these steps are successful, the SDK will start normally. However, if any of these steps finds a misconfiguration, an error will be thrown via the browser's console and an error message will be shown in the browser's screen as well.

Language¶

The language setting plays a crucial role in ensuring that users experience the onboarding process in a language that is familiar and comfortable to them. By default, the SDK utilizes the system/browser language to determine the appropriate default texts. If the system/browser language is either English (en) or Spanish (es), the corresponding default texts will be applied. However, if the system/browser language is not English or Spanish, the SDK will fall back to English as the default language, ensuring that users receive texts in a language they can understand.

When customizing texts within the setup sections, it's important to note that these customized texts will override the default texts included within the SDK. This feature allows for extensive personalization and localization of the onboarding experience, catering to specific cultural or regional preferences.

In instances where all texts are intended to be customized, there's no need to explicitly specify the language setting. The default language logic will be bypassed, and all text customizations will take precedence. This approach provides complete flexibility in tailoring the onboarding process to the desired language and cultural context.

Property	Type	Required	Default Value	Possible Values
language	string	No	`en` or `es` by system/browser language	"en", "es"

To show all texts in a different language (for example Catalonian, Basque, French, etc) It's mandatory to translate them all using the available text parameters Configuration table.

Media files¶

To configure the paths for the media files, please follow these instructions:

Make sure to include the directory where the file is located in the file name. For instance, if our file is stored in a folder named 'images', you should add the following to the file name: '/images/file_name.png'.
Keep in mind that the path for the media files may vary depending on the nested folders you have. For example, if the root directory (referred to as the pathAssets property) is 'assets', and within the assets folder, you have other subfolders like 'images', 'gifs', and so on, the media file path for GIF files would be '/gifs/file_name.gif'.

By following these guidelines, you can properly configure the paths for your media files.

Webview¶

The SDK is also compatible with Meta webviews, i.e. you can run it in Facebook and Instagram native apps for Android and iOS. To inform the user of a permissions problem (for example camera permissions) and how to fix them, the videoErrorPermission property can be modified with the appropriate message.

"videoErrorPermission": {
    "card": {
        "title": "Please allow the page access to the camera",
        "media": "danger.svg",
        "header": "Error"
    }
},

Configuration table¶

Loading¶

Number	Parameter	Default value (EN/ES)
1	generic.views.loading.media
2	generic.views.loading.card.title	Loading	Cargando

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:

Alt

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	[ Verify your identity document ]	[ Verifique su documento de identidad ]
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/obverse_document_desktop.png, /images/obverse_document_desktop.png, ]
5	sdkDocument.views.instructions.buttons.startProcess.text	Start	Comenzar

Reverse¶

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

Alt

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	[ Turn your document and capture the back side ]	[ Gire su documento y capture la parte trasera ]
3	sdkDocument.views.instructions.card.subtitle.documentsBack	[ Show the back side of the document to the camera ]	[ Muestre la parte trasera del documento a cámara ]
4	sdkDocument.views.instructions.card.media.documentsBack	[ /images/reverse_document.png, /images/reverse_document.png, ]
5	sdkDocument.views.instructions.buttons.startProcess.text	Start	Comenzar

Capture¶

Alt Alt Alt Alt

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

The following parameters modify the behavior of the capture process. When capturing a document, you can specify the duration for which the process remains active and, if necessary, define the orientation. These parameters are configured in the following configuration object.

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
sdkDocument.views.deviceRotated.active	If true, displays a device rotated screen to inform the user to change the orientation.	true or false
sdkDocument.views.deviceRotated.onOrientation	sdkDocument.views.deviceRotated.active is true, specifies the orientation in which the device rotated screen will appear.	portrait or landscape

Success¶

Alt

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

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 (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

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.

Alt Alt

Number	Parameter	Default Value
1	sdkDocument.views.deviceRotated.card.media	/images/rotateMedia.gif
2	sdkDocument.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	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	Try again	Reintentar

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.

cameraError

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

Configuration object¶

{
    "sdkDocument": {
        "views": {
            "instructions": {
                "active": true
            },
            "reviewImage": {
                "active": true
            },
            "capture": {
                "manualCapture": { "active": true, "manualCaptureButtonDelay": 1500 },
                "successTick": {
                    "show": true
                }
            },
            "deviceRotated": {
                "active": true,
                "onOrientation": "landscape"
            }
        }
    },
    "$schema": "./assets/schema.json",
    "generic": {
        "theme": {},
        "common": {
            "ui": {
                "buttons": {
                    "close": {
                        "show": true
                    }
                }
            }
        }
    }
}

Theme¶

Below is an example of the SDK with the theme properties modified in the configuration inside of generic object.

Here you can check the configuration we used:

"generic": {
    "theme": {
        "colorPrimaryLight": "#488bff",
        "colorPrimaryDark": "#0f6984",
        "colorPrimaryMain": "#ecb25c",
        "colorNeutral00": "#bfff00",
        "colorNeutral05": "#2bd2d8",
        "colorNeutral20": "#ecb25c",
        "colorNeutral40": "#bfff00",
        "colorAlertSuccess": "#4da32c",
        "colorAlertSuccessDark": "#ecb25c",
        "radiusSm": "3px"
    },
    ...
}