Implementation

The startOcr function opens the native document capture flow, sends the images to QI Tech's OCR API and returns the keys of the processed images.

Mobile Token

We use a Mobile Token to allow your application authenticated access to our API. It has probably already been sent to you by email. If you have not received your token yet, send an email to suporte.caas@qitech.com.br.

Warning

Each environment (SANDBOX and PRODUCTION) requires a different Mobile Token.

Function signature

const result = await startOcr(
  environment,   // CAAS_ENVIRONMENT
  mobile_token,  // string
  document,      // CAAS_DOCUMENT_TYPE
  options        // OcrOptions (optional)
);

Customizations are optional and passed through the options object, described in The OcrOptions object.

Minimal example

import { CAAS_ENVIRONMENT, CAAS_DOCUMENT_TYPE, startOcr } from '@qitech/react-native-caas';

const response = await startOcr(
  CAAS_ENVIRONMENT.SANDBOX,
  '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  CAAS_DOCUMENT_TYPE.CNH
);

const { DocumentRecognitionResponse } = JSON.parse(response);
console.log(DocumentRecognitionResponse);

Warning

The startOcr Promise resolves with a JSON string, not an object. You must call JSON.parse() on the response. See Collecting the Responses.

Complete example

import * as React from 'react';
import { View, Button } from 'react-native';
import {
  CAAS_ENVIRONMENT,
  CAAS_DOCUMENT_TYPE,
  CAAS_FONT_FAMILY,
  CAAS_LOG_LEVEL,
  startOcr,
} from '@qitech/react-native-caas';

const config = {
  ocrMobileToken: '<YOUR_MOBILE_TOKEN_SENT_BY_QITECH>',
  environment: CAAS_ENVIRONMENT.SANDBOX,
  sessionId: '<SESSION_ID>',
  fontColor: '#5dcfe3',
  backgroundColor: '#f5f3f0',
  fontFamily: CAAS_FONT_FAMILY.VERDANA,
  showIntroductionScreens: true,
  showSuccessScreen: true,
  logLevel: CAAS_LOG_LEVEL.DEBUG,
};

export default function App() {
  const [documentType] = React.useState<CAAS_DOCUMENT_TYPE>(CAAS_DOCUMENT_TYPE.CNH);

  const startDocumentOcr = () => {
    startOcr(config.environment, config.ocrMobileToken, documentType, {
      session_id: config.sessionId,
      font_color: config.fontColor,
      background_color: config.backgroundColor,
      font_family: config.fontFamily,
      show_introduction_screens: config.showIntroductionScreens,
      show_success_screen: config.showSuccessScreen,
      onboarding_text_configuration: {
        onboarding_title: 'Important tips',
        onboarding_first_label: 'Go to a well-lit place',
        onboarding_second_label: 'Remove the document from plastic',
        onboarding_third_label: 'Make sure the document is properly framed',
      },
      log_level: config.logLevel,
    })
      .then((response) => {
        const { DocumentRecognitionResponse } = JSON.parse(response as string);

        if (DocumentRecognitionResponse.length === 1) {
          const { ocr_key, document_type } = DocumentRecognitionResponse[0];
          console.log('Ocr key: ' + ocr_key + ' document type: ' + document_type);
        } else if (DocumentRecognitionResponse.length === 2) {
          // Front-and-back flows return two keys, one for each photo
          const { ocr_front_key } = DocumentRecognitionResponse[0];
          const { ocr_back_key } = DocumentRecognitionResponse[1];
          console.log('Ocr front key: ' + ocr_front_key + ' / Ocr back key: ' + ocr_back_key);
        }
      })
      .catch((error) => {
        console.log('Error executing Ocr. Error: ' + error);
      });
  };

  return (
    <View>
      <Button title="Start OCR" onPress={startDocumentOcr} />
    </View>
  );
}

Capture flow by document type

The document parameter defines how many captures the user performs and, consequently, how many items the response contains.

Document type	Captures	Response
CAAS_DOCUMENT_TYPE.CNH_FULL	1 (open CNH)	1 item with ocr_key
CAAS_DOCUMENT_TYPE.CNH_DIGITAL	1 (digital CNH PDF)	1 item with ocr_key
CAAS_DOCUMENT_TYPE.ADDRESS	1 (proof of address)	1 item with ocr_key
CAAS_DOCUMENT_TYPE.RG_CIN_DIGITAL	1 (digital RG/CIN PDF)	1 item with ocr_key
CAAS_DOCUMENT_TYPE.CNH	2 (front and back)	2 items: ocr_front_key and ocr_back_key
CAAS_DOCUMENT_TYPE.RG	2 (front and back)	2 items: ocr_front_key and ocr_back_key
CAAS_DOCUMENT_TYPE.RNE	2 (front and back)	2 items: ocr_front_key and ocr_back_key
CAAS_DOCUMENT_TYPE.CRNM	2 (front and back)	2 items: ocr_front_key and ocr_back_key

Sample apps

The module repository contains two ready-to-run apps, in the examples folder:

• QITechReactNativeExample — pure React Native
• QITechExpoExample — Expo

In both, App.tsx demonstrates the full usage (Face Recognition + OCR + Device Scan) with @qitech/react-native-caas, and App_ds.tsx demonstrates Device Scan only with @qitech/react-native-device-scan. Replace the sample tokens and API keys with your credentials. If you have not received them yet, contact suporte.caas@qitech.com.br.