@notabene/javascript-sdk

JavaScript SDK

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

Documentation • Installation

Installation

There are two options for loading the Notabene SDK:

<script id="notabene" async src="https://unpkg.com/@notabene/javascript-sdk@latest/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);
  },
});

Then render the widget:

notabene.renderWidget();

To update the widget as users enter transaction details:

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

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

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

Customization

Functionality

transactionTypeAllowed: ALL | VASP_2_VASP_ONLY | SELF_TRANSACTION_ONLY

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: SIGNATURE | DECLARATION

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.

Pass the variables in the configuration

const notabene = new Notabene({
    vaspDID: 'did:ethr:0x94c38fd29ef36f5cb2f7bc771f9d5bd9f7d05f27',
    widget: 'https://beta-widget.notabene.id',
    container: '#container',
    authToken: '{CUSTOMER_TOKEN}'
    allowedTransactionTypes: 'VASP_2_VASP_ONLY',
    nonCustodialDeclarationType: 'DECLARATION',
});

---

Theme

Pass a theme object when creating an instance

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

{
  primaryColor: '#fff',
  secondaryColor: '#fff',
  primaryFontColor: '#fff',
  secondaryFontColor: '#fff',
  backgroundColor: '#fff',
  fontFamily: Arial,
  logo: {LOGO_URL},
  mode: 'dark', // default: 'light'
}

To get a list of supported fonts, visit https://fonts.google.com/

---

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, for it to be replaced

---

Beneficiary Details

You can require specific beneficiary fields that are not required by your jurisdiction.

Field options:

• beneficiaryName - Recipient Name
• beneficiaryGeographicAddress - Recipient Address

beneficiaryDetails: ['benficiaryName', 'beneficiaryGeographicAddress'];

---

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},
    beneficiaryDetails: {BENEFICIARY_DETAILS},
});

License

BSD 3-Clause © Notabene Inc.