HTML + Javascript
Steps to integrate the Preventor broker SDK into HTML and JavaScript vanilla application.
1. Installation
To install the Preventor Broker SDK, add the following script.
<script
type="module"
src="https://sdk.preventor.com/pvtidaas/broker/broker.esm.js"
></script>
2. Setup the SDK
Add
pvt-broker
tag into your HTML.
<pvt-broker></pvt-broker>
Set your configuration
You can find your credentials on the Preventor platform


You can find the broker ID on the Preventor platform



window.PvtBrokerSDK = {
brokerId: 'YOUR_BROKER_ID',
credentials: {
apiKey: 'YOUR_API_KEY',
clientSecret: 'YOUR_CLIENT_SECRET',
tenant: 'YOUR_TENANT',
banknu: 'YOUR_BANKNU',
env: 'YOUR_ENV',
},
};
Call the
open()
method to open the component
const component = document.querySelector('pvt-broker');
component.open();
pvt-broker
emits a loaded event when the Preventer Broker SDK finishes downloading. In the example below, the loaded event is utilized to enable a button that opens the Preventer Broker SDK.
const component = document.querySelector('pvt-broker');
const button = document.querySelector('button');
button.addEventListener('click', () => component.open())
component.addEventListener('loaded', () => {
button.disabled = false;
});
A complete
HTML
file 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-broker></pvt-broker>
<script
type="module"
src="https://sdk.preventor.com/pvtidaas/broker/broker.esm.js"
></script>
<script>
window.PvtBrokerSDK = {
brokerId: 'YOUR_BROKER_ID',
credentials: {
apiKey: 'YOUR_API_KEY',
clientSecret: 'YOUR_CLIENT_SECRET',
tenant: 'YOUR_TENANT',
banknu: 'YOUR_BANKNU',
env: 'YOUR_ENV',
},
};
const component = document.querySelector('pvt-broker');
const button = document.querySelector('button');
button.addEventListener('click', () => component.open())
component.addEventListener('loaded', () => {
button.disabled = false;
});
</script>
</body>
</html>
Congratulations, the Preventor Broker SDK has been successfully configured!

Last updated
Was this helpful?