Angular implementation

Overview

There are multiple ways to integrate the Monite drop-in with Angular. In this article, we will explore two implementation approaches:

1. Directly from the CDN

You will not be able to control the version of the Monite SDK if you consume the script directly from the CDN.

To load the Monite drop-in from the CDN, you need to create the script tag using the Renderer2 library.

Below is an example of how the Angular component could be structured. In this example, the script is loaded from https://cdn.monite.com/monite-app.js.

1 import { Component, OnInit, Renderer2 } from '@angular/core';
2 import { DOCUMENT } from '@angular/common';
3 import { withHttpTransferCacheOptions } from '@angular/platform-browser';
4 
5 
6 const entity_user_id = "xxxx-xxxx-xxxxx"
7 const client_id = "xxxx-xxxxx-xxxxx"
8 const client_secret = "xxxx-xxxxx-xxxxx"
9 
10 @Component({
11   selector: 'app-root',
12   templateUrl: './app.component.html',
13   styleUrls: ['./app.component.scss']
14 })
15 export class AppComponent implements OnInit {
16   isInit = false;
17 
18   constructor(private renderer: Renderer2) { 
19   }
20 
21   ngOnInit() {
22     const script = this.renderer.createElement('script');
23     script.src = `https://cdn.monite.com/monite-app.js`;
24     script.type = 'module'
25     const bodyScript = this.renderer.createElement('script');
26     const moniteApp = this.renderer.createElement('monite-app');
27 
28     this.renderer.setAttribute(moniteApp, "entity-id", "xxxx-xxxx-xxxxx"),
29     this.renderer.setAttribute(moniteApp, "api-url", "https://api.sandbox.monite.com/v1"),
30     this.renderer.setAttribute(moniteApp, "basename", "/"),
31     this.renderer.setAttribute(moniteApp, "component", "payables"),
32     bodyScript.slot = "fetch-token"
33     bodyScript.text = `
34     async function fetchToken() {
35           const request = {
36             grant_type: "entity_user",
37             entity_user_id: "${entity_user_id}",
38             client_id: "${client_id}",
39             client_secret: "${client_secret}",
40           };
41           const response = await fetch(
42             "https://api.sandbox.monite.com/v1/auth/token",
43             {
44               method: "POST",
45               headers: {
46                 "Content-Type": "application/json",
47                 "x-monite-version": "2024-05-25",
48               },
49               body: JSON.stringify(request),
50             }
51           );
52           return await response.json();
53         }
54     `
55     this.renderer.appendChild(document.body, script);
56     this.renderer.appendChild(document.body, moniteApp)
57     this.renderer.appendChild(moniteApp, bodyScript)
58   }
59 }

2. From an NPM package

To have control over the version of the drop-in, you can also install it via NPM by following these steps:

Include the NPM package in package.json:

1  "@monite/sdk-drop-in": "^2.0.0-alpha.18"

After installing the NPM package, add the module from node_modules to the assets section in angular.json to make it accessible from the browser:

1 "assets": [
2   "src/assets",
3   {
4     "glob": "**/*",
5     "input": "./node_modules/@monite/sdk-drop-in/dist/",
6     "output": "./assets/"
7   }
8 ],

Create a new file named index.mjs in the assets folder and import the drop-in:

1 import "./monite-app.js";

Now you can load the drop-in using a script tag:

1 ngOnInit() {
2   this.script = this.renderer.createElement('script');
3   this.script.src = `assets/index.mjs`;
4   this.script.type = 'module';
5   this.bodyScript = this.renderer.createElement('script');
6   this.moniteApp = this.renderer.createElement('monite-app');