Widget V2

JavaScript SDK

This library is the JavaScript SDK for loading the widget on a frontend.

Installation

There are two options for loading the Notabene SDK:

<script id="notabene" async src="https://unpkg.com/@notabene/[email protected]/dist/es/index.js"></script>

Or installing the library:

yarn add @notabene/javascript-sdk

Usage

Create a new Notabene instance:

const notabene = new Notabene({
    vaspDID: 'did:ethr:0x94c38fd29ef36f5cb2f7bc771f9d5bd9f7d05f27',
    widget: 'https://beta-widget.notabene.id',
    container: '#container',
    authToken: '{CUSTOMER_TOKEN}',
    onValidStateChange: (isValid) => {
        // Use this value to determine if the transaction is ready to be created.
        console.log('is transaction valid', isValid);
    },
    onError: (err) => {
        // If any errors are encountered, they will be passed to this function
        alert(err.message)
    }
});

📘

authToken

If you do not know how to get your customerToken, please see the guide here.

Then render the widget:

notabene.renderWidget();

To update the widget as users enter transaction details:

notabene.setTransaction({
  transactionAsset: 'ETH',
  beneficiaryAccountNumber: '0x8d12a197cb00d4747a1fe03395095ce2a5cc6819',
  transactionAmount: '2000000000',
})

📘

setTransaction

If the user changes the input after the call, you need to do setTransaction again to refresh.

It can be called as many times as needed.

Once the widget determines the transaction is valid, it will call the onValidStateChange callback, to access the transaction details:

const currentTransactionInfo = notabene.tx

Re-rendering

If you need to close and re-render the widget, call the destroyWidget method like so:

notabene.destroyWidget(); // Will remove the widget
notabene.renderWidget(); // Will re-render the widget

🚧

renderWidget

Calling the renderWidget method without destroying it first will not work.


onError

ErrorDescription
zoid destroyed all componentserror if you try to destroy a widget that is not rendered

Implementation example

Below are a few example you can use to test the widget locally, just make sure to customize {{URL}}, {{originatorVASPdid}}and {{TOKEN}}:

Web

Download a sample html file to test the widget in your browser:

Download Here

Mobile/WebView

Below is a link to an example app to test the widget in a mobile environment using React Native and WebView:

React native widget example

Code

Here is how a full implementation looks like:

// Initial required information about the transaction. Without it the widget will not render!
const transaction = {
  transactionAmount: '1000000000000000000000',
  beneficiaryAccountNumber: 'BENEFICIARY_ADDRESS',
  transactionAsset: 'eth',
}

// A validation state to be c
const transactionIsValid = false;

// This is where you save the extra information returned from the widget.
let returnedTrasaction; 

const notabene = new window.Notabene({
  vaspDID: '{{originatorVASPdid}}',
  widget: 'https://beta-widget.notabene.dev',
  container: '#widget', // The container to which the widget will be rendered.
  authToken: '{{CUSTOMER TOKEN}}',
  onValidStateChange: (isValid: boolean) => {
    
    // When this is true you can send the transaction, knowing it will be a valid
    // Travel Rule transaction
    transactionIsValid = isValid;
    
    // Save the information returned from the widget, to be used when creating the 
    // Travel Rule transaction
    returnedTransaction = notabene.tx; 
    
  },
})

notabene.setTransaction(transaction) // Set the transaction for the widget to check validity.
notabene.renderWidget() // Render the widget.

URL

Production URL: https://beta-widget.notabene.id

Testing URL: https://beta-widget.notabene.dev


Customization

It is possible to customize the logic of the widget questions, by setting the following parameters.

Functionality

transactionTypeAllowed for limiting the type of transaction destinations you can pass:

  • ALL - All transaction destinations are allowed. (DEFAULT)
  • VASP_2_VASP_ONLY - Only transaction destinations that are VASPs are allowed.
  • SELF_TRANSACTION_ONLY - Only transaction destinations that the originator owns are allowed.

nonCustodialDeclarationType for deciding which ownership proof type you want to use:

  • SIGNATURE - The ownership proof will be signed by the originator using a wallet. (DEFAULT)
  • DECLARATION - The ownership proof will be declared by the originator using a checkbox.

beneficiaryDetails to enable collection of additional information about the beneficiary that is not required by your jurisdiction:

  • beneficiaryName - this will add a field to collect the beneficiary name.
  • beneficiaryGeographicAddress - this will add a field to collect the beneficiary address.

Passing the variables in the configuration:

