HTML + Javascript

Verification Flow
1. Installation
To install the Preventor Web SDK,  add the following to your project’s:
1.Add pvt-button tag in your HTML.
1
<pvt-button></pvt-button>
Copied!
2. Add https://unpkg.com/@preventor/button as a script.
1
<script type="module" src="https://unpkg.com/@preventor/button"></script>
Copied!
3. A complete HTMLfile should look similar to the example below.
1
<!DOCTYPE html>
2
<html lang="en">
3
  <body>
4
    <pvt-button></pvt-button>
5
​
6
    <script type="module" src="https://unpkg.com/@preventor/button"></script>
7
  </body>
8
</html>
Copied!
You have successfully installed the Preventor Web SDK!
2. Initialize the Web SDK
To initialize the SDK, you must provide the configuration in the "initialize" method, this method is available after the "loaded" event.
See the coding example below:
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   pvtButton.initialize(YOUR_CONFIGURATION);
5
});
Copied!
You have successfully initialize the Preventor SDK!
3. Prefilling configs
Prefill Flowtype
The flow type defines the biometric process so you must select a flow type.
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   const config = {
5
      // 1. SET THE FLOW TYPE
6
      flowType: 'YOUR_FLOW_TYPE'
7
   };
8
   pvtButton.initialize(config);
9
});
Copied!
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.
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   const config = {
5
      flowType: 'YOUR_FLOW_TYPE',
6
      // 2. SET THE CREDENTIALS
7
      credentials: {
8
         apiKey: 'YOUR_API_KEY',
9
         clientSecret: 'YOUR_CLIENT_SECRET',
10
         tenant: 'YOUR_TENANT',
11
         banknu: 'YOUR_BANKNU',
12
         env: 'YOUR_ENV'
13
      }
14
   };
15
   pvtButton.initialize(config);
16
});
Copied!
Prefill Cif Code
The Cifcode is the unique customer profile code. 
If the Cifcode is empty, a unique code is assigned.
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   const config = {
5
      flowType: 'YOUR_FLOW_TYPE',
6
      credentials: {
7
         apiKey: 'YOUR_API_KEY',
8
         clientSecret: 'YOUR_CLIENT_SECRET',
9
         tenant: 'YOUR_TENANT',
10
         banknu: 'YOUR_BANKNU',
11
         env: 'YOUR_ENV'
12
      },
13
      // 3. SET THE CIF CODE
14
      currentUserInfo: {
15
         cifCode: 'YOUR_CIFCODE'
16
      },
17
   };
18
   pvtButton.initialize(config);
19
});
Copied!
Prefill Desk Verification Enabled
The deskVerificationEnabled set the "Let's get your verified" page as a first step.
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   const config = {
5
      flowType: 'YOUR_FLOW_TYPE',
6
      credentials: {
7
         apiKey: 'YOUR_API_KEY',
8
         clientSecret: 'YOUR_CLIENT_SECRET',
9
         tenant: 'YOUR_TENANT',
10
         banknu: 'YOUR_BANKNU',
11
         env: 'YOUR_ENV'
12
      },
13
      currentUserInfo: {
14
         cifCode: 'YOUR_CIFCODE'
15
      },
16
      // 4. SET DESK VERIFICATION ENABLED
17
      deskVerificationEnabled: false
18
   };
19
   pvtButton.initialize(config);
20
});
Copied!
Prefill Events
It is an object that allows you to pass some callbacks to handle events of Preventor SDK.
1
const pvtButton = document.querySelector('pvt-button');
2
​
3
pvtButton.addEventListener('loaded', () => {
4
   const config = {
5
      flowType: 'YOUR_FLOW_TYPE',
6
      credentials: {
7
         apiKey: 'YOUR_API_KEY',
8
         clientSecret: 'YOUR_CLIENT_SECRET',
9
         tenant: 'YOUR_TENANT',
10
         banknu: 'YOUR_BANKNU',
11
         env: 'YOUR_ENV'
12
      },
13
      currentUserInfo: {
14
         cifCode: 'YOUR_CIFCODE'
15
      },
16
      deskVerificationEnabled: false,
17
      // 5. SET EVENTS LISTENER
18
      events: {
19
         onStart: () => console.log('onStart'),
20
         onSubmitted: () => console.log('onSubmitted'),
21
         onFinish: () => console.log('onFinish'),
22
         onError: code => console.log('onError', code),
23
      }
24
   };
25
   pvtButton.initialize(config);
26
});
Copied!
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

getting started - Previous

Overview

Next - web - client-side SDKs

Angular

Last modified 4mo ago

Copy link

Contents

Verification Flow

1. Installation

2. Initialize the Web SDK

3. Prefilling configs

Prefill Flowtype

Prefill Credentials

Prefill Cif Code

Prefill Desk Verification Enabled

Prefill Events

4. Handling Verifications