Web SDK Customer Onboarding (KYC) integration v2

Table of Contents

1 Introduction
2 Latest version
3 Compatibility
4 Getting started with npm
- 4.1 Prerequisites
- 4.2 Example npm
5 Getting started with javascript Script
- 5.1 Prerequisites
- 5.2 Example script
6 Flows explained
- 6.1 load()
- 6.2 exampleSdk.idv.customiseStyleonload()
- 6.3 exampleSdk.idv.begin()
- 6.4 exampleSdk.idv.end()
- 6.5 How to generate IDV ID?
7 Frequently Asked Questions (FAQs)
8 Changelog

Introduction

The current flow only allows using the Web Browser SDK by installing it through npm or using it as a script.

Latest version

Latest Major version is v2.x.x
Refer to Changelog for latest versions and changes.

Compatibility

Supported: Only web browsers (Chrome, Firefox, Safari, Edge etc.).
Not supported: Native application languages like React-Native, Flutter etc.

Getting started with npm

To begin, run the following command:

npm install @ondato-public/idv-sdk

Prerequisites

Adjusted .npmrc file with custom registry.

@ondato-public:registry=https://pkgs.dev.azure.com/Ondato/PublicNPM/_packaging/ondato-public-npm/npm/registry/

Obtain your unique idv setupId. Process configuration is specified based on your needs.
- Please reach out to [support@ondato.com] for assistance.
The SDK can be utilized by generating an idv ID or by using idv setupId (where the idv id is generated automatically)
Verify the Web browser version limitations.
- Refer to the documentation here.
Review npm examples for a better understanding.

Example npm

Download example here

// Typescript React example
import { memo, ReactElement, useCallback, useState } from 'react';

import { 
  AvailableLanguage, 
  load, 
  SdkMode, 
  version,
  SdkLoadResult,
  SdkOnSuccessResult,
  SdkOnFailureResult,
  SdkOnCloseResult } from '@ondato-public/idv-sdk';


export const AppNew = memo((): ReactElement => {
  const [idvSetupId, setIdvSetupId] = useState('');

  const [idvId, setIdvId] = useState('');
  const [language, setLanguage] = useState('');
  const [sdkIdv, setSdkIdv] = useState<SdkLoadResult | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);

  const loadHandler = useCallback(() => {
    try {
      const idv = load({
        mode: SdkMode.Production,
      });

      setSdkIdv(idv);
      setIsLoaded(true);
    } catch (error) {
      console.warn('IdvSdkLoadFailure', error);
      alert(`IdvSdkLoadFailure, ${error}`);
    }
  }, []);

  const beginHandler = useCallback(async () => {
    try {
      if (sdkIdv?.idv.begin) {
        await sdkIdv.idv.begin({
          idvSetupId: idvSetupId.trim(),
          idvId: idvId.trim(),
          language: language.trim() as AvailableLanguage,
          onSuccess: (props: SdkOnSuccessResult) => {
            console.log('onSuccess', { idvId: props.id });
            alert(`onSuccess, idvId: ${props.id}`);
          },
          onFailure: (props: SdkOnFailureResult) => {
            console.log('onFailure', {
              idvId: props.id,
              reason: props.reason,
            });
            alert(`onFailure, idvId: ${props.id}, reason: ${props.reason}}`);
          },
          onClose: (props: SdkOnCloseResult) => {
            console.log('onClose ', props.id);
          },
        });
      }
    } catch (error) {
      console.warn('IdvSdkBeginFailure', error);
      alert(`IdvSdkBeginFailure, ${error}`);
    }
  }, [idvId, sdkIdv, idvSetupId, language]);

  const versionHandler = useCallback(() => {
    alert(version());
  }, []);

  const endHandler = useCallback(() => {
    sdkIdv?.idv.end();
  }, [sdkIdv]);

  return (
    <>
      <button type="button" disabled={isLoaded} onClick={loadHandler}>
        Load IDV
      </button>

      <button type="button" onClick={versionHandler}>
        SDK version
      </button>
      <button type="button" disabled={!isLoaded} onClick={beginHandler}>
        Begin IDV
      </button>

      <button
        type="button"
        className="end-action"
        onClick={endHandler}
        disabled={!isLoaded}
      >
        X
      </button>

      <div className="input-group">
        <input
          type="text"
          placeholder="IDV Setup Id"
          value={idvSetupId}
          onChange={(event) => setIdvSetupId(event.target.value)}
        />
        <input
          type="text"
          placeholder="IDV Id"
          value={idvId}
          onChange={(event) => setIdvId(event.target.value)}
        />
        <input
          type="text"
          className="short-input"
          placeholder="en-GB (optional)"
          value={language}
          onChange={(event) => setLanguage(event.target.value)}
        />
      </div>
    </>
  );
});

Typescript:

Full TypeScript support is available. Full list *.d.ts types can be downloaded from script examples or when installed through npm.

Getting started with javascript Script

To begin, run the following command:

Prerequisites

Download script build files.
Ensure the script is configured with the correct ondato-sdk library build file in the index.html.
Obtain your unique idv setupId. Process configuration is specified based on your needs.
- Please reach out to [support@ondato.com] for assistance.
The SDK can be utilized by generating an idv ID or by using idv setupId (where the idv id is generated automatically)
Verify the Web browser version limitations.
- Refer to the documentation here.

Example script

Download example here

Flows explained

To illustrate how to implement flows, consider the following code snippet:

`load()`

Purpose: To invoke the initial Web SDK instance.
Return: On success, it provides the idv.begin() and idv.end() methods.
Accepted property: The mode interface (used for setting the environment).

Possible exceptions:

`exampleSdk.idv.customiseStyleonload()`

Purpose: This function enables customization of certain CSS styles within the SDK.
Accepted property: ({ background: { opacity: 0, blur: '0' } })

`exampleSdk.idv.begin()`

`exampleSdk.idv.end()`

How to generate IDV ID?

Generate idvID fromhttps://sandbox-idvapi.ondato.com/swagger/index.html → post /v1/identity-verifications
- Provide correct and existing setupId.
- Each unique session requires a new generation

Frequently Asked Questions (FAQs)

Why should both the begin() and load() methods be used within a try-catch block?
- Both methods should be utilized within a try-catch block to ensure proper error handling.
What happens to the session id during an F5 (page refresh)?
- In the event of an F5 (page refresh), the same session id will be retained, allowing the same session to be loaded seamlessly.
Where can I find a list of available languages?
- For a list of available languages, refer to the documentation here: Localization | 🗣️ Supported languages
What is IdvId and idv setupId
- Idv id is process session id (each session has a uniquely generated idvId), and idv setupid id is unique static client configration id (static id always remains the same)
What is Idv
- Idv is a shortname and stands for identity verification.

Ondato

Web SDK Customer Onboarding (KYC) integration v2

Analytics

Introduction

Latest version

Compatibility

Getting started with npm

Prerequisites

Example npm

Getting started with javascript Script

Prerequisites

Example script

Flows explained

`load()`

`exampleSdk.idv.customiseStyleonload()`

`exampleSdk.idv.begin()`

`exampleSdk.idv.end()`

How to generate IDV ID?

Frequently Asked Questions (FAQs)

Changelog

Related content