HTML + Javascript

Steps to integrate the Web SDK into HTML and JavaScript application.

PreviousOverview NextAngular

Last updated 1 year ago

Was this helpful?

HTML + Javascript

Steps to integrate the Web SDK into HTML and JavaScript application.

1. Installation

To install the Preventor Web SDK, add the following to your project:

Add https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js as a script.

<script
    type="module"
    src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
></script>

You have successfully installed the Preventor Web SDK!

2. Choose how you would like to integrate the verifyme

Integrating with verifyme through pvt-button is the easiest way to integrate.

Add pvt-button tag in your HTML.

<pvt-button></pvt-button>

Set your

window.PvtVerifymeConfig = YOUR_CONFIGURATION;

A complete HTMLfile should look similar to the example below.

<!DOCTYPE html>
<html lang="en">
  <body>
    <pvt-button></pvt-button>

    <script
        type="module"
        src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
    ></script>
    <script>
      // Your configuration
      // For more details refer to the "Prefilling configs" section
      window.PvtVerifymeConfig = {
        credentials: {
          apiKey: 'YOUR_API_KEY',
          clientSecret: 'YOUR_CLIENT_SECRET',
          tenant: 'YOUR_TENANT',
          banknu: 'YOUR_BANKNU',
          env: 'YOUR_ENV',
        },
      };
    </script>
  </body>
</html>

Integrating with verifyme through pvt-verifyme is the most customizable option.

You can initiate the verification process by executing the open() function from any HTML tag. For example, you can start the process from a sidebar icon or a custom button.

It is recommended to provide a visual indicator to the user that the component has been loaded, and you can use the 'loaded' event for this purpose.

Add pvt-verifyme tag in your HTML.

<pvt-verifyme></pvt-verifyme>

window.PvtVerifymeConfig = YOUR_CONFIGURATION;

Call the open() method to open the component

const pvtVerifyme = document.querySelector('pvt-verifyme');
pvtVerifyme.open();

pvt-verifyme provides a loaded event that can be utilized to indicate when the component is being loaded. This event can be helpful, for instance, to enable a button or any other element that will open the component when clicked.

const button = document.querySelector('button');
button.addEventListener('click', () => pvtVerifyme.open())

pvtVerifyme.addEventListener('loaded', () => {
  button.disabled = false;
});

A complete HTMLfile should look similar to the example below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Preventor, Remote digital identity platform for brokers</title>
  </head>

  <body>
    <button disabled>Click me</button>
    <pvt-verifyme></pvt-verifyme>

    <script
      type="module"
      src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
    ></script>
    <script>
      // Your configuration
      // For more details refer to the "Prefilling configs" section
      window.PvtVerifymeConfig = {
        credentials: {
          apiKey: 'YOUR_API_KEY',
          clientSecret: 'YOUR_CLIENT_SECRET',
          tenant: 'YOUR_TENANT',
          banknu: 'YOUR_BANKNU',
          env: 'YOUR_ENV',
        },
      };

      const verifyme= document.querySelector('pvt-verifyme');
      const button = document.querySelector('button');
  
      button.addEventListener('click', () => verifyme.open())

      pvtVerifyme.addEventListener('loaded', () => {
        button.disabled = false;
      });
    </script>
  </body>
</html>

You have successfully Preventor SDK!

3. Prefilling configs

Prefill Flowtype

The flow type defines the biometric process so you must select a flow type.

const YOUR_CONFIGURATION = {
   // SET THE FLOW TYPE
   flowType: 'YOUR_FLOW_TYPE'
};

You must assign the flow type code. If it is blank, it will take the flow type by default.

Prefill Credentials

You must set all credentials values to correctly consume our services.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   // SET THE CREDENTIALS
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   }
};

Prefill Cif Code

The Cifcode is the unique customer profile code.

If the Cifcode is empty, a unique code is assigned.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   // SET THE CIF CODE
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
};

Prefill Desk Verification Enabled

The skipStartPage skips the start page. It's false by default

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   // 4. SET SKIP START PAGE ENABLED
   skipStartPage: true
};

Prefill Broker ID

Broker ID to be used in verification.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   skipStartPage: true,
   // SET BROKER ID
   brokerId: 'YOUR_BROKER_ID'
};

Prefill Events

