Drop-in overview

Use Monite's Drop-in Components to quickly build your user interface.

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.

Preview of Monite's Drop-in components library
Preview of Monite's Drop-in components library

Drop-in components responsiveness

As of this release, the Monite Drop-in is optimized for desktop use and may not provide the desired responsiveness on mobile and tablet views. We are actively working to enhance support for these platforms in future updates.

Using the Monite Drop-in Components library

You can use Monite’s Drop-in Components directly from a CDN via a script tag in your HTML. Doing this requires no “build step”, as the process does not require module bundlers.

HTML
1<script
2 type="module"
3 async
4 src="https://cdn.sandbox.monite.com/monite-app.js"
5></script>

To use the Drop-in library in production via the CDN, use the following link: https://cdn.monite.com/monite-app.js.

Loading the Drop-in library via a CDN makes it available in your application and requires no further configuration.

Alternatively, we also 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:

1npm install @monite/sdk-drop-in

Next, import the package into your application as shown:

JavaScript
1import "@monite/sdk-drop-in";

The monite-app element

The monite-app element is a custom HTML element that contains the UI and configuration for Monite’s Drop-in components. The monite-app element houses a comprehensive component serving as an all-in-one UI solution, providing a unified interface for interaction with Monite’s product offerings.

Add the monite-app element into your application and include the required attributes as shown:

1<monite-app
2 entity-id="ENTITY_ID"
3 api-url="https://api.sandbox.monite.com/v1"
4 component="receivables"
5 basename="/"
6></monite-app>

Use this element to render individual pages by including the component attribute. For example, the following snippet shows the configuration to render the Payables page:

HTML
1<monite-app
2 entity-id="ENTITY_ID"
3 api-url="https://api.sandbox.monite.com/v1"
4 component="payables"
5 basename="/"
6></monite-app>

The following table shows all the monite-app element’s attributes and their description:

AttributeDescription
entity-idThe Monite entity to which the entity user belongs.
api-urlThe URL for the API in use.
componentThis is a required attribute that accepts the Monite component page to be rendered. If not provided, the monite-app element renders the entire Drop-in components UI.
basenameThe base URL for all routes in your application.

The component attribute is a required attribute that specifies the Drop-in component page to render from the library. Possible values for the component attribute include approval-policies, counterparts, onboarding, payables, products, receivables, and tags.

Authentication

Drop-in credentials

The Monite Drop-in library accepts only entity-user tokens as credentials within the fetchToken function. Attempting to use a partner token with the library will throw an error. For more information about entity user tokens and permissions required, see Generate an entity user token and List of permissions.

The Monite Drop-in components library handles authorization using an HTML script tag. The script tag must be embedded within the monite-app element and assigned a slot attribute with a value of fetch-token as shown:

HTML
1<monite-app
2 entity-id="ENTITY_ID"
3 api-url="https://api.sandbox.monite.com/v1"
4 component="products"
5 basename="/"
6>
7 <script slot="fetch-token">
8 async function fetchToken() {
9 const request = {
10 grant_type: "entity_user",
11 entity_user_id: "ENTITY-USER_ID",
12 client_id: "CLIENT_ID",
13 client_secret: "CLIENT_SECRET",
14 };
15
16 const response = await fetch(
17 "https://api.sandbox.monite.com/v1/auth/token",
18 {
19 method: "POST",
20 headers: {
21 "Content-Type": "application/json",
22 "x-monite-version": "2024-01-31",
23 },
24 body: JSON.stringify(request),
25 }
26 );
27
28 return await response.json();
29 }
30 </script>
31</monite-app>

Monite does not recommend exposing the credentials of your fetchToken function on the client side as shown earlier. For security reasons, we recommend that all Monite tokens are generated from your server side code.

Theming

The Monite Drop-in components library also supports theming. To include theming, define the object that describes the custom themes within a script tag in your HTML. The script tag that contains your custom theme is assigned a slot attribute with a value of theme as shown:

HTML
1<monite-app
2 entity-id="ENTITY_ID"
3 api-url="https://api.sandbox.monite.com/v1"
4 basename="/"
5 component="receivables"
6>
7 <script slot="theme" type="application/json">
8 {
9 "typography": {
10 "fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace",
11 "h2": {
12 "fontSize": "26px",
13 "fontWeight": "500"
14 }
15 }
16 }
17 </script>
18</monite-app>

The script tag bearing the theme must be embedded within the monite-app element. For more information on customizing Monite Drop-in components see Theming and customization.

Localization

You can also customize the locale of the Monite Drop-in components. To include localization, define the object describing the localization within a script tag in your HTML. The script tag that contains your custom theme is assigned a slot attribute with a value of locale as shown:

HTML
1<monite-app
2 entity-id="ENTITY_ID"
3 api-url="https://api.sandbox.monite.com/v1"
4 basename="/"
5 component="counterparts"
6>
7 <script slot="locale" type="application/json">
8 {
9 "code": "en-US", // default: de-DE
10 "messages": {
11 "Counterpart Name": "Supplier Name",
12 "Counterpart": "Supplier"
13 }
14 }
15 </script>
16</monite-app>

The currencyLocale property must adhere to the BCP-47 language tag standard. For more information on including localization in Monite’s Drop-in components, see Localization.

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.