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?
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);
}
}