IDCheck.io
Easily integrate a document capture and identification solution in your prospect on-boarding path.
A Javascript library for IDCheck.io WEB SDK integration.
We also support 2 other types of integrations
- Redirection
- Iframe
This article is focused on the Javascript library integration
Installation of the javascript library
// with npm
npm install idcheckio-sdk
// with yarn
yarn add idcheckio-sdk
Usage
Import
Import it in your code as an ES6 module :
import IdCheckIo from 'idcheckio-sdk';You can also include it as a regular script tag on your page and use the global variable IdCheckIo:
<script src="https://sdkweb.idcheck.io/v2/assets/js/idcheckio-sdk.min.js"></script>Display an Onboarding
In order to display an onboarding using the SDK-WEB library, you need to instantiate a IdCheckIo object, then call the init() function. This function takes an object as parameter containing the following properties :
- uid: the onboarding identifier, obtained when calling the /onboarding/sendlink API
- element: an HTML element or a query selector for obtaining the HTML container that will be used to display the onboarding
JS:
const idcheck = new IdCheckIo();
idcheck.init({
url: 'https://sdkweb.idcheck.io/v2/my-path-name/5d70cb7dadad283c572bc0fc', // URL from API
element: '#idcheck-component',
});HTML:
<div id="idcheck-component">Loading...</div>The IdCheckIo class constructor takes a Configuration object as parameter that can contain the following properties:
| Property | Description | Required | Default value |
|---|---|---|---|
| log | The log level to use when outputting log messages. Values = "DEBUG", "INFO", "WARN", "ERROR" | false | "ERROR" |
| wordings | Object used for overriding wordings configuration. See documentation. | false | undefined |
| theme | Object used for overriding theme configuration (header, button, logo...). See documentation. | false | undefined |
| navigation | Object used for overriding navigation configuration. See documentation. | false | undefined |
Configuring theme
In the Theme configuration object, you can use all the theme properties available through the REST API. See documentation.
You can also use the following additional properties :
| Property | Description | Required | Default value |
|---|---|---|---|
| hideHeader | Boolean that indicates if the header should be hidden. | false | false |
| hideStepper | Boolean that indicates if the stepper should be hidden. | false | false |
| forceMobileLayout | Boolean that indicates if the mobile layout should be used on desktop. Setting this value to true will remove the white box with grey background on desktop. | false | false |
Configuring navigation
| Property | Description | Required | Default value |
|---|---|---|---|
| showWelcomePolicy | Enum: ALWAYS, NEVER, REFERER_ONLY (By default a welcome page is displayed when the link is sent by EMAIL or SMS) that indicates if the Welcome page should be displayed. | false | REFERER_ONLY |
| skipDocumentsList | Boolean that indicates if the Documents List page should be skipped. This page will only be displayed if the list of documents to capture contains at least 2 physical documents. | false | false |
| skipEnd | Boolean that indicates if the ending page should be skipped. If the value is set to true, the user will stay on the finalizing page (with loading spinner). This could be useful for displaying a custom ending page after receiving an "ENDED" event. | false | false |
| skipCameraTutorial | Boolean that indicates if the camera access page should be skipped. | false | false |
Handling events
You can react to SDK-WEB events by registering event callbacks using the IdCheckIo class.
Exemple:
idcheck.on('STARTED', (event) => console.log('sdk-web started!', event));List of available events :
| Property | Description |
|---|---|
| STARTED | The onboarding has been started. A client session has been initialized. |
| DOCUMENT_CAPTURED | A document has been successfully captured. |
| NAVIGATION_WELCOME | The welcome page is being displayed. |
| NAVIGATION_DOCUMENTS_LIST | The documents list is being displayed. |
| NAVIGATION_LEGAL_MENTIONS | The legal mentions are being displayed. |
| NAVIGATION_CAPTURE | The document capture page is being displayed. |
| NAVIGATION_LIVENESS | The liveness page is being displayed. |
| NAVIGATION_CAPTURE_HELP | The help page is being displayed. |
| NAVIGATION_ANALYSIS | The document analysis page is being displayed. |
| NAVIGATION_WAITING_ERROR | The page inviting the user to wait while handling an onboarding error is being displayed. |
| NAVIGATION_WAITING_END | The page iniviting the user to wait while finishing to transmit data to the web API at the end of the onboarding is being displayed. |
| NAVIGATION_END | The onboarding end page is being displayed. |
| ENDED | The onboarding has successfully ended. All documents have been captured. |
| ERROR | An error has occured. All documents could not have been captured. |
| ACTIVITY | Non-blocking errors (ex: the user has provided an invalid document and is being asked to retry the capture). |
Examples
Are you looking for an example project to get started? We have one in react.
Browser compatibility
| Chrome | Firefox | Edge | Safari |
|---|---|---|---|
| Latest |
Latest |
17+ |
11+ |
Troubleshooting
-
"an ancestor violates the following Content Security Policy directive"
We are limiting iframe integration to https://localhost:3000. To allow your domain please make a request to support Team.
Support
Please contact AriadNEXT IDCHECKIO support team if you encounter any issue with your idcheckio sdk-web integration.
Licence
Copyright (c) 2010-2020 ARIADNEXT - All Rights Reserved. NOTICE: All information contained herein is, and remains the property of ARIADNEXT and its suppliers, if any. The intellectual and technical concepts contained herein are proprietary to ARIADNEXT and its suppliers and may be covered by U.E. and Foreign Patents, patents in process, and are protected by trade secret or copyright law.