Web SDK Customer Onboarding (KYC) integration v2

Owned by Simonas Jokubauskas
Last updated: yesterday at 18:41 by Priit Aavik
12 min read

 

Table of Contents

Introduction

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

Latest version

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.

  • 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.

  • 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?

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?

  • 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.

Changelog