# HTML + Javascript
## 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.
```html
```
{% hint style="success" %}
You have successfully installed the Preventor Web SDK!
{% endhint %}
## 2. Choose how you would like to integrate the verifyme
{% tabs %}
{% tab title="Built-in button UI (pvt-button)" %}
Integrating with verifyme through pvt-button is the easiest way to integrate.
1. Add `pvt-button` tag in your HTML.
<pvt-button></pvt-button>
2. Set your [configuration](#3.-prefilling-configs)
```javascript
window.PvtVerifymeConfig = YOUR_CONFIGURATION;
```
3. A complete `HTML`file should look similar to the example below.
```html
```
{% endtab %}
{% tab title="pvt-verifyme" %}
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.
1. Add `pvt-verifyme` tag in your HTML.
<pvt-verifyme></pvt-verifyme>
2. Set your [configuration](#3.-prefilling-configs)
```javascript
window.PvtVerifymeConfig = YOUR_CONFIGURATION;
```
3. Call the `open()` method to open the component
```javascript
const pvtVerifyme = document.querySelector('pvt-verifyme');
pvtVerifyme.open();
```
4. `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.
```javascript
const button = document.querySelector('button');
button.addEventListener('click', () => pvtVerifyme.open())
pvtVerifyme.addEventListener('loaded', () => {
button.disabled = false;
});
```
5. A complete `HTML`file should look similar to the example below.
```html
Preventor, Remote digital identity platform for brokers
```
{% endtab %}
{% endtabs %}
You can find your credentials on the [Preventor platform](https://sandbox.preventor.com/)
Go to settings / integration keys
Integration keys
{% hint style="success" %}
You have successfully Preventor SDK!
{% endhint %}
## 3. Prefilling configs
### Prefill Flowtype
{% hint style="danger" %}
The flow type defines the biometric process so you must select a flow type.
{% endhint %}
```javascript
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
{% hint style="danger" %}
You must set all credentials values to correctly consume our services.
{% endhint %}
```javascript
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.
{% hint style="info" %}
If the Cifcode is empty, a unique code is assigned.
{% endhint %}
```javascript
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
```javascript
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.
```javascript
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.
```javascript
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, [flowStatus](#flow-status-codes), and [dispositionStatus](#disposition-status-codes). |
| `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). |
{% endtab %}
{% tab title="pvt-verifyme" %}
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.
1. Add `pvt-verifyme` tag in your HTML.
