## create **Description:** Initializes the SDK by creating an instance of the `incode` object. This object holds all the SDK methods. **Parameters:** | Name | Type | Description | | ----------------- | ------- | ---------------------------------------------------------------------------------- | | apiKey | string | API key | | apiURL | string | API URL | | lang | string | Language code ( such as en or es) | | encrypt | boolean | Indicates the use of encryption (default: false) | | translations | object | The object with the translations. (Ask support) (optional) | | darkMode | boolean | Indicates whether dark variants should be shown for all tutorials (default: false) | | fingerprintApiKey | string | The [fingerprint](https://fingerprint.com/) API key (optional). | | useSha256 | boolean | Indicates whether to use sha256 encryption | **Returns** - _Object:_ The SDK instance **Example:** ```js // Get onBoarding instance const onBoarding = OnBoarding.create({ apiURL: "myApiURL", lang: "en", }); // You can save it on a global variable var onBoarding = OnBoarding.create({ apiURL: "myApiURL" }); ``` ## initialize > 🚧 > > The `initialize()` method is mandatory beginning with version 1.83.0 **Description:** This function ensures proper loading of the webSDK. **Example:** ```javascript Text import { en } from "./en.js"; const Onboarding = await create({ apiURL: apiURL, translations: en, }); //Allows proper translation loading order await Onboarding.initialize(); ``` ## isDesktop **Description:** This function informs you if the user is using a desktop or laptop computer (as opposed to a mobile device) **Example:** ```js if (onBoarding.isDesktop()) { onBoarding.renderRedirectToMobile(containerRef.current, { onSuccess: () => { renderFinishScreen(); }, session: session, flowId: flowId, }); } else { // show mobile normal flow renderFrontId(); } ``` ## renderRedirectToMobile **Description:** This method renders the Redirect Component. **Parameters:** | Name | Type | Description | | :---------- | :----------- | :------------- | | `container` | HTML element | | | `options` | `object` | options object | **Options:** | Name | Type | Description | | ----------------- | ---------- | ---------------------------------------------------------------------- | | session | object\* | The session object you get in `createSession` (mandatory) | | flowId | string | ID of the flow that will be used in the mobile | | onSuccess | function\* | Callback when the onboarding in mobile was successful and completed | | url | string | URL to be redirected to | | showSms | boolean | Boolean flag indicating if the SMS component should be shown | | allowReEnrollment | boolean | Boolean flag indicating if user re-enrollment is allowed | | externalId | string | External ID to concatenate to URL if needed | | assets | object | Object containing assets from the dashboard | | expired | boolean | Boolean flag indicating if a session is expired | | smsText | string | Custom text to be send in SMS. The URL is concatenated after this text | **Example:** ```js const flowId = "someflowid"; const session = await onBoarding.createSession("ALL", null, { configurationId: flowId, }); if (onBoarding.isDesktop()) { onBoarding.renderRedirectToMobile(containerRef.current, { onSuccess: () => { renderFinishScreen(); }, session: session, flowId: flowId, }); } else { // show mobile normal flow renderFrontId(); } ```
## renderCombinedConsent **Description:** Renders a combined consent interface within a specified DOM element. This function allows for displaying a consent form that is predefined in the dashboard. **Parameters:** | Name | Type | Description | | ----------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | | `element` | `HTMLElement` | The DOM element where the consent interface will be rendered. If `null`, the function will not perform any operation. | | `consentId` | `string` | Id of a consent configured in dashboard | | `token` | `Session` | The session object get in createSession | | `onSuccess` | `() => void` | A callback function that is called when the user provides consent, facilitating further actions or analytics tracking. | **Example:** ```js // Locate the DOM element where the consent screen should be rendered const consentElement = document.getElementById("consent-root"); // Define the onSuccess callback function const handleConsentGiven = () => { console.log("Combined consent given."); }; // Define the configuration options for the consent screen const consentOptions = { token: session, onSuccess: handleConsentGiven, consentId: "someConsentId", // id of a consent created in dashboard }; // Call the renderCombinedConsent function with the defined parameters renderCombinedConsent(consentElement, consentOptions); ``` ## sendGeolocation **Description:** This is almost the same as `addGeolocation` with the difference being that this will automatically ask the user for the coordinates. **Parameters:** | Name | Type | Description | | ----- | ------ | ----------------------------------------------------- | | token | object | Receives an object with {token, latitude, loingitude} | **Returns:** - _Object:_ JSON object - _JSON example:_ ```json { "location": "Belgrade, Serbia" } ``` **Example:** ```js onBoarding.sendGeolocation(token).then((res) => res); ``` ## sendFingerprint **Description:** Sends relevant information about the user's device and Incode's Web SDK: - Browser version - Device model - Application type (Web application) - OS and OS version - Incode's Web SDK version - User's IP address **Parameters:** | Name | Type | Description | | ----- | ------ | --------------------------------------------- | | token | string | access token to be used in all other methods. | **Returns:** - _Object:_ ```js { "success": boolean, "sessionStatus": string } ``` **Example:** ```js onBoarding.sendFingerprint({ token: session.token }).then((response) => { console.log(response.success); }); ``` **Usage Example:** ```jsx const element = document.getElementById("your-container-id"); const onSuccess = () => { /* success handler code */ }; const onError = () => { /* error handler code */ }; renderDocumentSelector(element, { onSuccess, onError, // ...other options }); ``` *** ## renderCaptureId > Introduced in v1.80.0 - 2025-05-09. The `renderCaptureId` method is responsible for initializing and displaying the **ID verification module** within a designated HTML Element. This module will present the document type selector, capture tutorials, and capture UI for double-sided ID documents, such as Driver's licenses, and single-sided ID documents, such as Passports. > 📘 Important: Omni Dashboard configuration required. > > Most of the options and settings for `renderCaptureId` such as number of capture attempts, manual-capture timeout or optional tutorials are configured from your Incode Omni Dashboard. > ℹ️ Important: New Behavior. > > Please note that the `renderCaptureId` method does not specify which side of the ID to capture. Both sides of double-sided ID documents are now captured in a single call. **Parameters:** | **Name** | **Type** | **Required** | **Description** | | --------- | ------------- | ------------ | ------------------------------------------------------------------ | | `element` | `HTMLElement` | Yes | The HTML Element where the ID capture experience will be rendered. | | `props` | `Object` | Yes | Configuration object | **Props:**

