Drop-in 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.

📘

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.

<script type="module" async src="https://sdk-demo.sandbox.monite.com/monite-app.js"></script>

📘

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:

npm install @monite/sdk-drop-in

Next, import the package into your application as shown:

import "@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:

<monite-app 
  entity-id="ENTITY_ID" 
  api-url="https://api.sandbox.monite.com/v1" 
  component="receivables"
  basename="/"
></monite-app>

return (
 <div className="App">
  <div
    dangerouslySetInnerHTML={{
      __html: `
        <monite-app
          entity-id="ENTITY_ID"
          api-url="https://api.sandbox.monite.com/v1"
          basename="/"
        ></monite-app>
      `,
    }}
   />
 </div>
);

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:

<monite-app 
  entity-id="ENTITY_ID" 
  api-url="https://api.sandbox.monite.com/v1" 
  component="payables"
  basename="/"
></monite-app>

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

📘

The component attribute should only be used when you want to render specific pages from the Drop-in components 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:

<script slot="fetch-token">
  async function fetchToken() {
    const request = {
      grant_type: "entity_user",
      entity_user_id: "ENTITY-USER_ID",
      client_id: "CLIENT_ID",
      client_secret: "CLIENT_SECRET",
    };

    const response = await fetch(
      "https://api.sandbox.monite.com/v1/auth/token",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-monite-version": "2024-01-31",
        },
        body: JSON.stringify(request),
      }
    );

    return await response.json();
  }
</script>

🚧

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:

<monite-app
  entity-id="ENTITY_ID"
  api-url="https://api.sandbox.monite.com/v1"
  basename="/"
>
  <script slot="theme" type="application/json">
    { 
      "typography": {
        "fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace",
        "h2": {
          "fontSize": "26px",
          "fontWeight": "500"
        }
      }
    } 
  </script>
</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:

<monite-app
  entity-id="ENTITY_ID"
  api-url="https://api.sandbox.monite.com/v1"
  basename="/"
>
  <script slot="locale" type="application/json">
    {
      code: "en-US",			// default: de-DE
      messages: {
        "Counterpart Name": "Supplier Name",
        "Counterpart": "Supplier"
      }
    }
  </script>
</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.