Drop-in overview

Overview

Monite’s Drop-in Components is a fully embeddable UI component library built upon JavaScript’s Web Components. It facilitates the integration of diverse UI elements into your web application. You can choose to bring in individual components or use the library as a single, comprehensive component serving as an all-in-one UI solution.

Using the Monite Drop-in Components library

You must provide the Monite Drop-in Components library as an NPM package, making it easier to load and use as a module. To use the Drop-in Components package, install the package using your preferred package manager as shown:

1
npm install @monite/sdk-drop-in

Next, import the package into your application as shown:

1
import('@monite/sdk-drop-in').then(({ MoniteDropin }) => {
2
  // ...     
3
});

The Drop-in instance

The Drop-in instance contains the UI and configuration for the Drop-in components. To create a Drop-in instance in your application:

1
const dropinConfig = {
2
  entityId: 'ENTITY_ID',
3
  apiUrl: 'ENVIRONMENT_URL',
4
  fetchToken: async function fetchToken() {...},
5
};
6
7
const dropin = new MoniteDropin(dropinConfig);
8
9
dropin.create(component).mount(...);

Authentication

If you already implemented a backend part that is capable of issuing entity user tokens, then write a function that retrieves this token.

However, if you have not implemented the backend part yet but can already generate an entity and entity user token, you can also just call the POST /auth/token endpoint directly from this script, as shown below:

1
  async function fetchToken() {
2
    const request = {
3
      grant_type: "entity_user",
4
      entity_user_id: "ENTITY_USER_ID",
5
      client_id: "CLIENT_ID",
6
      client_secret: "CLIENT_SECRET",
7
    };
8
9
    const response = await fetch(
10
      "https://api.sandbox.monite.com/v1/auth/token",
11
      {
12
        method: "POST",
13
        headers: {
14
          "Content-Type": "application/json",
15
          "x-monite-version": "2024-05-25",
16
        },
17
        body: JSON.stringify(request),
18
      }
19
    );
20
    return await response.json();
21
  }

Theming

You can customize the theme of the component as shown:

1
const dropinConfig = {
2
  entityId: 'ENTITY_ID',
3
  apiUrl: 'ENVIRONMENT_URL',
4
  theme: {
5
    colors: {
6
      primary: '#562BD6',
7
    },
8
  },
9
  fetchToken: async function fetchToken() {...},
10
};
11
12
const dropin = new MoniteDropin(dropinConfig);
13
14
dropin.create(component).mount(...);

Localization

You can customize the locale of the component renderings as shown:

1
const dropinConfig = {
2
  entityId: 'ENTITY_ID',
3
  apiUrl: 'ENVIRONMENT_URL',
4
  locale: {
5
    code: 'en-US',
6
    messages: {
7
      Sales: 'Invoicing',
8
      Counterparts: 'Customers',
9
    },
10
  },
11
  fetchToken: async function fetchToken() {...}, 
12
};
13
14
const dropin = new MoniteDropin(dropinConfig);
15
16
dropin.create(component).mount(...);

Next steps

You have now learned about the Monite Drop-in component library. For a detailed quickstart guide with detailed usage examples, see Drop-in quick start.