It is an object that allows you to pass some callbacks to handle events of Preventor SDK.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   skipStartPage: true,
   brokerId: 'YOUR_BROKER_ID',
   // SET EVENTS LISTENER
   events: {
      onStart: () => console.log('onStart'),
      onSubmitted: (data) => console.log('onSubmitted', data),
      onFinish: (data) => console.log('onFinish', data),
      onError: code => console.log('onError', code),
   }
};

Handling Verifications

To find out if a user has completed the verification process, canceled it or there was an error. To do this, you can implement the following callback methods:

Method

Description

onStart

This callback method is triggered once a user starts the verification flow.

onSubmitted

onFinish

Method that is being called once a user clicks the "Finish" button. This event emits the same data as the onSubmitted event.

onError

This callback method fires when a user canceled the verification flow, the verification ended with an error, or the user performed an incorrect process. You can use this to find out the reason for the error.

Codes

Error codes

Code

Description

CANCELLED_BY_USER

The user cancelled the process before completion.

BIOMETRIC_AUTHENTICATION_FAILED

The user's biometric authentication failed.

SESSION_EXPIRED

The user's session timed out before completion.

BAD_STEP_BY_USER

The user made an error or incorrect input during the process.

MISSING_PARAMETERS

Required parameters were missing from the request or input.

CLIENT_NOT_FOUND

The client did not complete the enrollment process before performing the biometric authentication.

TIME_OUT

The request or process timed out before completion.

Disposition status codes

Code

Description

PASSED

Verification process passed successfully.

FAILED

Verification process failed.

PENDING

Verification process is still pending.

RETRY

Verification process failed and can be retried.

PROCESSING

Verification process is being processed by a server operation.

NEED_REVIEW

Verification process is awaiting manual review by a user.

TIMEOUT

Verification process timed out.

LOGGED_OUT

User logged out during the verification process.

LOST_CONNECTION

Connection to server lost during the verification process.

QUIT

User quit the verification process.

Flow status codes

Code

Description

IN_PROGRESS

Verification process is in progress.

ACCEPTED

Verification process has been accepted.

REJECTED

Verification process has been rejected.

ABANDONED

Verification process has been abandoned (not completed due to some reason, such as user dropping off).

PreviousOverview NextAngular

Last updated 1 year ago

Was this helpful?

1. Installation

To install the Preventor Web SDK, add the following to your project:

Add https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js as a script.

<script
    type="module"
    src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
></script>

You have successfully installed the Preventor Web SDK!

2. Choose how you would like to integrate the verifyme

Integrating with verifyme through pvt-button is the easiest way to integrate.

Add pvt-button tag in your HTML.

<pvt-button></pvt-button>

Set your

window.PvtVerifymeConfig = YOUR_CONFIGURATION;

A complete HTMLfile should look similar to the example below.

<!DOCTYPE html>
<html lang="en">
  <body>
    <pvt-button></pvt-button>

    <script
        type="module"
        src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
    ></script>
    <script>
      // Your configuration
      // For more details refer to the "Prefilling configs" section
      window.PvtVerifymeConfig = {
        credentials: {
          apiKey: 'YOUR_API_KEY',
          clientSecret: 'YOUR_CLIENT_SECRET',
          tenant: 'YOUR_TENANT',
          banknu: 'YOUR_BANKNU',
          env: 'YOUR_ENV',
        },
      };
    </script>
  </body>
</html>

Integrating with verifyme through pvt-verifyme is the most customizable option.

You can initiate the verification process by executing the open() function from any HTML tag. For example, you can start the process from a sidebar icon or a custom button.

It is recommended to provide a visual indicator to the user that the component has been loaded, and you can use the 'loaded' event for this purpose.

Add pvt-verifyme tag in your HTML.

<pvt-verifyme></pvt-verifyme>

Set your

window.PvtVerifymeConfig = YOUR_CONFIGURATION;

Call the open() method to open the component

const pvtVerifyme = document.querySelector('pvt-verifyme');
pvtVerifyme.open();

pvt-verifyme provides a loaded event that can be utilized to indicate when the component is being loaded. This event can be helpful, for instance, to enable a button or any other element that will open the component when clicked.

const button = document.querySelector('button');
button.addEventListener('click', () => pvtVerifyme.open())

pvtVerifyme.addEventListener('loaded', () => {
  button.disabled = false;
});

