Customer Onboarding Web SDK integration v1

📁 Table of Contents

ℹ️ Introduction

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

• See examples.

🔢 Latest version

v1.0.11

🚥 Compatibility

• 🟢 Supported: Only for web browsers (Chrome, Firefox, Safari, Edge etc.).

• 🔴 Not supported: WebView, Native application languages like React-Native, Flutter etc. For that, please refer to Mobile SDK.

📂 How to install?

SDK flow explained in a sandbox environment:

• There are 2 ways to use the IDV SDK:

  1. Via npm - @Ondato-public/idv-sdk

  2. By adding a script to an application <script src="{baseUrl}/index.1.x.x.min.js"></script>

The SDK can be utilized by generating an idv ID or by using idv setupId (where the idv id is generated automatically).

🔀 Flows explained

• Customize the script with the following required properties:

  • IdvSdk.load({
              mode: IdvSdkMode.Sandbox,
              onSuccess: (props) => console.log('onSuccess', props),
              onFailure: (props) => console.log('onFailure', props),
              onClose: () => console.log('onClose'),
            });

    • Both begin() and load() should be used in try catch block.

    • load()

      1. Purpose: Configures api.

      2. Returns begin() and end() methods if success

      3. mode interface(for setting environment):

         • declare enum IdvSdkMode {
             Production = "Production",
             Sandbox = "Sandbox"
           } 

      4. Exceptions explained:

         declare enum IdvSdkLoadFailure {
            NotSupportedMode = 'NotSupportedMode' // incorrect mode(environemnt) provided
         }

• Events

  • onSuccess and onFailure: callback with returned props, onClose without props.

  • On every callback idv sdk application is closed.

  • Exceptions explained:

    declare enum IdvSdkProcessFailure {
        ConsentDeclined = "ConsentDeclined", // if user declines consent, sdk application is closed and error is returned
        CurrentSessionIdvIdAndPassedIdvIdMismatch = "CurrentSessionIdvIdAndPassedIdvIdMismatch", // idvId was provided and retry: true flag is set but different idvId was provided in the session error is returned. Only valid for F5(refresh page) cases.
        FailureExit = "FailureExit", // When idv process gives a dead end reason and idv identification process failed, user is prompted with exit from sdk application button. Button is clicked - sdk application is closed and FailureExit is returned.
        Generic = "Generic", // An error during sdk application flow happened and we cannot provide the exact reason why the process failed. Sdk closes and returns Generic error. (Something similar like internal server error)
        NoIdvContainer = "NoIdvContainer", // If user closes sdk application in an unknown way and there is still an sdk application instance running.
        InvalidIdvId = "InvalidIdvId", // no accessToken and no idvId case.
        Unauthorized = "Unauthorized", // in case of invalid idvId, in case of expired idvId, in case of any other way invalidated idvId, in case of completed idvId, in case of idvId that does not belong to accessToken etc.
        Aborted = "Aborted", // if user aborts the process.
    }

• After setting up properties for IDV SDK load({mode,onSuccess, onFailure})

  • begin()

    • Purpose: Creates idv session.

    • Props explained:

      idvSdk?.begin({
        idvSetupId: 'xxxxxx-xxxx', // Either setupid or idvId needs to be provided, idvId overrides setupId property
        idvId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // unique idvId
        retry: false, // set to true if idvId is saved in the session storage for example so that browser page could be refreshed multiple times without needing to generate new idvId.
        language?: 'bg-BG' // possible languages are listed below or can be found in the interface 
      });
        
      declare enum IdvLanguage {
        BgBg = 'bg-BG',
        CaEs = 'ca-ES',
        CsCz = 'cs-CZ',
        DeDe = 'de-DE',
        EnGb = 'en-GB',
        EsEs = 'es-ES',
        EtEe = 'et-EE',
        FrFr = 'fr-FR',
        LtLt = 'lt-LT',
        LvLv = 'lv-LV',
        NlNl = 'nl-NL',
        PlPl = 'pl-PL',
        PtBr = 'pt-BR',
        RoRo = 'ro-RO',
        RuRu = 'ru-RU',
        SqAl = 'sq-AL',
        UkUa = 'uk-UA',
        ViVn = 'vi-VN',
      }        

    • When using idvId, it is recommended to save the idvID in your application's session storage.

      • In the case of an F5 (page refresh), the same id will be used, and the same session will be loaded. If you encounter this scenario, retry: true should only be set after the refresh. Otherwise, when refreshing the page, idvId would be invalidated.

    • Exceptions explained:

      declare enum IdvSdkBeginFailure {
      	CantBeUsedInIframe = "CantBeUsedInIframe", // Consumer cannot use this sdk in iframe. We restrict usage due to requiring full screen
      	NoIdvId = "NoIdvId", // idvId or idv setup id was not provided
      	NotSupportedMode = "NotSupportedMode",// check if provided mode is invalid according to SdkMode 
      	ProcessStarted = "ProcessStarted", // if multiple idv begin were started error. You cannot start multiple identifications in the same page simultaniously. 
      	StartFailed = "StartFailed" //  if sdk applications has crashed for some reason when trying to initially load the sdk application. Due to nework error etc. 
      }

  • end()

    • Closes SDK application without error. Cleans up all sdk tasks and application.

    • Props: does not accept any properties.

🖌️ Customization

• customiseStyle(options)

  • This function allows to set some IDV SDK styles.

  • Optional.

  • Call before begin() method. to applie style.

    • Options:

      const options: IdvCustomiseStyleProps = {
        background: { // IDV SDK backround styles (optional).
          /**
          * IDV SDK backround opacity.
          * CSS property opacity.
          * Default is 0.9.
          */
          opacity?: number | null;
      
          /**
          * IDV SDK backround blur.
          * The radius of the blur in px / rem / em / etc.
          * Default is 0.375rem.
          */
          blur?: string | null;
        }
      }

• version() returns current sdk version

🗃️ Examples

1️⃣ Script

2️⃣ npm (React example):

1. specify registry in .npmrc

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

2. in package.json specify version “@ondato-public/idv-sdk": "1.x.x" and npm install

3. Example import can be found in App.tsx in idv_sdk_npm_example zip

🗂️ Extra

1️⃣ Interfaces and declarations files

2️⃣ 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