HTML + Javascript

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

1. Installation
To install the Preventor Web SDK, add the following to your project’s:
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
Built-in button UI (pvt-button)
pvt-verifyme
1.Add pvt-button tag in your HTML.
<pvt-button></pvt-button>
​
2.Set your configuration​
window.PvtVerifymeConfig = YOUR_CONFIGURATION;
​
3.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>
      window.PvtVerifymeConfig = YOUR_CONFIGURATION;
    </script>
  </body>
</html>
1.Add pvt-verifyme tag in your HTML.
<pvt-verifyme></pvt-verifyme>
​
2.Set your configuration​
window.PvtVerifymeConfig = YOUR_CONFIGURATION;
​
3.Call the open() method to open the component
const pvtVerifyme = document.querySelector('pvt-verifyme');
pvtVerifyme.open();
​
4.pvt-verifyme has an event loaded; this event is very useful. For instance, you can use it to enable the button (or any other element) that will open the component. 
const button = document.querySelector('button');
button.addEventListener('click', () => pvtVerifyme.open())
​
pvtVerifyme.addEventListener('loaded', () => {
  button.disabled = false;
});
​
​
5.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>
      window.PvtVerifymeConfig = YOUR_CONFIGURATION;
​
      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: () => console.log('onSubmitted'),
      onFinish: () => console.log('onFinish'),
      onError: code => console.log('onError', code),
   }
};
4. 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.
onFinish
Method that is being called once a user clicks the "Finish" button.
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.
Error codes: 
CANCELLED_BY_USER
BIOMETRIC_AUTHENTICATION_FAILED
BAD_STEP_BY_USER MISSING_PARAMETERS

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.
`onFinish`	Method that is being called once a user clicks the "Finish" button.
`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. Error codes: `CANCELLED_BY_USER` `BIOMETRIC_AUTHENTICATION_FAILED` `BAD_STEP_BY_USER MISSING_PARAMETERS`

getting started - Previous

Overview

Next - web - client-side SDKs

Angular

Last modified 1mo ago