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

PreviousOverview NextReact

Last updated 2 years ago

Was this helpful?