Preventor, Remote digital identity platform for brokers

# 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/)

{% 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). | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.preventor.com/web-client-side-sdks/html-+-javascript.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.