@seontechnologies/seon-id-verification

SEON ID Verification SDK for Web

Our SDK offers a comprehensive suite of features designed to cater to a wide range of document validation and recognition needs. Below is a breakdown of the key features available:

💡 Features

🤖 Document Validation and Content Verification

• Document Type Recognition: Automatically identifies the type of document presented, whether it's an ID card, passport, driver's license, or any other official document.
• Content Validation: Extracts and validates the textual information from documents, ensuring the data's integrity and accuracy. This includes checking the validity of names, dates, document numbers, and other critical information.
• Forgery Detection: Utilizes advanced algorithms to detect and alert on any signs of tampering or forgery within the document, ensuring the authenticity of the presented documents.
• Proof of Address Flow: Verifies the provided proof of address documents, by extracting and validating the textual information to ensure the address's accuracy and authenticity.

👨 Facial Recognition

• Identity Verification: Compares the facial image on the document with the person presenting it to ensure they are the same individual, enhancing security and preventing identity fraud.
• Liveness Detection: Detects real-time presence and distinguishes between a live person and a spoofing attempt, such as using photographs or videos, to ensure that the verification process is secure.

✌️ Hand Gesture Recognition

• Gesture Control: Enables interaction with devices or applications through simple hand gestures, making the user interface more intuitive and accessible.
• Complex Gesture Recognition: Our SDK can recognize complex hand gestures, offering sophisticated controls for applications requiring nuanced interactions.
• Real-time Processing: Processes and recognizes hand gestures in real-time, ensuring a seamless and responsive user experience.

🚀 Quick Installation Guide 📦

Install the Package Open a terminal in the project directory and run:

npm i @seontechnologies/seon-id-verification

💻 Get started

TypeScript

When you using typescript in you're application, to avoid errors from custom elements, extend your application's types by declaring custom elements as part of your global type definitions. This lets TypeScript recognize these elements as valid, preventing any complaints about unknown tags when you use them in your application. Essentially, it's about teaching TypeScript about your custom elements to ensure type safety and avoid errors during compilation or development.

React.js example

import { SeonIdVerificationService } from '@seontechnologies/seon-id-verification';
import '@seontechnologies/seon-id-verification/styles';
import { useEffect } from 'react';

export default function SeonIdVerification() {
  useEffect(() => {
    SeonIdVerificationService.initialize({
      baseUrl: 'YOUR_BASE_URL',
      SEONCustomerData: {
        licenseKey: 'YOUR_LICENSE_KEY',
        referenceId: 'YOUR_REFERENCE_ID',
        type: 'id-verification',
        email: '[e-mail]',
        phoneNumber: '[phone]',
        name: 'Test Elek',
        userId: 'test-elek',
        countryISOCode: 'us',
        address: '132, My Street, New York 12',
        templateId: 'YOUR_TEMPLATE_ID',
        dateOfBirth: {
          day: 1,
          month: 1,
          year: 2000,
        };
        postalCode: '12345',
        additionalProperties: {
          additionalProp1: 'value1',
          additionalProp2: 'value2',
          additionalProp3: 'value3'
        }
      },
      language: 'en'
    }).then(() => {
      SeonIdVerificationService.on('error', err => {
        console.log('Error code: ', err);
      });
      SeonIdVerificationService.on('start', data => {
        console.log('Event name: ', data);
      });
      SeonIdVerificationService.on('completed', data => {
        console.log('Event name: ', data);
      });

      //SeonIdVerificationService.start();
    });
  }, []);

  return (
    <>
      {/* Or you can call after the event listeners are assigned */}
      <button onClick={() => SeonIdVerificationService.start()}>
        Start verification
      </button>
    </>
  );
}

Angular 2 example:

import { Component } from '@angular/core';
import { SeonIdVerificationService } from '@seontechnologies/seon-id-verification';
import '@seontechnologies/seon-id-verification/styles';

@Component({
  selector: 'seon-id-verification-component',
  standalone: true,
  template: ''
})
export class SeonIdVerificationComponen {
  title = 'angular-17';
  constructor() {
    this.handleSeonIdVerificationService();
  }

