ID Selection

Description

You can use the OCR Document screen to load a list of accepted ID types before running OCR, to meet your requirements.

Default Document screen

Configuration

ID Prep screens

If you set showPrep to true, you will see the following screens depending on the ID type you select:

Events

Sample code

const form_document = oneSdk.component("form", {
  name: "DOCUMENT",
  type: "ocr",
  documents: [
    {
      type: "DRIVERS_LICENCE",
    },
    {
      type: "PASSPORT",
    }
  ],
  showPreps: true,
});

form_document.on("form:document:ready", async ({inputInfo}) => {
  docType = inputInfo.documentType;
  
  // run OCR with the selected documentType
});

Running OCR module

Once form:document:ready gets triggered, you will receive a documenType parameter based on whatever user has selected. Then, you can load OCR module with the specific document type. You can also send a list of accepted countries to the OCR module.

📘

Force a document type for OCR

When you run OCR module with a specific document type and country, if the user captures another ID, it doesn't proceed with OCR extraction and you will receive an input_required event.

Note, this feature is only available with Incode at the moment.

form_document.on("form:document:ready", async ({inputInfo}) => {
  
  console.log(inputInfo.documentType);
  docType = inputInfo.documentType;
  
  const ocr = oneSdk.component("ocr", {
    documents: [{ type: docType, countries: ["AUS"] }],
  });
  
  ocr.mount("<YOUR_DIV_ELEMENT>");

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

  ocr.on("results", ({ document }) => {
      
    // show a review screen after OCR
  }
  );

});

Styling customisation

You can use the following classes to customise the styling for different elements of the page. These CSS classes applies to the common elements across all the screens. If you want to specifically customise a specific page, you can use the above configuration to overwrite it.

The following code shows you how to style a specific element on the page, in this example the button's background color will be green, instead of the default blue.

<style> 
    #<you_div_container> .ff-button {
      background-color: green;
    }
 </style>