Documentation

Incode

Incode is an IDV solution that provides image quality checks, document OCR, document validation, and biometrics. Incode is delivered within OneSDK, either as single components (for customers who only want to do OCR) or integrated into an IDV flow.

Suggest Edits

Choose Your Integration Path

📱

Device Recommendations

For optimal performance, end users should complete the IDV flow on mobile devices due to camera quality requirements.

There are two integration methods that you can use for Incode with OneSDK:

  1. IDV flow
  2. OCR and Biometrics separately

Option 1: Complete IDV Flow

To integrate your IDV flow using Incode, follow the standard integration of OneSDK for IDV flow.

Best for: Full identity verification needs including document scanning and biometric matching.

Example IDV Flow Implementation:

// 1. Initialize OneSDK
const oneSdk = await OneSdk({
    session: sessionObjectFromBackend,
    mode: "development",
    recipe: {
        idv: {
            provider: {
                name: "incode"
            }
        }
    }
});

// 2. Set up user consents
const oneSdkIndividual = oneSdk.individual();
oneSdkIndividual.addConsent("general");
oneSdkIndividual.addConsent("docs");
await oneSdkIndividual.submit();

// 3. Initialize IDV flow
const idv = oneSdk.flow("idv");

// 4. Handle results
idv.on("results", async ({checkStatus, document, entityId}) => {
    if (checkStatus) {
        console.log("Verification successful");
    }
});

// 5. Mount the IDV component
idv.mount("#idv-el");

Option 2: Individual Components

To integrate Incode's OCR and Biometrics separately, follow the standard integration here: OneSDK for OCR and biometrics.

Best for: Custom implementations requiring only OCR and Biometrics.

Example OCR-Only Implementation

// 1. Initialize OCR component
const ocr = oneSdk.component('ocr');

// 2. Set up error handling
ocr.on('error', error => {
    console.error('OCR error:', error);
});

// 3. Handle successful results
ocr.on('results', ({ document }) => {
    if (document) {
        console.log('Document details:', document);
        console.log('Date of birth:', document.ocrResult.dateOfBirth);
    }
});

// 4. Mount the OCR component
ocr.mount("#ocr-container");

Example Biometrics-Only Implementation

// 1. Initialize biometrics component
const biometrics = oneSdk.component('biometrics');

// 2. Set up error handling
biometrics.on('error', error => {
    console.error('Biometrics error:', error);
});

// 3. Handle detection failures
let error = false;
biometrics.on('detection_failed', () => {
    error = true;
});

// 4. Handle session completion
biometrics.on('session_closed', () => {
    if (error) {
        biometrics.mount('#biometrics-container');
    }
    error = false;
});

// 5. Mount the biometrics component
biometrics.mount("#biometrics-container");

Quick Start Guide

  1. Set Up Your Environment
// Import the SDK
<script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
  1. Configure Authentication
const config = {
    CUSTOMER_ID: "your-customer-id",
    CUSTOMER_CHILD_ID: "your-child-id",
    API_KEY: "your-api-key"
}

Complete example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OneSDK Integration</title>
    <script src="https://assets.frankiefinancial.io/one-sdk/v1/oneSdk.umd.js"></script>
    
    <script>
        async function startOneSdk() {
            // Configuration
            const config = {
                CUSTOMER_ID: "your-customer-id",
                CUSTOMER_CHILD_ID: "your-child-id",
                API_KEY: "your-api-key"
            };

            // Authentication setup
            const tokenResult = await getAuthToken(config);
            
            // Initialize SDK
            const oneSdk = await OneSdk({
                session: tokenResult,
                mode: "development",
                recipe: {
                    idv: {
                        provider: {
                            name: "incode"
                        }
                    }
                }
            });

            // Start verification flow
            const idv = oneSdk.flow("idv");
            setupEventListeners(idv);
            idv.mount("#idv-el");
        }

        function setupEventListeners(idv) {
            idv.on("results", handleResults);
            idv.on("error", handleError);
            idv.on("detection_complete", handleDetectionComplete);
        }

        // Add your event handler implementations here
    </script>
</head>
<body onload="startOneSdk()">
    <div id="idv-el" style="position:fixed;top:0;left:0;width:100%;height:100%;"></div>
</body>
</html>

Customizing the UI

📘

Notes on UI Customization

You can use your own CSS with Incode's custom classes. For a complete list of Incode CSS classes that you can use to customise your component, visit Customization .


Styling Options

Make the interface match your brand with CSS customization:

/* Example: Basic Theme Customization */
.IncodeRootContainer {
    background-color: #f1f1f1;
}

.IncodeContainer {
    color: #050505;
}

Style Guidelines

  1. Stick to documented CSS classes for future-proof customization. If an element doesn't have a fixed class, Incode hasn't made it available for customization. You can ask Incode to support this by contacting them. Your developers can still make changes to unsupported classes using web inspector tools to inspect element class name in the HTML file. However, be aware that if Incode makes changes or updates these to supported classes, your UI may break in the future
  2. Add !important when needed to override defaults

Example Basic CSS Theme

/* Main container styling */
.IncodeRootContainer {
    background-color: #f1f1f1 !important;
}

/* Text styling */
.IncodeParagraph {
    color: #050505 !important;
    font-family: 'Raleway', sans-serif !important;
}

/* Button styling */
.IncodeIdCardButton,
.IncodeBookletButton {
    border: 1px solid #7E4BF7 !important;
    padding: 12px 20px !important;
    background: #9369F7 !important;
}

Final notes on theming:

  • To use your custom CSS with Incode custom classes, provide your CSS to our technical support team for them to apply it in your account's configuration.
  • If you're using OCR and Biometrics separately, you can apply your own custom CSS directly.

Updated about 2 months ago