  handleSeonIdVerificationService() {
    SeonIdVerificationService.initialize({
      baseUrl: 'YOUR_BASE_URL',
      SEONCustomerData: {
        licenseKey: 'YOUR_LICENSE_KEY',
        referenceId: 'YOUR_REFERENCE_ID',
        type: 'id-verification',
        email: '[e-mail]',
        phoneNumber: '[phone]',
        name: 'Test Elek',
        userId: 'test-elek',
        countryISOCode: 'us',
        address: '132, My Street, New York 12',
        templateId: 'YOUR_TEMPLATE_ID',
        dateOfBirth: {
          day: 1,
          month: 1,
          year: 2000,
        };
        postalCode: '12345',
        additionalProperties: {
          additionalProp1: 'value1',
          additionalProp2: 'value2',
          additionalProp3: 'value3'
        }
      },
      language: 'en'
    }).then(() => {
      SeonIdVerificationService.on('error', err => {
        console.log('Error code: ', err);
      });
      SeonIdVerificationService.on('start', data => {
        console.log('Event name: ', data);
      });
      SeonIdVerificationService.on('completed', data => {
        console.log('Event name: ', data);
      });

      SeonIdVerificationService.start();
    });
  }
}

SSR example with Next.js:

When using SSR in any framework or library you need to import the package on the client. You can't run it on the server.

'use client';

import { useEffect } from 'react';
import '@seontechnologies/seon-id-verification/styles';

export default function SeonIdVerification() {
  useEffect(() => {
    import('@seontechnologies/seon-id-verification').then(module => {
      const SeonIdVerificationService = module.SeonIdVerificationService;

      SeonIdVerificationService.initialize({
        baseUrl: 'YOUR_BASE_URL',
        SEONCustomerData: {
          licenseKey: 'YOUR_LICENSE_KEY',
          referenceId: 'YOUR_REFERENCE_ID',
          type: 'id-verification',
          email: '[e-mail]',
          phoneNumber: '[phone]',
          name: 'Test Elek',
          userId: 'test-elek',
          countryISOCode: 'us',
          address: '132, My Street, New York 12',
          templateId: 'YOUR_TEMPLATE_ID',
          dateOfBirth: {
            day: 1,
            month: 1,
            year: 2000,
          };
          postalCode: '12345',
          additionalProperties: {
            additionalProp1: 'value1',
            additionalProp2: 'value2',
            additionalProp3: 'value3'
          }
        },
        language: 'en'
      }).then(() => {
        SeonIdVerificationService.on('error', err => {
          console.log('Error code: ', err);
        });
        SeonIdVerificationService.on('start', data => {
          console.log('Event name: ', data);
        });
        SeonIdVerificationService.on('completed', data => {
          console.log('Event name: ', data);
        });

        SeonIdVerificationService.start();
      });
    });
  }, []);

  return null;
}

Vanilla JavaScript

import { SeonIdVerificationService } from '@seontechnologies/seon-id-verification';
//importing the css file is can be different depending on the bundler you are using
import '@seontechnologies/seon-id-verification/styles';

SeonIdVerificationService.initialize({
  baseUrl: 'YOUR_BASE_URL',
  SEONCustomerData: {
    licenseKey: 'YOUR_LICENSE_KEY',
    referenceId: 'YOUR_REFERENCE_ID',
    type: 'id-verification',
    email: '[e-mail]',
    phoneNumber: '[phone]',
    name: 'Test Elek',
    userId: 'test-elek',
    countryISOCode: 'us',
    address: '132, My Street, New York 12',
    templateId: 'YOUR_TEMPLATE_ID',
    dateOfBirth: {
      day: 1,
      month: 1,
      year: 2000,
    };
    postalCode: '12345',
    additionalProperties: {
      additionalProp1: 'value1',
      additionalProp2: 'value2',
      additionalProp3: 'value3'
    }
  },
  language: 'en'
}).then(() => {
  SeonIdVerificationService.on('error', err => {
    console.log('Error code: ', err);
  });
  SeonIdVerificationService.on('start', data => {
    console.log('Event name: ', data);
  });
  SeonIdVerificationService.on('completed', data => {
    console.log('Event name: ', data);
  });

  SeonIdVerificationService.start();
});

⚙️ Initializer Configuration Object

The configuration object used in the SEON ID verification service initializer function. Below is the detailed structure and description of its fields.

configuration object

