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

  1. Add pvt-broker tag into your HTML.

<pvt-broker></pvt-broker>

  1. Set your configuration

You can find your credentials on the Preventor platform

Go to settings / integration keys
Integration keys

You can find the broker ID on the Preventor platform

Go to apps option
Go to broker management
You must pass this Broker ID to your configuration. If don't have any broker, you can create it.
window.PvtBrokerSDK = {
    brokerId: 'YOUR_BROKER_ID',
    credentials: {
      apiKey: 'YOUR_API_KEY',
      clientSecret: 'YOUR_CLIENT_SECRET',
      tenant: 'YOUR_TENANT',
      banknu: 'YOUR_BANKNU',
      env: 'YOUR_ENV',
    },
  };

  1. Call the open() method to open the component

const component = document.querySelector('pvt-broker');
component.open();

  1. 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;
});

  1. 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-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!

Web SDK

PreviousOverviewNextReact

Last updated

Was this helpful?