Using A Script Tag File And calling Function From The Script In Angular Component

Question

I am trying to integrate clover ecommerce iframe into my angular application but am running into an issues. I am trying to get This example to work the same in my angular projects component but it fails to find the name clover. I looked for a typescript package but could not find one.

The example above is not my code but a sample example code which i want to replicate in one of my angular components.

I put this tag in the index.html file:

<script src="https://checkout.sandbox.dev.clover.com/sdk.js">

But when creating the clover and elements globally in my component:

clover = new Clover('a2c04bd36719c1ae6867d9f978f7cefa');
elements = clover.elements();

I get the following error:

TS2304: Cannot find name 'Clover'.

Is there something I am missing? I tried adding the link to the index.html and in the angular.json but that was no luck either. How can I add this script file successfully to my angular project and call its functions?

Answer 1

When you have an external .js file you could use like this:

At your index.html:

      <script src="https://checkout.sandbox.dev.clover.com/sdk.js"></script>
</head>

At your app.component.ts or any component (.ts):

     import { Component,OnInit } from '@angular/core';
//this is the important line:
    declare const Clover: any;

//Example it works:

@Component({
  selector: 'my-app-selector-x',
  standalone: true,
  .
  .
})
export class AppComponent implements OnInit {

  ngOnInit() {
    let clover = new Clover('a2c04bd36719c1ae6867d9f978f7cefa');
    let elements = clover.elements();
    console.dir(clover);
  }
}