TBaseConfigOptions
├── baseUrl: string
├── language?: string (lowercase ISO code)
└── SEONCustomerData: object
    ├── licenseKey: string
    ├── referenceId: string
    ├── type?: string
    ├── email?: string
    ├── phoneNumber?: string
    ├── name?: string
    ├── userId?: string
    ├── countryISOCode?: string
    ├── address?: string
    ├── additionalProperties?: object
    │   └── [key: string]: any
    ├── templateId?: string
    ├── dateOfBirth?: object
    │   ├── day: number
    │   ├── month: number
    │   └── year: number
    └── postalCode?: string

🔑 Fields

baseUrl

• Type: string
• Description: The base URL for the SEON ID verification service.

language

• Type: string (optional)
• Description: The language ID to use (lowercase ISO code).

SEONCustomerData

• Type: object
• Description: Contains customer data required for the SEON ID verification service.

  licenseKey

  • Type: string
  • Description: The client's license key.

  referenceId

  • Type: string
  • Description: The client's reference ID. A unique identifier for the verification session.

  type

  • Type: string (optional)
  • Description: The type of verification.

  email

  • Type: string (optional)
  • Description: The client's email address.

  phoneNumber

  • Type: string (optional)
  • Description: The client's phone number.

  name

  • Type: string (optional)
  • Description: The client's name.

  userId

  • Type: string (optional)
  • Description: The client's user ID.

  countryISOCode

  • Type: string (optional)
  • Description: The client's country ISO code.

  address

  • Type: string (optional)
  • Description: The client's address.

  templateId

  • Type: string (optional)
  • Description: The template ID to use.

  dateOfBirth

  • Type: object (optional)
  • Description: The client's date of birth.
  • Fields:
    • day: number
    • month: number
    • year: number

  postalCode

  • Type: string (optional)
  • Description: The client's postal code.

  additionalProperties

  • Type: object (optional)
  • Description: Additional properties in key-value pairs.
  • Fields:
    • [key: string]: any
    • Description: Key-value pairs for additional properties as needed.

🎫 Event listeners

Example of on events. The reference function will fired when the event is occurred.

seonIdVerificationService.on('eventName', () => {
  console.log('Event fired');
});

Example of on error event. The reference function will fired when the event is occurred.

seonIdVerificationService.on('error', err => {
  console.log('Error:', err);
});

List of events

eventName	description	type	value
completed	When the sdk flow is finished successfully	string	name of the event
completedSuccess	When the sdk flow is completed successfully	string	name of the event
completedPending	When the sdk flow is completed but pending	string	name of the event
completedFailed	When the sdk flow is completed but failed	string	name of the event
start	When the flow is started	string	name of the event
cancelled	When the sdk flow is cancelled	string	name of the event
error	When some error occurred in the sdk	string	"error_code_1", "error_code_2", "error_code_3", "error_code_4", "error_code_5", "error_code_6"

🖍️ styling

You can customize the appearance of the SEON ID verification service UI by modifying the CSS variables. The SDK provides a set of CSS variables that you can use to change the base colors and font of the UI. Below is a list of the available CSS variables and their default values:

.tw-idverif-scope {
  /*light theme*/
  --idverif-light-base-text-on-light: 20, 21, 23;
  --idverif-light-base-text-on-dark: 255, 255, 255;
  --idverif-light-base-accent: 0, 99, 255;
  --idverif-light-base-on-accent: 255, 255, 255;

  /*dark theme*/
  --idverif-dark-base-text-on-light: 255, 255, 255;
  --idverif-dark-base-text-on-dark: 255, 255, 255;
  --idverif-dark-base-accent: 65, 133, 242;
  --idverif-dark-base-on-accent: 255, 255, 255;

  /*font family*/
  --idverif-font-family: 'idverif-default', sans-serif;
  --idverif-font-url: url('./fonts/Inter-VariableFont_slnt.ttf');
  --idverif-font-weight: 400 500 600 700 800 900;
}

The color codes are RGB values without the 'rgb()' wrapper, and they will be transformed into RGBA values at runtime.

🕸️ Compatibility

Browser	Version
Chrome	96
Safari	15
Firefox	79
Opera	82
iOS Safari	15
Android Browser	81
Chrome for android	96
Firefox for android	79

📝 License Terms

The detailed license terms can be viewed at the following link: ®️SEON License Terms.