A complete HTMLfile should look similar to the example below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
    <title>Preventor, Remote digital identity platform for brokers</title>
  </head>

  <body>
    <button disabled>Click me</button>
    <pvt-verifyme></pvt-verifyme>

    <script
      type="module"
      src="https://sdk.preventor.com/pvtid/verifyme/verifyme.esm.js"
    ></script>
    <script>
      // Your configuration
      // For more details refer to the "Prefilling configs" section
      window.PvtVerifymeConfig = {
        credentials: {
          apiKey: 'YOUR_API_KEY',
          clientSecret: 'YOUR_CLIENT_SECRET',
          tenant: 'YOUR_TENANT',
          banknu: 'YOUR_BANKNU',
          env: 'YOUR_ENV',
        },
      };

      const verifyme= document.querySelector('pvt-verifyme');
      const button = document.querySelector('button');
  
      button.addEventListener('click', () => verifyme.open())

      pvtVerifyme.addEventListener('loaded', () => {
        button.disabled = false;
      });
    </script>
  </body>
</html>

You can find your credentials on the

You have successfully Preventor SDK!

3. Prefilling configs

Prefill Flowtype

The flow type defines the biometric process so you must select a flow type.

const YOUR_CONFIGURATION = {
   // SET THE FLOW TYPE
   flowType: 'YOUR_FLOW_TYPE'
};

You must assign the flow type code. If it is blank, it will take the flow type by default.

Prefill Credentials

You must set all credentials values to correctly consume our services.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   // SET THE CREDENTIALS
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   }
};

Prefill Cif Code

The Cifcode is the unique customer profile code.

If the Cifcode is empty, a unique code is assigned.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   // SET THE CIF CODE
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
};

Prefill Desk Verification Enabled

The skipStartPage skips the start page. It's false by default

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   // 4. SET SKIP START PAGE ENABLED
   skipStartPage: true
};

Prefill Broker ID

Broker ID to be used in verification.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   skipStartPage: true,
   // SET BROKER ID
   brokerId: 'YOUR_BROKER_ID'
};

Prefill Events

It is an object that allows you to pass some callbacks to handle events of Preventor SDK.

const YOUR_CONFIGURATION = {
   flowType: 'YOUR_FLOW_TYPE',
   credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV'
   },
   currentUserInfo: {
      cifCode: 'YOUR_CIFCODE'
   },
   skipStartPage: true,
   brokerId: 'YOUR_BROKER_ID',
   // SET EVENTS LISTENER
   events: {
      onStart: () => console.log('onStart'),
      onSubmitted: (data) => console.log('onSubmitted', data),
      onFinish: (data) => console.log('onFinish', data),
      onError: code => console.log('onError', code),
   }
};

Handling Verifications

To find out if a user has completed the verification process, canceled it or there was an error. To do this, you can implement the following callback methods:

Method

Description

onStart

This callback method is triggered once a user starts the verification flow.

onSubmitted

Method that is being called once verification data is submitted to Preventor. This event emits the following data: cifCode, ticketId, , and .

onFinish

Method that is being called once a user clicks the "Finish" button. This event emits the same data as the onSubmitted event.

onError

Codes

Error codes

Code

Description

CANCELLED_BY_USER

The user cancelled the process before completion.

BIOMETRIC_AUTHENTICATION_FAILED

The user's biometric authentication failed.

SESSION_EXPIRED

The user's session timed out before completion.

BAD_STEP_BY_USER

The user made an error or incorrect input during the process.

MISSING_PARAMETERS

Required parameters were missing from the request or input.

CLIENT_NOT_FOUND

The client did not complete the enrollment process before performing the biometric authentication.

TIME_OUT

The request or process timed out before completion.

Disposition status codes

Code

Description

PASSED

Verification process passed successfully.

FAILED

Verification process failed.

PENDING

Verification process is still pending.

RETRY

Verification process failed and can be retried.

PROCESSING

Verification process is being processed by a server operation.

NEED_REVIEW

Verification process is awaiting manual review by a user.

TIMEOUT

Verification process timed out.

LOGGED_OUT

User logged out during the verification process.

LOST_CONNECTION

Connection to server lost during the verification process.

QUIT

User quit the verification process.

Flow status codes

Code

Description

IN_PROGRESS

Verification process is in progress.

ACCEPTED

Verification process has been accepted.

REJECTED

Verification process has been rejected.

ABANDONED

Verification process has been abandoned (not completed due to some reason, such as user dropping off).