How to declare a global type in Angular

Im working on a app thats needs a 3rd party Lib

<head>
...
<script src="https://checkout.placetopay.com/lightbox.min.js"></script>
</head>


I need to call a window.PlacetoPay global variable the function looks like:

const initPayment = () => {
if (window.PlacetoPay) {
const checkout = new window.PlacetoPay.Checkout({
url: "https://checkout.placetopay.com/session/ID-DE-TU-SESIÓN",
autoOpen: true,
onCancel: () => {
console.log("El usuario canceló el proceso");
},
});

checkout.open();
} else {
console.error("PlacetoPay no está cargado");
}
};

initPayment();


I keep getting an error: PlacetoPay no está cargado

My declaration file is: src/types/placetopay.d.ts

interface PlacetoPayCheckoutConfig {
url: string;
autoOpen?: boolean;
onCancel?: () => void;
}

interface PlacetoPay {
Checkout: new (config: PlacetoPayCheckoutConfig) => { open: () => void };
}

declare global {
interface Window {
PlacetoPay: PlacetoPay;
}
}

export {};


My tsconfig.json:

"compilerOptions": { "typeRoots": [ "./node_modules/@types", "./src/types" ],

I been stuck in this error a couple of days now I tried all types a d.ts examples but I cant get window.PlacetoPay to load.

Thanks in advance this is my first time using stackoverflow

I expected to declare a type placetopay.d.ts glabally to use window.PlacetoPay but it doesnt load.

Continue reading...