Skip to content

Guide to migrate configuration

Description

The following table compares the configuration variables from previous major versions of the SDK with the current one:

Note that the following configuration variables are only those that fit the new ones. To check all configuration variables for the current SDK, see the configuration documentation.

Reference map

does not apply means that the previous major version's SDK config variable does not match any config variable in the current SDK version.

name + PART means that the configuration variable from previous versions, can be set by the new PART configuration system. For more information see the CSS Parts customization section of the documentation.

The path pattern means that the configuration variable from previous versions, can be set by the following variable that represents the path in the configuration schema, if you are using a config.json file just follow the intellisense provided by the schema.json file in the assets. If you are using an object, please ensure that this object match configuration's interface.

For more information see the configuration section of the documentation, you could also find an example in the setup section at the configuration input

Migration guide for REACT versions

Old configuration parameters Old default values parameters New configuration parameters New default values
borderColorCenteringAidDefault - does not apply (*) -
borderColorCenteringAidDetectingSuccess #FFFFFF vd-document::part(capture_glowing_outline_container_success) { border-color: #9dff97 } #53A335
borderColorCenteringAidDetecting #00FF00 vd-document::part(capture_glowing_outline_container_detection) { border-color: #ff3700 } #ffffff
borderColorCenteringAidInactive #717171 vd-document::part(capture_glowing_outline_container) { border-color: #000000 } #FFFFFF
outerGlowCenteringAidDefault #000000 vd-document::part(capture_glowing_outline_container) { box-shadow: 0 0 0 9999px rgba(242, 2, 255, 0.4) } {box-shadow: 0 0 0 9999px rgba(200, 200, 255, 0.4)}
outerGlowCenteringAidDetecting #001C00 vd-document::part(capture_glowing_outline_container_detection) { box-shadow: 0 0 0 9999px rgba(255, 3, 3, 0.4) } {box-shadow: 0 0 0 9999px rgba(200, 200, 255, 0.4)}
borderThickness 6 vd-document::part(capture_glowing_outline_container) { border-width: 12px }
vd-document::part(capture_glowing_outline_container_nodetection) { border-width: 12px }
vd-document::part(capture_glowing_outline_container_success) { border-width: 12px }
vd-document::part(capture_glowing_outline_container_detection) { border-width: 12px }
vd-document::part(capture_glowing_outline_container_tooFar) { border-width: 12px }
6
buttonBackgroundColorDark - does not apply (*) -
buttonBackgroundColorDarkRepeat - does not apply (*) -
buttonBackgroundColorLight - does not apply (*) -
buttonBackgroundColorLightRepeat - does not apply (*) -
closeButton false generic.common.ui.buttons.close.show false
confirmationColorTick #737373 vd-document::part(capture_success_tick_circle) { fill: #d0c331 } none
confirmationDialogBackgroundColor #4D4B4E vd-document::part(review_image_container) { background-color: #b2ff7b } #FFFFFF
confirmationDialogTextColor #FFFFFF vd-document::part(review_image_message_text) { color: #ff2d2d } #000D44
customConfirmationImageTick - does not apply (*) -
detectionMessageBorderRadius 16px vd-document::part(capture_display_message) { border-radius: 32px }
vd-document::part(rotate_device_display_message) { border-radius: 32px }
16px
detectionMessageFontFamily Poppins vd-document::part(capture_display_message_text) { font-family: cursive }
vd-document::part(rotate_device_display_message_text) { font-family: cursive }
PublicSans
detectionMessageFontWeight normal vd-document::part(capture_display_message_text) { font-weight: 900 }
vd-document::part(rotate_device_display_message_text) { font-weight: 900 }
normal
detectionMessageLineHeight normal vd-document::part(capture_display_message_text) { line-height: 2.5 }
vd-document::part(rotate_device_display_message_text) { line-height: 2.5 }
normal
detectionTimeout 300000 sdkDocument.views.capture.detectionTimeout 300000
displayErrors - does not apply (*) -
errorActionButtonBackgroundColor - does not apply (*) -
errorActionButtonTextColor - does not apply (*) -
errorActionButtonPadding - does not apply (*) -
errorDisplayBackgroundColor - does not apply (*) -
errorDisplayHeaderBackgroundColor - does not apply (*) -
errorDisplayHeaderTextColor - does not apply (*) -
errorDisplayHeaderTitle - does not apply (*) -
errorDisplayTextColor - does not apply (*) -
errorDisplayUserActionShow - does not apply (*) -
fontSize - does not apply (*) -
infoAlertSingleSidedDocument - does not apply (*) -
infoAlertTwoSidedDocument - does not apply (*) -
infoAlertShow - does not apply (*) -
infoAlertShowDocument - does not apply (*) -
infoModalShow true sdkDocument.views.instructions.active true
infoReviewImageText Check if the photo is readable and focused
Compruebe que la foto es legible y está bien enfocada
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
infoReviewImageTextDocument Check if the photo is readable and focused
Compruebe que la foto es legible y está bien enfocada
sdkDocument.views.reviewImage.card.title Make sure the document is well-focused and legible
Compruebe que el documento está bien enfocado y es legible
infoUserImagesPath - sdkDocument.pathAssets assets
isInfoModalShow - does not apply (*) -
loadingSpinnerColor - does not apply (*) -
logEventsToConsole false generic.common.behavior.web.logEvents true
manualCaptureEnableDelay 3000 sdkDocument.views.capture.manualCapture.manualCaptureButtonDelay 20000
message_alive_bold - does not apply (*) -
restartingErrorText The process could not be completed. Please repeat the validation.
No se ha podido completar el proceso. Por favor, repita la validación.
sdkDocument.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
reviewImage true sdkDocument.views.reviewImage.active true
sdkBackgroundColorInactive #2E2E2E generic.theme.colorPrimaryLight #3995ec
setLandscapeDeviceMessage - does not apply (*) -
setMessageDisplayHeight 15% vd-document::part(capture_display_message) { height: 200px }
vd-document::part(rotate_device_message) { height: 200px }
auto
setMessageDisplayMargin - does not apply (*) -
setMessageDisplayOpacity 1 vd-document::part(capture_display_message) { opacity: 0.5 }
vd-selfie::part(rotate_device_message) { opacity: 0.5 }
1
setMessageDisplayPadding 5px vd-document::part(capture_display_message) { padding: 5% }
vd-selfie::part(rotate_device_message) { padding: 5% }
calc(var(--main-sdk-height) * 0.02)
setMessageDisplayPosition auto vd-document::part(capture_display_message) { position: absolute }
vd-selfie::part(rotate_device_message) { position: absolute }
absolute
setMessageDisplayWidth 90% vd-document::part(capture_display_message) { width: 100px }
vd-selfie::part(rotate_device_message) { width: 100px }
calc(var(--main-sdk-width) * 0.8);
setPortraitDeviceMessage - does not apply (*) -
showLogo false generic.common.ui.logo.show true
showSpinner - does not apply (*) -
targetSelector - does not apply (*) -
videoErrorConstraint - does not apply (*) -
videoErrorConstraintActionLabel - does not apply (*) -
videoErrorDefault Sorry, there was an error starting the camera
Lo sentimos, se ha producido un error iniciando la cámara
sdkDocument.views.feedback.errors.videoErrorDefault.card.title Sorry, there has been an error when initiating the camera
Lo sentimos, se ha producido un error al iniciar la cámara
videoErrorExternalInput - does not apply (*) -
videoErrorNotFound Please check that you do not have any software simulating the camera
Por favor, compruebe que no tiene ningún software simulando la cámara
sdkDocument.views.feedback.errors.videoErrorNotFound.card.title Please check that your device has a camera
Por favor, compruebe que su dispositivo dispone de cámara
videoErrorPermission Please allow the page to access the camera
Por favor, permita a la página acceso a la cámara
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
videoErrorPermissionActionLabel - does not apply (*) -
videoErrorUnavailable - does not apply (*) -
videoErrorUnavailableActionLabel - does not apply (*) -
webrtcUnsupportedText - does not apply (*) -
manualCaptureText CLICK HERE to capture
Haga CLICK AQUÍ para capturar
sdkDocument.views.capture.manualCapture.obverse.card.title and sdkDocument.views.capture.manualCapture.reverse.card.title Tap to capture the FRONT side of the document
Pulse para capturar la parte DELANTERA
manualCaptureTextMobile - does not apply (*) -
obverseNotFoundText - does not apply (*)
reverseNotFoundText - does not apply (*)
passportNotFoundText - does not apply (*) -
passportMRZError - does not apply (*) -
confirmationDialogLinkTextColor - does not apply (*) -
confirmationDialogButtonTextColor - does not apply (*) -
confirmationDialogButtonBackgroundColor - does not apply (*) -
repeatButtonColor - does not apply (*) -
repeatText REPEAT
REPETIR
sdkDocument.views.reviewImage.card.buttons.repeat.text Repeat
Repetir
confirmationRepeatButtonTextColor #26BAB8 vd-document::part(review_image_message_buttons_repeat) { color: #ffffff } #000D44
confirmationRepeatButtonBackgroundColor transparent vd-document::part(review_image_message_buttons_repeat) { background: #52c923 } #D3EBFC
confirmationRepeatButtonPadding 0px vd-document::part(review_image_message_buttons_repeat) { padding: 20px } calc(var(--main-sdk-height) * 0.04)
continueButtonColor - does not apply (*) -
continueText CONTINUE
CONTINUAR
sdkDocument.views.reviewImage.card.buttons.continue.text Continue
Continuar
confirmationCaptureButtonTextColor #FFFFFF vd-document::part(review_image_message_buttons_continue) { color: #c41492 } #FFFFFF
confirmationCaptureButtonBackgroundColor #26BAB8 vd-document::part(review_image_message_buttons_continue) { background: #ccff12 } #000D44
confirmationCaptureButtonPadding 2% 5% vd-document::part(review_image_message_buttons_continue) { padding: 20px } calc(var(--main-sdk-height) * 0.04)
detectionMessageBackgroundColor #6f6b6b vd-document::part(capture_display_message) { background-color: #b300ff }
vd-document::part(rotate_device_display_message) { background-color: #00f7ff }
#f2f2f2
detectionMessageTextColor #1A5EB0 vd-document::part(capture_display_message_text) { color: #8f7c00 }
vd-document::part(rotate_device_display_message_text) { color: #8f7c00 }
#000D44
detectionMessageBackgroundColorDocument #6f6b6b vd-document::part(capture_display_message) { background-color: #b300ff }
vd-document::part(rotate_device_display_message) { background-color: #00f7ff }
#f2f2f2
detectionMessageTextColorDocument #1A5EB0 vd-document::part(capture_display_message_text) { color: #8f7c00 }
vd-document::part(rotate_device_display_message_text) { color: #8f7c00 }
#000D44
infoUserSliderButtonText START
COMENZAR
sdkDocument.views.instructions.buttons.startProcess.text Start
Comenzar
infoUserDocumentTitle 1. CENTER your document in the frame
2. Make sure your image DOES NOT show glare or shadow
3. The photo will be captured AUTOMATICALLY
1. CENTRE su documento en el marco,
2. Asegúrese de que su documento NO muestra brillos o sombras.,
3. La fotografía se capturará de forma AUTOMÁTICA
sdkDocument.views.instructions.card.subtitle.documents ["Frame your document within the grid and the capture will be done automatically"]
["Frame your document within the grid and the capture will be done automatically"]
infoUserDocumentMedia helpIconDocumentCenter sdkDocument.views.instructions.card.media.documents [ "/images/document1.svg", "/images/document2.svg" ]
infoUserDocumentBackgroundColorTop #26BAB8 vd-document::part(instructions_slide_box) { background: #7b98ff } #FFFFFF
infoUserDocumentBackgroundColor #E4F6F6 vd-document::part(instructions_slide_box) { background: #7b98ff } #FFFFFF
infoUserDocumentTextColor #0E4645 vd-document::part(instructions_slide_box_subtitle) { color: #89ff4a } #000D44
infoUserDocumentFontSize - does not apply (*) -
infoUserDocumentBackgroundColorButton #26BAB8 vd-document::part(instructions_slide_button) { background: #ff39ee } #000D44
infoUserDocumentTextColorButton #051717 vd-document::part(instructions_slide_button) { color: #40ff00 } #FFFFFF
infoUserDocumentPaddingButton 2% 10% vd-document::part(instructions_slide_button) { padding: 20px } calc(var(--main-sdk-height) * 0.02)
firstArrow - does not apply (*) -
secondArrow - does not apply (*) -
thirdArrow - does not apply (*) -
fourthArrow - does not apply (*) -
fifthArrow - does not apply (*) -
loadingSpinnerScreenBackgroundColor - does not apply (*) -
permissionRefused - sdkDocument.views.feedback.errors.videoErrorPermission.card.title -
permissionRefusedTitle - sdkDocument.views.feedback.errors.videoErrorPermission.card.header -
tooFarText Too Far
Demasiado lejos
sdkDocument.views.capture.tooFar.obverse.card.title and sdkDocument.views.capture.tooFar.reverse.card.title Zoom in the document
Acerque el documento
tooCloseText - does not apply (*) -

Migration guide for new configuration schema v5.1.Z and above

The version family v5.1.Z and above has schema changes, this changes are reflected in the following table, use the reference to make the changes in your configuration input object or file.

Generic important changes:

  • The legacy and deprecated nodes have been removed. Therefore, when utilizing the schema.json file as the schema for your config.json file, ensure that there are no warning messages in the editor to prevent configuration initialization errors.
  • The generic.feedback node has been moved to each SDK node in order to have more specific feedback per SDK.
  • The generic.common.ui.successTick node has been moved to each SDK node.
  • Some generic.common.behavior.web nodes has been moved to each SDK node(pathAssets, detectionTimeout).
  • The selectCamera paremeter has been deleted.

Specific Document important changes:

  • generic.common.ui.successTick moves to sdkDocument.views.capture(document obverse and reverse success tick will be configured as the same element).
  • sdkDocument.views.capture.feedback view moves to sdkDocument.views like instructions capture etc... and will includes the all generic and specific errors in it nodes.
  • generic.feedback moves to sdkDocument.views.feedback, the errors also has been reorganized to be more specific to each sdk with the generic errors included(this will be more clear on the task execution check other tasks with feedback references).
  • sdkDocument.views.capture.error.validation moves to sdkDocument.capture.feedback as a validation error, also the sdkDocument.views.capture.error.orientationChangedRestartMessage error.
  • Removed sdkDocument.blurDetectorActive.
  • generic.commom.behavior.web.(pathAssets, detectionTimeout) moves to sdkDocument, in order to place each property with a better order pathAssets will move to sdkDocument.pathAssets, detectionTimeout will move to the sdkDocument.views.capture.