Monite Iframe App

Overview

The Monite Iframe App component provides a simple way to integrate Monite features into your application, ensuring smooth communication between your platform and Monite’s services. This integration leverages iframe-based rendering for a secure and efficient experience.

Available components

The Monite Iframe App offers various components that can be seamlessly integrated into your application. Below is a list of the available components:

• payables: Manages payable invoices and bills.
• receivables: Handles receivable invoices and payment collection.
• counterparts: Manages information about customers, vendors, and other business partners.
• products: Handles product catalog and inventory management.
• approval-policies: Configures approval workflows for different processes.
• roles: Manages user roles and permissions within the system.
• onboarding`: Guides users through the initial setup process.

How to implement

To implement the Monite Iframe App, follow the steps below:

1. Embed the iframe

To embed the Monite Iframe App, include an <iframe> element in your HTML code, specifying the desired component in the src attribute. For example, to embed the Receivables component:

1
<iframe
2
  id="monite-iframe-app"
3
  src="https://cdn.sandbox.monite.com/monite-iframe-app/receivables"
4
  width="100%"
5
  height="600px"
6
  frameborder="0"
7
  allow="fullscreen"
8
></iframe>

The parameters are explained below:

2. Establish communication

The Monite Iframe App uses a secure communication channel to interact with your host application. This channel facilitates the exchange of data, such as authentication tokens.

2.1. Initialize the communicator

To initiate the communication, use the MoniteIframeAppCommunicator class:

1
<script type="module">
2
  import { MoniteIframeAppCommunicator } from 'https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js';
3
4
  const iframeCommunicator = new MoniteIframeAppCommunicator(
5
    document.querySelector('#monite-iframe-app')
6
  );
7
</script>

2.2. Mount the slots

The mountSlot method sets up a communication channel for specific functionalities.

2.2.1. Authentication token slot

The fetch-token slot manages the retrieval of authentication tokens. You need to provide a function that fetches the token from your backend and returns it:

1
iframeCommunicator.mountSlot('fetch-token', async () => {
2
  const res = await fetch('/my-api/monite/auth/token', {
3
    method: 'POST',
4
    headers: {
5
      Accept: 'application/json',
6
      'Content-Type': 'application/json',
7
    },
8
  });
9
  if (!res.ok) throw new Error('Failed to fetch token');
10
  return await res.json();
11
});

The function provided to the fetch-token slot will be invoked by the Iframe App whenever it needs to obtain an authentication token. This approach ensures secure token handling.

2.2.2. Locale slot

The locale slot allows you to customize the language and regional settings of the Iframe App. The interface for the locale object is the same as for the Drop-In Component or <MoniteProvider /> from the React SDK:

1
iframeCommunicator.mountSlot('locale', {
2
  code: 'en-US',
3
  currencyNumberFormat: {
4
    display: 'code', // the way to display currency, available options are: 'symbol' | 'code' | 'name'
5
    localeCode: 'en-150', // specific code to display currencies in the format you want
6
  },
7
  messages: {
8
    /** **/
9
  },
10
  // other locale properties similar to Drop-In component
11
});

2.2.3. Theme slot

The theme slot allows you to apply custom theming to the Iframe App to match your application’s look and feel. The interface for the theme object is the same as for the React SDK:

1
iframeCommunicator.mountSlot('theme', {
2
  palette: {
3
    // ...
4
  },
5
  typography: {
6
    // ...
7
  },
8
});

You can call iframeCommunicator.mountSlot(...) multiple times to modify the theme dynamically, for example, to switch between light and dark modes:

1
darkThemeButton.onclick = () => {
2
  iframeCommunicator.mountSlot('theme', {
3
    palette: {
4
      mode: 'dark',
5
      primary: {
6
        main: '#f5d14d',
7
        light: '#e1e1ef',
8
      },
9
      secondary: {
10
        main: '#707070',
11
      },
12
    },
13
  });
14
};

2.3. Establish connection

After mounting the necessary slots, establish a connection with the Iframe App:

1
iframeCommunicator.connect();

1
iframeCommunicator.disconnect();

Complete example

Here is a complete version of code for the implementation:

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>Monite Iframe App Example</title>
7
  </head>
8
  <body>
9
    <iframe
10
      id="monite-iframe-app"
11
      src="https://cdn.sandbox.monite.com/monite-iframe-app/receivables"
12
      style="border: none; width: 100%; height: 500px"
13
    ></iframe>
14
15
    <script type="module">
16
      import { MoniteIframeAppCommunicator } from 'https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js';
17
18
      const iframeCommunicator = new MoniteIframeAppCommunicator(
19
        document.querySelector('#monite-iframe-app')
20
      );
21
22
      iframeCommunicator.mountSlot('fetch-token', async () => {
23
        const res = await fetch('/my-api/monite/auth/token', {
24
          method: 'POST',
25
          headers: {
26
            Accept: 'application/json',
27
            'Content-Type': 'application/json',
28
          },
29
        });
30
        if (!res.ok) throw new Error('Failed to fetch token');
31
        return await res.json();
32
      });
33
34
      iframeCommunicator.mountSlot('locale', {
35
        code: 'en-US',
36
      });
37
38
      iframeCommunicator.mountSlot('theme', {
39
        palette: {
40
          primary: {
41
            main: '#0052cc',
42
          },
43
        },
44
      });
45
46
      iframeCommunicator.connect();
47
    </script>
48
  </body>
49
</html>

Choosing an environment

The Monite Iframe App offers both production and sandbox environments to support development and testing.

• Production: Use the production environment for your live applications.

  • Iframe App URL: https://cdn.monite.com/monite-iframe-app/{component}
  • Communicator URL: https://cdn.monite.com/monite-iframe-app-communicator.js

• Sandbox: The sandbox environment is designed for development and testing, allowing you to experiment without impacting live data.

  • Iframe App URL: https://cdn.sandbox.monite.com/monite-iframe-app/{component}
  • Communicator URL: https://cdn.sandbox.monite.com/monite-iframe-app-communicator.js