const notabene = new Notabene({
    vaspDID: 'did:ethr:0x94c38fd29ef36f5cb2f7bc771f9d5bd9f7d05f27',
    widget: 'https://beta-widget.notabene.id',
    container: '#container',
    authToken: '{CUSTOMER_TOKEN}'
    transactionTypeAllowed: 'ALL', // 'ALL', 'SELF_TRANSACTION_ONLY', 'VASP_2_VASP_ONLY'
    nonCustodialDeclarationType: 'SIGNATURE', // 'SIGNATURE', 'DECLARATION',
    beneficiaryDetails: ['beneficiaryName', 'beneficiaryGeographicAddress'],
});

Theme

Here you can pass configuration which will customize the styles of the widget to meet your brand needs, all values are optional:

{
  primaryColor: '#0048ba', //botton and checkbox
  secondaryColor: '#ff0000',
  primaryFontColor: '#e32636',
  secondaryFontColor: '#ffbf00',
  backgroundColor: '#9966cc',
  fontFamily: 'Roboto',
  logo: {LOGO_URL},
  mode: 'dark', // default: 'light'
}

To get a list of supported fonts, visit here.


Dictionary

Pass a dictionary object mapping in text in the widget to your own language, for example:

To replace Loading... with Cargando...

{
  'Loading...': 'Cargando...',
}

The property name must be the same as the text in the widget.

Finally you pass the configuration to a Notabene instance:

const notabene = new Notabene({
    widget: 'https://beta-widget.notabene.id',
    container: '#container',
    authToken: '{CUSTOMER_TOKEN}'
    theme: {THEME},
    dictionary: {DICTIONARY},
});

Full web sample

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Notabene Widget Example</title>
  <script id="notabene" async src="https://unpkg.com/@notabene/[email protected]/dist/es/index.js"></script>
  <script>
    document.querySelector('#notabene').addEventListener('load', function () {
      const nb = new Notabene({
        vaspDID: 'did:ethr:0x049fc13a4f1e79d4d03f082ca96758179a91da29',
        widget: 'https://beta-widget.notabene.dev',
        container: '#container',
        authToken: 'eyJ0eXAiOiJKV1QiLCJhby453y443h5ybtreYXQiOjE2NDkyMDY3NzgsInZjIjp7IkBjb250ZXh0IjpbImh0dHBzOi8vd3d3LnczLm9yZy8yMDE4L2NyZWRlbnRpYWxzL3YxIiwiaHR0cHM6Ly9hcGkubm90YWJlbmUuaWQvc2NoZW1hcy92MSJdLCJ0eXBlIjpbIlZlcmlmaWFibGVDcmVkZW50aWFsIiwiQWNjZXNzVG9rZW4iXSwiY3JlZGVudGlhbFN1YmplY3QiOnsic2NvcGUiOiJhZG1pbiJ9fSwic3ViIjoiZGlkOmV0aHI6MHhlZmJiMTRiNzM0NzNjY2ZkNjEwNTQzYWY0YjFjOGZkYTAyN2M1N2JmIiwiaXNzIjoiZGlkOmV0aHI6MHhlZmJiMTRiNzM0NzNjY2ZkNjEwNTQzYWY0YjFjOGZkYTAyN2M1N2JmIn0.g5i0kTMMgSO4HIF44w51hljoW3xMJVqmEfrlyhsqAXcKeWk3XDaVOJBstaTMoo98VapOXG9783U7A0nLIJVK7wA',
                theme: {
                      primaryColor: '#0048ba',
                      secondaryColor: '#33ff00',
                      primaryFontColor: '#e32636',
                      secondaryFontColor: '#ffbf00',
                      backgroundColor: '#9966cc',
                      fontFamily: 'Roboto',
                      logo: 'https://www.aafk.no/_/image/dcaed91b-9d1f-491c-b56b-c16b6578dc58:e425c44b30ef8b855dc6dd4f7b86ba063dd12af6/wide-72-72/aafk_gold_RGB.svg',
                      mode: 'light', // default: 'light'
                },
        onValidStateChange: (isValid) => {
          console.log('is transaction valid', isValid);
          console.log('widget payload', nb.tx)
        },
                onError: (err) => {
                 // If any errors are encountered, they will be passed to this function
                 alert(err.message);
                },
        transactionTypeAllowed: 'ALL', // 'ALL', 'SELF_TRANSACTION_ONLY', 'VASP_2_VASP_ONLY'
        nonCustodialDeclarationType: 'SIGNATURE', // 'SIGNATURE', 'DECLARATION'
                beneficiaryDetails: ['beneficiaryName', 'beneficiaryGeographicAddress'],
      });
      nb.setTransaction({
        transactionAsset: 'ETH',
        beneficiaryAccountNumber: '0x6F3970f0b88B7cc706cB493Bb385585a511123',
        transactionAmount: '222222222222222222',
      });
      nb.renderWidget();
    });
  </script>
</head>

<body>
  <div id="container">
</body>

</html>


Did this page help you?