HomeGuidesRecipesAPI ExplorerForumSupport
Partner Portal
Partner Portal

Quickstart

Learn how to use Monite's Drop-in components in your application.

Suggest Edits

Before you begin

To follow this quickstart guide, ensure you have retrieved your credentials from the Monite partner portal. For more information, see Get your credentials.

Step 1: Installation and importation

The Monite Drop-in components SDK is also available on the NPM and Yarn directories. To install:

npm install @monite/sdk-drop-in

yarn add @monite/sdk-drop-in

After installation via NPM or Yarn, you must import the SDK to use Monite's Drop-in components in your application. To import:

<script type="module">
  import "@monite/sdk-drop-in";
</script>

useEffect(() => {
  import("@team-monite/app-white-label");
}, []);

Step 2: Bring 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. 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"
  basename="/"
></monite-app>

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

📘

The monite-app element also acts the parent element for script tags that handle authorization, theming and customizations on the Drop-in components SDK.

Step 3: Set up authorization tokens

The authorization tokens allow you to authenticate subsequent requests with the Drop-in components SDK. Use the fetchToken function to retrieve your authorization tokens. The fetchToken function must make a POST request to Monite's servers to retrieve an access token for the entity user. This request requires a request object that accepts the following properties:

{
  grant_type: "entity_user",
  entity_user_id: "ENTITY_USER_ID",
  client_id: "CLIENT_ID",
  client_secret: "CLIENT_SECRET"
}

These properties form the request body for the POST request to generate your access token. Depending on your use case, you can implement this POST request on the client or server side. For illustration, we will implement it within a script tag in our index.html file. For successful authentication, ensure that the script tag is positioned inside the monite-app element and assigned a slot attribute with a value of fetch-token.

<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": "2023-09-01",
       },
       body: JSON.stringify(request),
     }
   );
   return await response.json();
 }
</script>

The fetchToken function returns an object an access_token property required to authorize subsequent requests.

Step 4: Review the code

Finally, you can compare your resulting code with our template to make sure that everything is correct:

<!DOCTYPE html>
<html lang="en">
  <body>
    <script type="module">
      import "@monite/sdk-drop-in";
    </script>
    <monite-app
      entity-id="ENTITY_ID"
      api-url="https://api.sandbox.monite.com/v1"
      basename="/"
    >
      <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": "2023-09-01",
              },
              body: JSON.stringify(request),
            }
          );
          return await response.json();
        }
      </script>
    </monite-app>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <body>
    <script
      type="module"
      async
      src="https://wl.dev.monite.com/monite-app.js"
    ></script>
    <monite-app
      entity-id="ENTITY_ID"
      api-url="https://api.sandbox.monite.com/v1"
      basename="/"
    >
      <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": "2023-09-01",
              },
              body: JSON.stringify(request),
            }
          );
          return await response.json();
        }
      </script>
    </monite-app>
  </body>
</html>

return (
 <div className="App">
  <div
    dangerouslySetInnerHTML={{
      __html: `
       <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": "2023-09-01",
                },
                body: JSON.stringify(request),
              }
            );
            return await response.json();
          }
        </script>
        <monite-app
          entity-id="ENTITY_ID"
          api-url="https://api.sandbox.monite.com/v1"
          basename="/"
        ></monite-app>
      `,
    }}
   />
 </div>
);
(Optional) Add theming

Add theming

You can customize the theme of the monite-app component. To include theming, define the object that describes the custom themes within a script tag in your file. The script tag that contains your custom theme is assigned an slot attribute with a value of theme as shown:

 <!-- Create new theme JSON --> 
<script slot="theme" type="application/json">
  { 
    "fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace" 
    "card": {
      "fontSize": "18px",
      "backgroundColor": "#99a3dd",
      "borderColor": "#99a3dd"
     },
     "button": {
       "primaryColor": "#0f2ac4",
       "borderRadius": "1rem",
     },
 } 
</script>

📘

For more information on customizing Monite Drop-in components, see Theming and customization.

Next, insert the script into in the monite-app element as shown:

<monite-app entity-id="ENTITY_ID">
  <!-- Embed JSON into the monite-app element --> 
  <script slot="theme" type="application/json">
    { 
      "fontFamily": "Comic Sans MS, Comic Sans, cursive, monospace" 
      "card": {
        "fontSize": "18px",
        "backgroundColor": "#99a3dd",
        "borderColor": "#99a3dd"
      },
      "button": {
        "primaryColor": "#0f2ac4",
        "borderRadius": "1rem",
      },
    } 
  </script>
</monite-app>
(Optional) Add localization

Add localization

You can customize the locale of the monite-app component renderings. To include localization, define the object that describes the localization within a script tag in your file. The script tag that contains your custom theme is assigned an slot attribute with a value of locale:

 <!-- Create new locale JSON --> 
<script slot="locale" type="application/json">
  {
    "currencyLocale": "de-DE",
    "messages": { "Name, country, city": "Test" }
  }
</script>

📘

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, insert the script into in the monite-app element as shown:

<monite-app
  entity-id="ENTITY_ID"
  api-url="https://api.sandbox.monite.com/v1"
  basename="/"
>
  <!-- Embed JSON into the monite-app element --> 
  
  <script slot="locale" type="application/json">
    {
      "currencyLocale": "de-DE",
      "messages": { "Name, country, city": "Test" }
    }
  </script>
</monite-app>

Updated 8 months ago