@uveritech/scandoc-onboarding

Overview

Digital Identity Verification Module

Use cases

• Capture and determination of the document type
• Capture of pdf417
• Capture of MRZ
• Capture of faces

Recommendations

Use a modern phone with a good camera having the definition of not less than 8 megapixels. The capture must be made in a well-lighted room. A document must be located at the uniform background.

Limitations

This component works in phones with the operating system Android in the browser Chrome (minimum version 52) and in phones with the operating system iOS (minimum version 11) in the browser Safari

Installation

$ npm install scandoc-onboarding

This component contains JS, CSS files which require the mandatory import into your project.

1. After installing the Node package from NPM you will need to copy the networks folder from the Node package's directory to a location where static assets can be accessed at runtime.

2. Import the library and css to your project.

import ScanWrap from 'scandoc-onboarding';
import 'scandoc-onboarding/dist/css/onboarding.css';

Initialization

1. Create an instance of the object.

const lib = new ScanWrap({
  el: "videoCapturingEl",
  domainApi: "https://fraudfighter.azure-api.net/doc-router",
  customerKey: "00000000-0000-0000-0000-000000000000",
  domainId: '00000000-0000-0000-0000-000000000000',
  publicKey: 'pk_00000000-0000-0000-0000-000000000000',
});

el (string) - id of an element on the page where the component will be integrated. Required.

domainApi (string) - URL address of backend API. Required.

customerKey (string) - Web API Customer Key. Required.

domainId (string) - domain id where from will get configs and styles. Required.

publicKey (string) - Web API Public Key. Required.

2. Configure routing for the desktop (/) and embedded (/embedded) screens.

const router = createBrowserRouter([
  {
    path: "/embedded",
    element: <Scan /> ,
  },
  {
    path: "/",
    element: <Scan /> ,
  },
]);

Example

App.js

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Scan from "./Scan";

const router = createBrowserRouter([
  {
    path: "/embedded",
    element: <Scan /> ,
  },
  {
    path: "/",
    element: <Scan /> ,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Scan.js

import React, { useEffect } from "react";
import ScanWrap from "scandoc-onboarding";
import "scandoc-onboarding/dist/css/onboarding.css";

function Scan() {
  useEffect(() => {
    const lib = new ScanWrap({
      el: "videoCapturingEl",
      domainApi: "https://fraudfighter.azure-api.net/doc-router",
      customerKey: "00000000-0000-0000-0000-000000000000",
      domainId: '00000000-0000-0000-0000-000000000000',
      publicKey: 'pk_00000000-0000-0000-0000-000000000000',
    });
  });
  return (
    <div className="App">
      <div id="videoCapturingEl"></div>
    </div>
  );
}

export default Scan;