OneSDK with Incode

Get the basics on using Incode with FrankieOne OneSDK

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.

Integration methods

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

  • IDV flow
  • OCR and Biometrics separately

Integrating OneSDK for IDV flow

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

The IDV flow with Incode is configurable. You can run OCR and Biometrics in one or optionally remove Biometrics and only run OCR.

We can also set up a more custom flow on the Incode dashboard, and each flow has a unique ID.

🚧

Recommended devices

Since most desktop computers do not have high resolution built-in cameras, we recommend end users run the Incode IDV flow on mobile devices.

Sample code for IDV flow

<html lang="en">
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>oneSdk onboarding</title>
   <script src="https://assets.frankiefinancial.io/one-sdk/v1.2-beta/oneSdk.umd.js"></script>

  <script>
  async function startOneSdk() {
    // const oneSdk = await OneSdk({ mode: "dummy" });
    const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
    const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

    const tokenResultRaw = await fetch("https://backend.latest.frankiefinancial.io/auth/v2/machine-session", {
            method: "POST",
            headers: {
                "authorization": "machine " + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                permissions: {
                    "preset": "one-sdk",
                    "reference": "<YOUR_UNIQUE_CUSTOMER_REF>"
                }
            })
        });

    const tokenResult = await tokenResultRaw.json();

    const sessionObjectFromBackend = tokenResult;

    const oneSdk = await OneSdk({
            session: sessionObjectFromBackend,
            //isPreloaded: false,
            mode: "development",
            recipe: {
              idv: {
                provider: {
                  name: "incode"
                }
              }
            }
          });

    const oneSdkIndividual = oneSdk.individual();
    oneSdkIndividual.addConsent("general");
    oneSdkIndividual.addConsent("docs");
    oneSdkIndividual.addConsent("creditheader");
    await oneSdkIndividual.submit();

    const idv = oneSdk.flow("idv");

    idv.on("results", async ({checkStatus, document, entityId}) => {
        if (checkStatus) {
          console.log("results successful");
          console.log(checkStatus);
          console.log(document);
          console.log(entityId);
        } else {
          console.log("no data returned");
        }
    });

    idv.on("error", ({ message, payload }) => {
      console.log("received error");
      console.log(message, payload);
    });


    idv.on("detection_complete", (message) => {
      console.log("capture finished");
      console.log(message);
    });

    idv.mount("#idv-el");

  }

</script>

<style>
  
</style>

</head>
<body style="background-color: white" onload="startOneSdk()">
  <div id="idv-el" style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"></div>
</body>

Integrating OneSDK for OCR and biometrics separately

To integrate with OneSDK for OCR and Biometrics separately using Incode, please follow the standard integration here: OneSDK for OCR and biometrics.

To use Incode in OneSDK, the customer account should be configured to use Incode as the IDV vendor and is part of the applied recipe.

OCR and Biometrics

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8"/>
  <link rel="icon" type="image/svg+xml" href="/javascript.svg" />
  <title>oneSdk onboarding</title>
  <script src="https://assets.frankiefinancial.io/one-sdk/v1.2-beta/oneSdk.umd.js"></script>
  <script>
    async function startOneSdk() {
    const CUSTOMER_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxx-xxxx"
    const CUSTOMER_CHILD_ID = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
    const API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

      const tokenResultRaw = await fetch('https://backend.latest.frankiefinancial.io/auth/v2/machine-session', {
        method: 'POST',
        headers: {
          authorization: 'machine ' + btoa(`${CUSTOMER_ID}:${CUSTOMER_CHILD_ID}:${API_KEY}`),
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          permissions: {
            preset: 'one-sdk',
            //entityId: ENTITY_ID,
            reference: "<YOUR_UNIQUE_CUSTOMER_REF>"
          },
        }),
      });

      const sessionObjectFromBackend = await tokenResultRaw.json();

      const oneSdk = await OneSdk({ session: sessionObjectFromBackend, telemetry: false });
      oneSdk.on('*', console.log);

      const oneSdkIndividual = oneSdk.individual();
      oneSdkIndividual.on('*', console.log);

      // Display and update name
      const name = oneSdkIndividual.access('name');
      const { givenName, familyName } = name.getValue();
      const newGivenName = prompt('Confirm given name', givenName);
      name.setValue({ givenName: newGivenName, familyName });
      oneSdkIndividual.addConsent("general");
      oneSdkIndividual.addConsent("docs");
      oneSdkIndividual.addConsent("creditheader");
      // Submit changes
      await oneSdkIndividual.submit();

      // Setup OCR and Biometrics
      const mountElement = document.getElementById('biometrics-container');
      const ocr = oneSdk.component('ocr');
      const biometrics = oneSdk.component('biometrics');

      // On input required, try running the OCR component again
      //ocr.on('input_required', () => ocr.mount(ocr, mountElement));
      ocr.on('error', console.error);
      biometrics.on('error', console.error);

      let error = false;
      biometrics.on('detection_failed', () => (error = true));
      biometrics.on('session_closed', () => {
        // If the session was closed due to an error, try running the biometrics component again.
        if (error) biometrics.mount('#biometrics-container');
        error = false;
      });

      ocr.on('results', ({ document }) => {
        // Present the details of the document that were detected from the uploaded image or images.
        // Decide whether to proceed to the next stage of the onboarding process
        // depending on whether document verification was successful.
        if (document) {
          console.log(document);
          console.log(document.ocrResult.dateOfBirth);

          biometrics.mount('#biometrics-container');
        } else {
          console.log('No document returned');
        }
      });

      biometrics.on('processing', () => alert('We will get back to you with results soon'));
      biometrics.on('results', (result) => {
        // Decide whether to proceed to the next stage of the onboarding process
        // depending on whether biometrics verification was successful.
        console.log(result);
      });

      ocr.on("*", (message) => {
        console.log(message);
      });
      biometrics.on("*", (message) => {
        console.log(message);
      });

      ocr.mount("#biometrics-container");
    }
  </script>
</head>
<body style="background-color: white" onload="startOneSdk()">
  <div id="biometrics-container" style="position:fixed;top: 0;left: 0; width: 100%; height: 100%;"></div>
</body>
</html>