Embedded accounting

Use the stub JavaScript SDK to embed accounting widgets in your own application. The SDK renders a set of components that let your users view and manage their financial data without leaving your site.

Available widgets

• Cashflow – cash in and out for the selected month.

• Income – income overview with the ability to categorise transactions.

• Expenses – expenses overview with categorisation.

• Profit – month to date profit information.

• Bank Accounts – list of connected bank accounts and actions to manage them.

• Bank Sync – quick control to sync bank feeds and view the last sync time.

• Reports – List that opens detailed accounting reports.

Only include the containers for the widgets you want to display.

Getting started

1. Include the stylesheet

<link href="https://cdn.stub.africa/stub-widgets/latest/stub-widgets.css" rel="stylesheet" />

Replace latest with a version number if you prefer to pin the SDK to a specific release (you should do this in your production environment).

2. Include the JavaScript

<script src="https://cdn.stub.africa/stub-widgets/latest/stub-widgets.js"></script>

3. Add containers

<div id="stub-cashflow"></div>
<div id="stub-income"></div>
<div id="stub-expenses"></div>
<div id="stub-profit"></div>
<div id="stub-bank-accounts"></div>
<div id="stub-bank-sync"></div>
<div id="stub-reports"></div>
<div id="stub-powered-by"></div>

Widgets render inside these elements. Place them wherever you want the content to appear.

4. Obtain an authentication token

Request a token from your backend and pass it to the SDK. The widgets require a valid token for every API call.

5. Initialise the SDK

<script>
const options = {
  appId: '<your app id>',
  businessId: '<business id>',
  token: '<authentication token>',
  renderImmediately: true
};

window.stub.init(options);
</script>

If renderImmediately is false or omitted, call window.stub.render() once the page is ready. During development you can enable the test environment:

window.stub.init({
  ...options,
  test: true
});

Updating the widgets

Date range

You'll probably want to change the date range of data shown on the widgets based on user interaction with your website. That can be done with the set() function.

window.stub.set({
  month: 0, // 0 = January
  year: 2024
});

Authentication token

The SDK will use the token that you provide it with to authenticate all requests, so whenever your token is refreshed you need to pass the updated token to the SDK, otherwise it will attempt to authenticate requests using an expired token that will fail.

window.stub.set({ token: '<new token>' });

Again, the set() function is your friend for this.