@trulioo/docv-csp

Trulioo DocV Javascript SDK

For further information, see our Documentation.

Install and Usage

HTML

Create an HTML element where the SDK UI should be rendered:

<div id="trulioo-sdk"></div>

CSS

Import the default style:

@import '@trulioo/docv-csp/main.css';

JS

Import the Javascript modules and set up the SDK:

import {Trulioo, event} from "@trulioo/docv-csp"

const elementID = "trulioo-sdk" // The HTML element id to attach to
const shortCode = "sample-short-code" // Set the obtained short code from the Trulioo Customer API

// Setup the workflow configuration
const workflowOption = Trulioo.workflow()
     .setShortCode(shortCode)

// Setup callbacks to get results and debugging errors
const callbacks = new event.adapters.ListenerCallback({
    onComplete: (success) => {
        console.info(`Verification Successful: ${success.transactionId} `)
    },
    onError: (error) => {
        console.error(`Verification Failed with Error Code: ${error.code}, TransactionID: ${error.transactionId}, Reason: ${error.message}`)
    },
    onException: (exception) => {
        console.error("Verification Failed with Exception:", exception)
    }
})

const callbackOption = Trulioo.event().setCallbacks(callbacks)

// Initialize the SDK with the workflow configuration
Trulioo.initialize(workflowOption)
    .then(complete => {
        console.info("Initialize complete:", complete)
        // Launch the UI with the provided HTML element ID
        Trulioo.launch(elementID, callbackOption)
            .then(success => {
                console.info("Launch success:", success)
            })
    })
    .catch(error =>
        console.error("Error:", error)
    )

Note: The SDK will import additional css files automatically. Be sure to not exclude the css files contained in the @trulioo/docv node_modules directory from your web app configuration if you are using webpack css-loader or something similar.

Changing Language Locale

The SDK will default to users device setting language locale.

If the given language is available but the given locale is not supported, the SDK will set to the given language and the default supported locale.

If the given language locale is not supported, the SDK will default to English (US).

To change the preferred language locale, we provide a method on the SDK called setLanguage, this method accepts RFC5646 language format. Some examples of an accepted locale format: "ar", "en-GB", "es-MX", "zh-Hans-CN".

const shortCode = "sample-short-code" // Set the obtained short code from the Trulioo Customer API
const locale = "fr-CA" // Example of setting language locale to French (Canada).

const workflowOption = Trulioo.workflow()
     .setShortCode(shortCode)
     .setLanguage(locale)

Customize Theme

In order to customize some elements of the UI, the SDK provided the WorkflowThemeBuilder that enables for some customization.

To set the desired logo or branding to be part of the UI, you can simply call setLogoSource. This method accepts a string representation of the image source which can be the url path to the hosted logo or a base64 format (Note: We only support base64 format string with 300kb or less, hence it is recommended to provide the url path instead). The provided logo will be displayed with a fixed height of 32 pixels.

To customize the primary buttons colors, you can simply call setPrimaryButtonColor and setPrimaryButtonTextColor to set the button color and the button text color respectively.

const shortCode = "sample-short-code" // Set the obtained short code from the Trulioo Customer API

const workflowTheme = Trulioo.workflowTheme() // Create the WorkflowTheme object
     .setLogoSource("https://samplelogo.jpg")
     .setPrimaryButtonColor("#FF9800")
     .setPrimaryButtonTextColor("#007f5c")
     .build()

const workflowOption = Trulioo.workflow()
    .setShortCode(shortCode)
    .setTheme(workflowTheme) // Set the created WorkflowTheme object as part of the Workflow configuration 

Desktop to Mobile Workflow

The SDK also provides the ability for users to be able to capture documents using their mobile phone camera when they started the flow from the desktop browser. When the user is on a desktop browser they will be prompted with a QR Code to scan, so they can continue their capture process using their mobile phone. Once they finish the capture process, they will be redirected back to the desktop to finish their flow.

To enable Desktop to Mobile workflow, we provide a method on the SDK called setRedirectUrl, this method accepts a URL that hosts the Trulioo SDK, and can be the same instance of the SDK as is used for the Desktop flow.

The generated QR code will point to the URL redirect, and will add a query string code that will need to be passed into the setShortCode call.

The code included in the query string indicates that it is coming from a desktop to mobile workflow. If there is no short code provided in the url parameter, then use the obtained short code from the Trulioo Customer API.

Additionally, in order to persist users selected language locale from their Desktop browser, the locale information will be passed as part of the url parameters of the QR Code that can be set on the workflow configuration.

const queryString = window.location.search
const urlParams = new URLSearchParams(queryString)
const shortCodeParam = urlParams.get("code") // Obtained the short code from the url param if there is any
const localeParam = urlParams.get("locale") // Obtained the locale from the url param if there is any
const host = "https://sample-url.com" // Set the QR Code redirect url host
    
let selectedShortCode = shortCodeParam // Use the obtained short code from the url param
    
if (shortCodeParam === null) {
    selectedShortCode = "sample-short-code" // Use the obtained short code from the Trulioo Customer API
}

const workflowOption = Trulioo.workflow()
    .setShortCode(selectedShortCode)
    .setRedirectUrl(host)

if (localeParam !== null) {
    workflowOption.setLanguage(localeParam) // Set the language locale provided from the url
}

Enable WebView Support

To enable WebView support, you can simply call setWebView and set the value to true. This will enable the SDK to be rendered and run properly on native WebView.

const shortCode = "sample-short-code" // Set the obtained short code from the Trulioo Customer API

const workflowOption = Trulioo.workflow()
     .setShortCode(shortCode)
     .setWebView(true) // Set the value to true to enable WebView support.

Disable Region Selection

To disable region selection, you can simply call setRegionSelection and set the value to false. This will disable the region selection and exclude it from the verification flow.

const shortCode = "sample-short-code" // Set the obtained short code from the Trulioo Customer API

const workflowOption = Trulioo.workflow()
     .setShortCode(shortCode)
     .setRegionSelection(false) // Set the value to false to disable region selection in the flow.

Utilize the SDK from a CDN

In your project, you can import the Trulioo SDK:

import truliooDocV from "https://cdn.jsdelivr.net/npm/@trulioo/docv-csp/+esm"

Also include the css style file into your html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trulioo/docv-csp/main.css">

You will now have full access to the SDK via your import, without any extra configuration steps needed. The above url will get you the latest version of the sdk. If you want to use a more specific version for the sdk, you can do https://cdn.jsdelivr.net/npm/@trulioo/docv-csp@VERSION_NUMBER/+esm and replace the VERSION_NUMBER to your choice (This also applies to the style file url).

Note: The cdn feature is only available after version 2.8.1 or above, any version below are not properly supported.