@notabene/javascript-sdk

JavaScript SDK

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

Install

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({
    widget: 'https://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);
    }
});

Then render the widget:

notabene.renderWidget();

To update the widget as users enter transaction details:

notabene.setTransaction({
  asset: 'ETH',
  beneficiaryAddress: '0x8d12a197cb00d4747a1fe03395095ce2a5cc6819',
  amount: '2000000000',
})

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

const currentTransactionInfo = notabene.tx

Customization

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',
  fontFamily: Arial,
  logo: {LOGO_URL},
}

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

---

Finally you pass the configuration to a Notabene instance:

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