## 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:**

```javascript
// 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

**Description:**

This function ensures proper loading of the webSDK.

**Example:**

```javascript
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:**

```javascript
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     |
| 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:**

```javascript
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. |
| `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:**

```javascript
// 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, longitude} |

**Returns:**
- _Object:_  
- _JSON example:_

```json
{
    "location": "Belgrade, Serbia"
}
```

**Example:**

```javascript
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:_

```javascript
{
    "success": boolean,
    "sessionStatus": string
}
```

**Example:**

```javascript
onBoarding.sendFingerprint({ token: session.token }).then((response) => {
  console.log(response.success);
});
```

## 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
{
    "success": true
}
```

**Example:**

```javascript
onBoarding.addPhone({ token, phone }).then((res) => res);
```

## addCustomFields

**Description:**

This endpoint is used for adding custom fields to the 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:_
- _Parameters:_

| Name    | Type      | Description                                         |
|---------|-----------|-----------------------------------------------------|
| success | boolean   | If the call was called correctly.                    |

- _JSON example:_

```json
{
    "success": true
}
```

**Example:**

```javascript
incode.addCustomFields({
  token: session.token,
  fields: { watchlistName: name },
});
```

## renderCaptureId

**Description:**

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.

**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. |
| onError           | `function` | Yes      | A callback function executed if an error occurs. |
| forceIdV2        | `boolean`  | No       | When `true`, it will force the ID Capture v2 experience. |
| captureOnly      | `boolean`  | No       | When `true`, it will force capture-only mode that enables local capture without upload |

**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. |
| `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. |
| `USER_CANCELLED`       | The user cancelled the capture. |
| `UNKNOWN_ERROR`        | Unknown error |

**Example:**

```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.');
}
```

## renderCaptureFace

**Description:**

The renderCaptureFace function initializes and displays the Face Capture experience within a designated DOM element.

**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. |
| onError           | `function`  | Yes      | A callback function executed if an error occurs. |
| forceV2          | `boolean`   | No       | When `true`, it will force the Face Capture v2 experience. |
| captureOnly       | `boolean`   | No       | When `true`, it will force capture-only mode that enables local capture without upload |

**Returns**

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.

**Example**

```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);
      },
    });
  } catch (validationError) {
    console.error("Failed to render component:", validationError.message);
  }
} else {
  console.error("Could not find the container element for face capture.");
}
```

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

**Parameters:**

| Name        | Type             | Description                                        |
|-------------|------------------|----------------------------------------------------|
| element     | React.ReactNode   | 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.                                       |
| 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.                  |
| 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.                                     |

**Example:**

```javascript
const element = document.getElementById("your-container-id");
const onSuccess = () => {
  /* success handler code */
};
const onError = () => {
  /* error handler code */
};

renderDocumentSelector(element, {
  onSuccess,
  onError,
});
```

## processId

**Description:**

This method should be called once the uploads of the front and back sides of the ID are over.

**Parameters:**

| Name  | Type   | Description    |
|-------|--------|-----------------|
| token | string | access token.   |

**Returns:**
- _Object:_

```json
{
    "success": true
}
```

**Example:**

```javascript
const response = await onBoarding.processId({
  token,
});
```

## processFace

**Description:**

This method should be called after both the selfie and the front of the ID are uploaded.

**Parameters:**

| Name  | Type   | Description    |
|-------|--------|-----------------|
| token | string | access token.   |

**Returns:**
- _Object:_

```json
{
    "confidence": 0.794,
    "existingUser": false
}
```

**Example:**

```javascript
const response = await onBoarding.processFace({
  token,
});
```

## renderVideoSelfie

**Description:**

This method renders the VideoSelfie Component.

**Parameters:**

| Name     | Type          | Description    |
|----------|---------------|-----------------|
| container | HTMLElement  |                 |
| options   | Object       | options object   |
| callback  | 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.        |
| onSuccess    | function   | Callback when the videoSelfie was successful.            |
| onError      | function   | Callback when the detect was unsuccessful.                |

**Example:**

```javascript
onBoarding.renderVideoSelfie(
  container,
  {
    token: session,
    showTutorial: true,
    modules: ["front", "back", "speech", "selfie"],
  },
  {
    onSuccess: () => alert("speech detected"),
    onError: () => alert("speech not detected"),
  }
);
```

## renderLogin

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

**Example:**

```javascript
incode.renderLogin(container, {
  onSuccess: onSuccess,
  onError: onError,
});
```