Name	Type	Required	Description
`session`	`object`	Yes	The Incode session object that contains the`token` key.
`onSuccess`	`function`	Yes	A callback function to be executed after the ID capture process is completed. _\* The component is unmounted before this callback is called._
`onError`	`function`	Yes	A callback function executed if an error occurs. The error parameter will be a detailed `IdError` object for flow-specific errors (common in v2) or a standard JavaScript Error object for general exceptions. _\* The component is unmounted before this callback is called._
`forceIdV2`	`boolean`	No	When `true`, it will force the ID Capture v2 experience. _\* defaults to_`false`
`captureOnly`	`boolean`	No	When `true`, it will force capture-only mode that enables local capture without upload \_\* defaults to`false`

**Returns** The function returns an object with a single property: - `close`: A function (`function(): void`) that, when called, will unmount and clean up the rendered `CaptureId` component from the DOM. **Errors:** The `IdError` will return a `message`, a `code` and optionally a generic `error` object. | **Error Code** | **Description** | | -------------------- | ------------------------------------------------------------------------- | | `NO_MORE_TRIES` | The user has reached the maximum attempts configured in the dashboard. | | `PERMISSION_DENIED` | The user denied the camera permissions. | | `PERMISSION_REFRESH` | The camera permissions where changed, you would need to refresh the page. | | `MODULE_NOT_FOUND` | The flow configuration does not include the ID capture module. | | `WEBCAM_ERROR` | The web camera failed to initiate or there is no web camera. | | `FETCH_FLOW_ERROR` | Failed to fetch module configuration from the flow. | | `USER_CANCELLED` | The user cancelled the capture. | | `UNKNOWN_ERROR` | Unknown error | **Example** ```javascript Javascript import {renderCaptureId} from '@incodetech/welcome'; const myElement = document.getElementById('id-capture-container'); const mySession = { token: 'your_auth_token_here' }; // Example LooseSession if (myElement) { const { close } = renderCaptureId(myElement, { session: mySession, // Pass the entire session object onSuccess: () => { console.log('ID capture successful!'); // Perform actions after success }, onError: (error) => { console.error('ID capture failed:', error); // Handle error }, }); // To remove the component later: // close(); } else { console.error('Could not find the element to render into.'); } ``` **Customization** The way customization is applied depends on the version of the ID capture flow being used: - **ID Capture Experience V2:** The appearance and behavior of the rendered experience **honors the customizations you have configured for your flow in your dashboard**. Any styling or specific flow steps defined in your dashboard will be applied automatically when using this function, **except for the border radius of buttons**, which may not be directly customizable through this method. - **ID Capture Experience V1:** See [Web SDK Customization](https://developer.incode.com/docs/web-integrations-customization#/). ## renderCaptureFace The renderCaptureFace function initializes and displays the Face Capture experience within a designated DOM element. > Introduced in v1.81.0 - 2025-06-12. > 📘 Important: Omni Dashboard configuration required. > > Most of the options and settings for `renderCaptureFace` such as number of capture attempts, manual-capture timeout or optional tutorials are configured from your Incode Omni Dashboard. **Parameters:** | **Name** | **Type** | **Required** | **Description** | | --------- | ------------- | ------------ | ------------------------------------------------- | | `element` | `HTMLElement` | Yes | The HTML Element where the Face Capture component | | `props` | `Object` | Yes | Configuration object | **Props**

Name	Type	Required	Description
`session`	`object`	Yes	The Incode session object that contains the`token` key.
`onSuccess`	`function`	Yes	A callback function executed upon successful face capture. It receives a response object containing details about the successful capture. _\*The component is unmounted before this callback is called._
`onError`	`function`	Yes	A callback function executed if an error occurs. The error parameter will be a detailed `FaceError` object for flow-specific errors (common in v2) or a standard JavaScript Error object for general exceptions. _\*The component is unmounted before this callback is called._
`forceV2`	`boolean`	No	When `true`, it will force the Face Capture v2 experience. _\* defaults to_`false`
`captureOnly`	`boolean`	No	When `true`, it will force capture-only mode that enables local capture without upload \_\* defaults to`false`

**Errors:**
The `FaceError` will return a `message`, a `code` and optionally a generic `error` object. | **Error Code** | **Description** | | :--------------------- | :---------------------------------------------------------------------------------- | | `NO_MORE_ATTEMPTS` | The user has reached the maximum attempts configured in the dashboard. | | `PERMISSION_DENIED` | The user denied the camera permissions. | | `PERMISSION_REFRESH` | The camera permissions were changed; you would need to refresh the page. | | `MODULE_NOT_FOUND` | The flow configuration does not include the Face capture module. | | `WEBCAM_ERROR` | The web camera failed to initiate, or there is no web camera. | | `FETCH_FLOW_ERROR` | Failed to fetch module configuration from the flow. | | `USER_CANCELLED` | The user cancelled the capture. | | `NONEXISTENT_CUSTOMER` | Only for `renderAuthFace`. The hint provided doesn't match any customer's identity. | | `HINT_NOT_PROVIDED` | Only for \`renderAuthFace ', the customer identity hint wasn't provided. | | `UNKNOWN_ERROR ` | Unhandled exception on server-side. | **Return Value** The function returns an object with a single method: - `close`: A function `(() => void)` that, when called, will manually unmount and clean up the rendered `CaptureFace` component from the DOM. This is useful for cases where you need to close the component programmatically before the flow completes. **Example** ```javascript Javascript import { renderCaptureFace } from "@incodetech/welcome"; const container = document.getElementById("face-capture-container"); const session = { token: "your_session_token_here" }; if (container) { try { const { close } = renderCaptureFace(container, { session: session, onSuccess: response => { console.log("Face capture successful!", response); }, onError: error => { console.error("Face capture failed:", error.message); if ("code" in error) { switch (error.code) { case "NO_MORE_ATTEMPTS": alert("You have no more attempts remaining."); break; case "STREAM_ERROR": alert( "Could not start the camera. Please ensure it is not being used by another app and try again.", ); break; } } }, }); } catch (validationError) { console.error("Failed to render component:", validationError.message); } } else { console.error("Could not find the container element for face capture."); } ``` **Customization** The way customization is applied depends on the version of the Face Capture flow being used: - **For Face Capture v2:** The appearance and behavior of the rendered experience will **respect the customizations you have configured for your flow in your dashboard**. Any styling or specific flow steps defined in your dashboard will be applied automatically when using this function, **with the exception of the border radius of buttons**, which may not be directly customizable through this method. - **For Face Capture v1:** The customization will **use the theme you sent in the**`create`** method**. > 📘 > > **processFace() needed** > > Starting on WebSDK version 1.83.0 [processFace](https://developer.incode.com/docs/web-sdk-reference#processface) is no longer automatically called at the end of renderCaptureFace, you will need to explicitly call it. This only applies for V2, V1 still calls it automatically. ## renderDocumentSelector **Description:** This method renders a Document Selector in a given container. It provides various customization options and callbacks for different stages of the document selection process. It accepts the same parameters as `renderCamera`, excluding `type`. **Parameters:** | Name | Type | Description | | | :------ | :----------------------- | :----------------------------------------------- | :-------------------------------------------------------------------------- | | element | React.ReactNode | Element | The container element or node where the document selector will be rendered. | | options | RenderCameraProps object | Configuration options for the document selector. | | **Options:** | Name | Type | Default | Description | | :------------------------------- | :---------- | :-------- | :------------------------------------------------------------------------------------ | | onSuccess | function | emptyFunc | Callback when the document selection is successful. | | onError | function | emptyFunc | Callback when there is an error in the document selection process. | | numberOfTries | number | 3 | The number of attempts allowed for document selection. | | onLog | function | emptyFunc | A function for logging. | | permissionMessage | string | | The message shown in the permission screen. | | permissionBackgroundColor | string | | The background color of the permission screen. | | token | object | | The session token. | | timeout | number | 40000 | The timeout duration in milliseconds. | | sendBase64 | boolean | true | Flag to determine if the image should be sent in base64 format. | | showPreview | boolean | false | Flag to show preview after document capture. | | stream | MediaStream | | A media stream object. | | nativeCamera | boolean | false | Flag to use the native camera for capture. | | hideRetake | boolean | false | Flag to hide the retake option. | | showTutorial | boolean | false | Flag to show a tutorial. | | showPaperDLTutorial | boolean | false | Flag to show a paper driver's license tutorial. | | scanPdf417 | boolean | false | Flag to scan for PDF417 barcodes. | | videoTutorialSrc | string | | Source of the video tutorial. | | showCustomCameraPermissionScreen | boolean | false | Flag to show a custom camera permission screen. | | isSecondId | boolean | false | Flag to indicate if the document is a second ID. | | fullScreen | boolean | true | Flag to enable full-screen mode. | | assistedOnboarding | boolean | false | Flag to enable assisted onboarding. | | isRecordingEnabled | boolean | false | Flag to enable recording during capture. | | onRestartOnboarding | function | reload | Callback to restart the onboarding process. | | showDoublePermissionsRequest | boolean | false | Flag to show a double permissions request. | | onlyAllowCapture | boolean | false | Flag to allow only capture (disables uploading of files/images). | | disableFullScreen | boolean | false | Flag to disable full-screen behavior (uses container width/height). | | onStreamReady | function | emptyFunc | Callback when the stream is ready. | | showAutoCaptureIDOverlay | boolean | false | Flag to show an automatic capture ID overlay. | | showManualCaptureIDOverlay | boolean | false | Flag to show a manual capture ID overlay. | | skipProcessFace | boolean | false | Flag to skip processing of the face in the document. | | defaultHorizontalMask | boolean | false | Flag to use a default horizontal mask for the capture. | | isFixedMask | boolean | false | Flag to indicate if the mask is fixed. | | blurrinessStrictMode | boolean | false | Flag to enable strict mode for blurriness detection. | | onlyCapture | boolean | false | On document capture, it will just display Incode's regular camera overlay for capture | | onlyUpload | boolean | false | On document capture, it will just display regular system's file picker and camera | **Usage Example:** ```jsx const element = document.getElementById("your-container-id"); const onSuccess = () => { /* success handler code */ }; const onError = () => { /* error handler code */ }; renderDocumentSelector(element, { onSuccess, onError, // ...other options }); ```
## renderCamera > 📘 For new ID and Selfie experience > > Please use `renderCaptureId` and `renderCaptureFace` for an improved and easier to implement solution. **Description:** `renderCamera()` enables the device's frontal or rear camera to capture an ID document (such as a driver's license or Passport), a Selfie, or a Proof of Address document. > 👍 Camera permissons: > > renderCamera() handles the browser camera permission request automatically. It is not necessary to include additional logic. **Parameters:**

Name	Type	Description	Possible values:
type	string	Renders the UI for a single-sided or double-sided ID document.	Possible values (Capture modes): `"front"`: ID capture mode for the ID front side. `"back"`: ID capture mode for the ID back side. `"selfie"`: Face capture mode. `"Document"`: Proof of address (PoA) capture mode. `"passport"`: Passport capture mode (Only for the photo page). `"processCarInvoice`: Mexican Car Invoice. `"processCirculationCard"`: Mexican circulation card.
container	HTMLElement		"
optionsObject	object	options object

**Options:**

Name	Type	Description
onSuccess	function	A callback to be executed after a successful capture. Returns a [success response object](#on-success)
onError	function	Callback when the number of tries is reached. Returns an object with the error details.
token	Object	The session object (optional if not presented is read from the state.
numberOfTries	Number	The number of opportunities the user has to make a successful capture. At a minimum of `1` should be passed.
onLog	function	A callback function that returns read-only events during the capture.
permissionMessage (deprecated)	String	The message in the permission screen. Default: "Press 'Allow' to continue."
permissionBackgroundColor (deprecated)	String	The background of the permissions screen. Default: "#696969
sendBase64	boolean	If you need to send the image in base64, set this to true (only if type = `"selfie"`)
timeout	number	The timeout in milliseconds before enabling the option for manual capture (starts only after an ID or face has been detected)
showPreview (deprecated)	boolean	Set to true to show capture preview. (only if type = `'selfie'`)
stream (deprecated)	MediaStream	If you send a stream, it won't ask the user again. This is an advanced option.
nativeCamera	boolean	This is only optional when using "document" as capture mode (see the `renderCamera()` parameters). If `true`, enables the rear camera and allows PDF/image upload from the device gallery.
showTutorial	boolean	Option to show the tutorial (default: false)
isRecordingEnabled	boolean	Option to record the capture camera (default: false)
onRestartOnboarding (deprecated)	function	Callback for the restart flow after camera access is denied (default: `() => window.location.reload()`)
showDoublePermissionsRequest (deprecated)	boolean	Option to show the custom permission prompt (default: false)
disableFullScreen ((deprecated))	boolean	Option to disable the full-screen behaviour of our SDK. This will use the container width and height. Use this only for Desktop apps. (default:`false`)
showCustomCameraPermissionScreen	boolean	Option to open a modal with instructions to allow camera permissions when the user denies them. (default:`false`)
assistedOnboarding	boolean	Only for `type` `"selfie"`. Flag to enable the assisted onboarding feature. The rear camera will be used for face capture instead of the front camera, allowing the user to be assisted.
hatCheckEnabled	boolean	Enable checks for hats
lensesCheckEnabled	boolean	Enable checks for lenses
maskCheckEnabled	boolean	Enable checks for face masks
eyesClosedCheckEnabled	boolean	Enable checks for eyes closed
documentType	string	The type of document to be selected. `otherDocument1`, `otherDocument2`, `otherDocument3`, `processV5CLogbook`, `processCarInvoice`, `processFinanceSettlement`, `processCirculationCard`,
tutorialText	object	Text to be shown on special documents tutorial, used as follow: { step1: { title, subtitle }, step2: { title, subtitle }, }

**Success response object:** | Name | Type | Description | | -------------------- | ------- | ----------------------------------------------------------- | | classification | Boolean | Is the server classified image an ID flag | | correctGlare | Boolean | Is the glare in the acceptable range flag | | correctSharpness | Boolean | Is the sharpness in the good range flag | | countryCode | String | Valid ISO alpha-2 or alpha-3 code of the ID issuing country | | glare | Number | Glare level | | horizontalResolution | Number | Horizontal resolution in pixels | | issueName | String | Name of the provided ID | | issueYear | Number | The year when the ID was issued | | readability | Boolean | Is the data readable from the ID flag | | sessionStatus | String | Current status of the session | | sharpness | Number | Sharpness level | | skipBackIdCapture | Boolean | Flag for skipping back ID capture | | typeOfId | String | Type of ID (ID, Passport...) | | failedReason | String | Classification fail reason. | **Examples:** **Capturing a double-sided ID (I.e., Driver's license):** ```javascript function myFrontCaptureFn(){ incode.renderCamera("front", container, { onSuccess: myCaptureFnBackSide, onError: console.log, numberOfTries:3, token:session.token }); } function myBackCaptureFn(){ incode.renderCamera("back", container, { onSuccess: console.log, onError: console.log, numberOfTries:3, token:session.token }); } ``` **Capturing a passport** ```javascript //Notice no back side capture is required function myPassportCaptureFn(){ incode.renderCamera("passport", container, { onSuccess: myCaptureFnBackSide, onError: console.log, numberOfTries:3, token:session.token }); } ``` **Capturing a proof of address (PoA) document:** ```javascript // IMPORTANT: Notice the nativeCamera option. It enables the rear camera and allows PDF/image upload from the device gallery. function myPoACaptureFn(){ incode.renderCamera("document", container, { onSuccess: myCaptureFnBackSide, onError: console.log, numberOfTries:3, token:session.token, nativeCamera: true }); } ``` **Selfie capture:** ```javascript function myFaceCaptureFn(){ incode.renderCamera("selfie", container, { onSuccess: myCallback, onError: console.log, numberOfTries:3, token:session.token }); } ``` **Canceling the capture:** ```javascript const { close } = incode.renderCamera("front", container, { onSuccess: myCaptureFnBackSide, onError: console.log, numberOfTries:3, token:session.token }); document.querySelector("#close-button").addEventListener("click", () => { close(); // closes and destroys the capture module prematurely. }); ``` ***
## processId **Description:** This method should be called once the uploads of the front and back sides of the ID are over. Incode validations, tests and OCR parsing are processed during this method. To fetch OCR data, use the ocrData method. Parameter queueName is needed so it can be determined in which queue the interview should go. Once this is called, the user is no longer able to upload the ID (front, back side, passport or insurance card)! **Parameters:** | Name | Type | Description | | ----- | ------ | ------------- | | token | string | access token. | **Returns:** - _Object:_ JSON object - _JSON example:_ ```json { "success": true } ``` **Example:** ```js const response = await onBoarding.processId({ token, }); ```
## processFace This method should be called after both the selfie and the front of the ID are uploaded. (/omni/add/face and /omni/add/front-id). The response contains information if this user already exists in the system and there is recognition confidence between the selfie image and the face image from the front of the ID. In order to get face images, the method /omni/get/images should be called. **Parameters:** | Name | Type | Description | | ----- | ------ | ------------- | | token | string | access token. | **Returns:** - _Object:_ JSON object - _Parameters:_ | Name | Type | Description | | ------------ | ------- | ---------------------------------------------------- | | confidence | number | float number 0 - 1 indicating recognition confidence | | existingUser | boolean | indicates if the user has already been enrolled | - _JSON example:_ ```json { "confidence": 0.794, "existingUser": false } ``` **Example:** ```js const response = await onBoarding.processFace({ token, }); ``` ## renderFaceMatch
## renderVideoSelfie **Description:** This method renders the VideoSelfie Component. > 📘 Localization not Supported > > For videoSelfie to work a fixed language must be selected during `/omni/start` ([How to Start a Session](https://developer.incode.com/reference/startinterview)). > > Please provide it along with the other parameters: `{"language": "en-US"}` **Parameters:** | Name | Type | Description | | :-------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | | callback Object | object | options object | **Options:** | Name | Type | Description | | ---------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | token | Object | The session Object (Mandatory) | | showTutorial | boolean | Option to show the tutorial (default: false) | | modules | Array\[String] | The modules you want to perform in video selfie. Check the table to see all available modules (The default is all modules) | | speechToTextCheck | boolean | Option to perform the speech to text check. If this is false, the videoSelfie always will call onSuccess (default: true) | | performLiveness | boolean | Off/On liveness check, by default it is false | | videoSelfieAsSelfie | boolean | The option to choose from which image you will make a face check, from selfie or video selfie. If it is true it will be from selfie | | compareOCREnabled | boolean | Option to off/on front OCR check (default: false) | | compareIDEnabled | boolean | Option to off/on front ID check (default: true) | | compareBackOCREnabled | boolean | Option to off/on back OCR check (default: false) | | compareBackIDEnabled | boolean | Option to off/on back ID check (default: false) | | questionsCount | Number | Option to set number of questions in questions module (default: 3) | | hatCheckEnabled | boolean | Enable checks for hats | | lensesCheckEnabled | boolean | Enable checks for lenses | | maskCheckEnabled | boolean | Enable checks for face masks | | eyesClosedCheckEnabled | boolean | Enable checks for eyes closed | **Modules** | Name | Description | | --------- | ------------------------------------------------------------------------------------------------------ | | selfie | Selfie step | | front | Front ID step | | back | Back ID step | | poa | Proof of address step | | questions | Random questions step | | speech | The user will perform an authorization. Important: this step is mandatory and needs to be the last one | **Callback** | Name | Type | Description | | ------------- | -------- | ------------------------------------------------------------------------------------------------------------- | | onSuccess | function | Callback when the videoselfue was successful. If this is called it means the speech detection was successful. | | onError | function | Callback when the detect was unsuccessful. If this is called it means the speech detection was unsuccessful | | numberOfTries | number | The number of tries in speech-to-text | **Example:** ```js onBoarding.renderVideoSelfie( container, { token: session, showTutorial: true, modules: ["front", "back", "speech", "selfie"], // you can add 'poa' and 'questions' speechToTextCheck: true, hatCheckEnabled: true, lensesCheckEnabled: true, maskCheckEnabled: true, eyesClosedCheckEnabled: true, }, { onSuccess: () => alert("speech detected"), onError: () => alert("speech not detected"), numberOfTries: 3, } ); ``` ## renderConference **Description:** This method will render the Conference component **Parameters:** | Name | Type | Description | | :-------------- | :---------- | :--------------- | | container | HTMLElement | | | options Object | object | options object | | callback Object | object | callbacks object | **Options:** | Name | Type | Description | | ------------- | ------- | ---------------------------------------------------------------------------------------------------------- | | token | Object | The session object (Mandatory) | | showOTP | Boolean | If true, it will render the OTP screen before conference | | numberOfTries | Number | The number of tries that the user has for OTP. If you put -1 the user will have infinite tries. Default: 3 | | queue | String | The queue for the video conference. Default: '' | **Callbacks:** | Name | Type | Description | | --------- | -------- | --------------------------------------------------------------------------------- | | onSuccess | function | Passes the status as a parameter. Possible statuses are: close, deny, approve | | onError | function | Callback when the detect was unsuccessful. Something went wrong in the conference | | onConnect | function | Callback when the conference is connected | | onLog | function | Callback for the logging | **Example:** ```js onBoarding.renderConference( container, { token: token, showOTP: false, }, { onSuccess: (status) => { log(status); switch (status) { case "close": console.log("The conference was close"); goToStep("closeCase"); break; case "deny": console.log("The conference was denied"); goToStep("denyCase"); break; case "close": console.log("The conference was approved"); goToStep("approveCase"); break; } }, } ); ``` ## renderAuthFace > 📘 > > Available from SDK version 1.84.0 Renders the UI for the Face authentication module. Authentication can run in two modes: 1:1 and 1:N. **Parameters:** | Name | Type | Description | | :---------- | :---------- | :------------------------------------------------------------------------------------------------ | | `container` | HTMLElement | The DOM element that will hold the component | | `options` | object | The options and configuration object for the authentication component (See the available options) | **Options:** | Name | Type | Description | | ----------- | -------- | ------------------------------------------------------------------------------------------- | | `session` | object | The session object that contains the session token (Mandatory) | | `authHint` | string | UUID of an Incode identity for 1:1 authentication. If `null`It runs in 1:N mode. | | `onSuccess` | function | A callback function to be executed after a successful selfie capture. | | `onError` | function | A callback function to be executed after the maximum number of capture attempts is reached. | **Example:** ```javascript Javascript IncodeSDK.renderAuthFace(container, { session: session, authHint: 'customer-uuid-12345', onSuccess: mySuccessCallbackFn, onError: myErrorCallbackFn, }); ```
## renderLogin > 📘 Deprecated > > Please use `renderAuthFace` . **Description:** Renders the UI for the Face authentication module. The authentication can be run in two modes: 1:1 and 1:N. **Parameters:** | Name | Type | Description | | :------------------------------- | :---------------------- | :--------------------------------------------------------------------------------------------- | | element | Element | The DOM element where the login component will be rendered. | | onSuccess | function | Callback when the detect was successful. | | onError | function | Callback when an error happened. | | timeout | number (optional) | Maximum time allowed for the login process, after which the onError callback is triggered. | | stopAtAccessDenied | boolean (optional) | Flag to trigger onError callback when access denied event happened. | | stopAtError | boolean (optional) | Flag to trigger onError callback when any error event happened. | | isOneToOne | boolean (optional) | Specifies if the login is for a one-to-one session.If true you will need to send oneToOneProps | | oneToOneProps | Object (optional) | Object containing additional properties for one-to-one sessions. | | oneToOneProps.phone | string (optional) | Phone number to use for one-to-one session authentication. | | oneToOneProps.identityId | string (optional) | Identity ID for the user in one-to-one sessions. (Client Id) | | oneToOneProps.email | string (optional) | Email address to use for one-to-one session authentication. | | showCustomCameraPermissionScreen | boolean (optional) | Whether to show a custom camera permission screen instead of the default browser prompt. | | isKiosk | boolean (optional) | Indicates if the login is being used in a kiosk mode. | | lensesCheckEnabled | boolean
(optional) | `true` by default | | hatCheckEnabled | boolean
(optional) | `true` by default | | maskCheckEnabled | boolean
(optional) | `true` by default | | eyesClosedCheckEnabled | boolean
(optional) | `true` by default | **Example:** ```js incode.renderLogin(container, { onSuccess: onSuccess, onError: onError, }); ``` ## renderEnterCurp **Description:** This method renders the component to enter and validate CURP. **Parameters:** | Name | Type | Description | | ----- | ------ | --------------------------------------------- | | token | string | access token to be used in all other methods. | **Example:** ```js incode.renderEnterCurp(document.getElementById('app'), { token: session.token, onSuccess: console.log, onError: console.log,, }) ``` ## renderSignature **Description:** This method will render the Signature Component. **Parameters:** | Name | Type | Description | | :------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | **Options:** | Name | Type | Description | | --------------------- | -------- | ------------------------------------------------------ | | token | String | The token string (Mandatory) | | onSuccess | function | Callback when the upload of signature was successful | | onError | function | Callback when the upload of signature was unsuccessful | | type | string | Type of signature. This can be used for sign contracts | | initials | boolean | If true, this will send initials and not signature | | title | jsx | The title element in JSX syntax | | subtitle | jsx | The subtitle element in JSX syntax | | canvasBackgroundColor | string | The background color of the canvas (default: '#fff') | | canvasBorderColor | string | The border color of the canvas (default: '#20263d') | | penColor | string | The pen color of the canvas (default: '#20263d') | **Example:** ```js onBoarding.renderSignature(document.getElementById("app"), { token: session.token, onSuccess: console.log, onError: console.log, }); ``` ## addPhone **Description:** Add phone number to an interview. If a customer with that phone number already exists, an error will be thrown. **Parameters:** | Name | Type | Description | | ----- | ------ | --------------------------------------------- | | token | string | access token to be used in all other methods. | | phone | string | customer's phone number | **Returns:** - _Object:_ JSON object - _JSON example:_ ```json { "success": true } ``` **Example:** ```js onBoarding.addPhone({ token, phone }).then((res) => res); ``` ## addCustomFields **Description:** This endpoint is used for adding custom fields to current onboarding session. **Parameters:** | Name | Type | Description | | ------ | ------ | ---------------------------------------------- | | token | string | access token to be used in all other methods. | | fields | object | Object of custom fields that will be inserted. | **Returns:** - _Object:_ JSON object - \`_Parameters:_ | Name | Type | Description | | ------- | ------- | --------------------------------- | | success | boolean | If the call was called correctly. | - _JSON example:_ ```json { "success": true } ``` **Example:** ```js incode.addCustomFields({ token: session.token, fields: { watchlistName: name }, }); ``` ## renderBiometricConsent **Description:** This method renders the component with biometric consent screen. It should be shown as a first screen if createSession function returns `showMandatoryConsent` with `true` value (in that case createSession will also return `regulationType` which you have to pass as param into this function). **Parameters:** | Name | Type | Description | | -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | token | object | The session object get in createSession | | onSuccess | function | Callback after consent is successfully given | | onCancel | function | Callback after consent is canceled | | regulationType | string | State string received in createSession method if users Geo Ip Location is in California, Texas, Illinois or Washington (possible values: US\_California, US\_Texas, US\_Illinois or US\_Washington) | **Example:** ```js incode.renderBiometricConsent(document.getElementById("app"), { token: session, onSuccess: console.log, onCancel: console.log, regulationType: "US_Illinois", }); ``` ## renderMlConsent **Description:** This method will render the ML Consent component. **Parameters:** | Name | Type | Description | | :------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | **Options:** | Name | Type | Description | | --------- | -------- | ---------------------------------------------------- | | token | object | The token object (mandatory). | | type | string | ML Type (Worldwide) | | onSuccess | function | Callback when the upload of signature was successful | **Example:** ```js onBoarding.renderMlConsent(document.getElementById("app"), { token: session, onSuccess() { console.log("ML accepted"); }, }); ``` ## renderQr **Description:** This method renders a Qr code which when scanned will open a specified URL or web flow application. **Parameters:** | Name | Type | Description | | :------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | **Options:** | Name | Type | Description | | -------------- | ---------- | ------------------------------------------------------------------- | | session | object\* | The session object you get in `createSession` (Mandatory) | | onSuccess | function\* | Callback when the onboarding in mobile was successful and completed | | url | string | URL to be redirected to | | primaryColor | string | A hexcode string for styling, ie #000000 | | secondaryColor | string | A hexcode string for styling, ie #FFFFFF | | sizePx | number | A single number representing width and height in pixels | **Example:** ```js const flowId = "someflowid"; const session = await onBoarding.createSession("ALL", null, { configurationId: flowId, }); if (onBoarding.isDesktop()) { onBoarding.renderQr(containerRef.current, { onSuccess: () => { showFinishScreen(); }, session: session, flowId: flowId, }); } else { // show mobile normal flow renderFrontId(); } ``` ## renderQrScanner **Description:** Renders a universal QR Code Scanner. The value of the QR code is stored in the onboarding session as the `qrCodeText` custom field. **Parameters:** | Name | Type | Description | | :------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | **Options:** | Name | Type | Description | | --------- | -------- | ---------------------------------------------------- | | session | object | The session object (mandatory). | | onSuccess | function | Callback when the upload of signature was successful | **Example:** ```js onBoarding.renderQrScanner(document.getElementById("app"), { session: session, onSuccess() { console.log("QR scanned"); }, }); ``` ## renderUserConsent > 📘 Deprecated > > Please use `renderCombinedConsent` which is more powerful and configurable. **Description:** Renders a privacy consent interface within a specified DOM element. This function allows for displaying a consent form that is either predefined in the dashboard or uses a default configuration. **Parameters:** | Name | Type | Description | | ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `element` | `HTMLElement` | The DOM element where the consent interface will be rendered. If `null`, the function will not perform any operation. | | `options` | `object` | An object containing configuration options for the consent interface. The options object includes the properties described below: | | `options.session` | `Session` | The session object containing user session data, necessary for determining the consent state or user preferences. | | `options.onSuccess` | `() => void` | A callback function that is called when the user provides consent, facilitating further actions or analytics tracking. | | `options.title` | `string` _(Optional)_ | The title of the consent dialog. If not specified, a default title from the dashboard or predefined settings will be used. | | `options.text` | `string` _(Optional)_ | The descriptive text displayed in the consent dialog, providing context or details about the consent being requested. Falls back to a default if not provided. | **Example:** ```js // Locate the DOM element where the consent dialog should be rendered const consentElement = document.getElementById("consent-root"); // Define the onSuccess callback function const handleConsentGiven = () => { console.log("User consent granted."); }; // Define the configuration options for the consent dialog const consentOptions = { session: session, onSuccess: handleConsentGiven, title: "Privacy and Cookies Consent", text: "We use cookies to ensure you get the best experience on our website. By continuing, you agree to our privacy policy.", // Optionally, provide a custom JSX component for additional consent options customCheck: null, // Assuming no custom JSX element is provided }; // Call the renderUserConsent function with the defined parameters renderUserConsent(consentElement, consentOptions); ```
## renderFiscalQr **Description:** Renders a QR scanner to retrieve the information from the url in the QR (México only). **Parameters:** | Name | Type | Description | | :------------- | :---------- | :------------- | | container | HTMLElement | | | options Object | object | options object | **Options:** | Name | Type | Description | | --------- | -------- | ---------------------------------------------------- | | session | object | The session object (mandatory). | | onSuccess | function | Callback when the upload of signature was successful | **Example:** ```js onBoarding.renderFiscalQr(document.getElementById("app"), { session: session, onSuccess() { console.log("Fiscal QR scanned"); }, }); ``` ##