I've encountered an issue while trying to integrate a code snippet received from a post API response into an Angular HTML file. The code works perfectly fine when pasted in the HTML section of Codepen, as shown in the screenshot here. However, when attempting to incorporate it into an Angular project, only a blank page with a loading spinner is displayed. Has anyone faced a similar challenge and found a way to successfully integrate this code into an Angular environment? Any suggestions or hints would be greatly appreciated! I've already tried rendering the entire code as a string using innerHtml, but that didn't resolve the issue either.
<!doctype html>
<html>
<head>
<title>Payment Page · Razorpay</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta charset="utf-8">
<script>
var meta = {};
var options = {"name":"XYZ Education","order_id":"order_GZjwHCFWRWeIOx","amount":"500000","currency":"INR","callback_url":"https:\/\/razorpay.com\/docs\/payment-gateway\/web-integration\/hosted\/checkout-options\/"};
var urls = {};
options.key = "";
</script>
</head>
<body>
<style>
@keyframes lo {
to {
transform: rotate(360deg)
}
}
@-webkit-keyframes lo {
to {
-webkit-transform: rotate(360deg)
}
}
.loader {
height: 24px;
width: 24px;
border-radius: 50%;
display: inline-block;
animation: lo .8s infinite linear;
-webkit-animation: lo .8s infinite linear;
transition: 0.3s;
-webkit-transition: 0.3s;
opacity: 0;
border: 2px solid #3395FF;
border-top-color: transparent
}
.vis {
opacity: 1
}
</style>
<div class="loader vis" style="position:absolute;top:115px;left:50%;margin-left:-12px"></div>
<script src="https://cdn.razorpay.com/static/hosted/embedded-entry.js"></script>