E2E Sample Code

Now let's put all the screens together to run an E2E OCR and Biometrics flow.

📘
Initialisation
Make sure to follow Getting started and Form recipe configuration to initialise OneSDK properly, before using the following sample codes.

1- Render default Review form after IDV flow

In this sample, we render the review and loading forms upon receiving a results event when running IDV flow in OneSDK:

<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/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.kycaml.uat.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,
      mode: "development",
      recipe: {
        form: {
          provider: {
            name: 'react',
            googleApiKey: //"<YOUR_GOOGLE_API_KEY>"
          },
        }
      }
    });
    oneSdk.on('*', console.log);

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

    const idv = oneSdk.flow("idv");
    const loading1 = oneSdk.component("form", {name: "LOADING", title: {label: "Loading..."}, descriptions: [{label: ""}]});
    const loading2 = oneSdk.component("form", {name: "LOADING", title: {label: "Processing results..."}, descriptions: [{label: "Hold tight, this can take up to 30 seconds. Please do not refresh this page or click the 'back' button on your browser."}]});
    const review = oneSdk.component("form", {
        name: "REVIEW",
        type: "ocr",
      });

    let before = true;
    idv.on("loading", (display)=>{
      if(display){
        if (before)
        {
          loading1.mount("#loading1");
        }
      }else{
        if (before)
        {
          loading1.unmount();
        }
        before = false;
      }
    })

    idv.on("results", async ({checkStatus, document, entityId}) => {
        if (checkStatus) {
          console.log("results succesfful");
          loading2.unmount();
          review.mount("#idv-el");
        } 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);
      loading2.mount("#loading2");
    });

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

    review.on("form:review:ready", async (message) => {
      console.log(message);
    });

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

  }

</script>

<style>
  
</style>

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

You can optionally run a verification check upon receiving theform:review:ready event as the last step.

2- Render E2E forms along with OCR and Biometrics modules

In this sample, we render all the forms including Welcome, Consent, Document selection, and Review along with OCR and Biometrics modules.
In this flow, we leverage the separate OCR and Biometrics modules, to load the Review screen right after OCR and before Biometrics.

<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/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.kycaml.uat.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,
      mode: "development",
      recipe: {
        ocr: {
          maxDocumentCount: 3,
        },
        form: {
          provider: {
            name: 'react',
            //googleApiKey: "YOUR_GOOGLE_API_KEY"
          },
        }
      }
    });
    oneSdk.on('*', console.log);

    const form_welcome = oneSdk.component("form", {
      name: "WELCOME",
      type: "ocr",
      /*descriptions: [
              { label: 'This is a sample dynamic page.', style: {} },
              { label: 'It can contain multiple paragraphs.', style: {} },
            ], */
      //cta: {style: {'ff-button':{backgroundColor: "red"}}}
    });
    const form_consent = oneSdk.component("form", {name: "CONSENT"});
    const form_loading1 = oneSdk.component("form", {name: "LOADING", title: {label: "Loading..."}, descriptions: [{label: ""}]});
    const form_loading2 = oneSdk.component("form", {name: "LOADING", title: {label: "Extracting data..."}, descriptions: [{label: "Hold tight, this can take up to 30 seconds. Please do not referesh this page or click the 'back' button on your browser."}]});
    const form_loading3 = oneSdk.component("form", {name: "LOADING", title: {label: "Hold on..."}, descriptions: [{label: ""}]});

    const form_document = oneSdk.component("form", {
      name: "DOCUMENT",
      showPreps: true,
    });
    const form_review = oneSdk.component("form", {
      name: "REVIEW",
      type: "ocr",
    });
    
    const biometrics = oneSdk.component('biometrics');

    form_welcome.mount("#form-container");
    form_welcome.on("form:welcome:ready", () => {
      form_consent.mount("#form-container");
    });

    form_consent.on("form:consent:ready", async () => {

      form_document.mount("#form-container");
    });

    form_welcome.on("form:welcome:failed", () => {
      // display error message
    });

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

    let docType;

    form_document.on("form:document:ready", async ({inputInfo}) => {

      form_loading1.mount("#form-container");
      docType = inputInfo.documentType;
      
      const ocr = oneSdk.component("ocr", {
        documents: [{ type: docType, countries: ["AUS"] }],
      });

      ocr.mount("#form-container");
      ocr.on("ready", () => form_loading1.unmount())

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

      ocr.on("results", ({ document }) => {   
        doSomethingAfterOcr({ document })
      });

      ocr.on("loading", (display)=>{
        if(display){
          form_loading2.mount("#form-container");
        }else{
          form_loading2.unmount() 
        }
      });
    });

    function doSomethingAfterOcr({ 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);
        console.log("trying to load review screen");
        
        form_review.mount("#form-container");
        
      } else {
        console.log("No document returned");
      }
    }

    form_review.on("form:review:ready", async () => {
      biometrics.mount("#form-container");
    });

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

    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("#form-container");
      error = false;
    });

    biometrics.on("loading", (display)=>{
      if(display){
        //alert("loading, show now")
        form_loading3.mount("#form-container");
      }else{
        form_loading3.unmount() 
      }
    });

    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);
    });
     
  }

</script>

<style>
  
</style>

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

📘Initialisation

1- Render default Review form after IDV flow

2- Render E2E forms along with OCR and Biometrics modules

📘
Initialisation