Unable to run Razorpay with CoreUI for Angular

I have integrated below payment gateway code in the trial CoreUI angular project and fresh project.
The payment gateway code worked in the fresh project working but does not work in CoreUI angular project. It showing the error “Cannot read property ‘postMessage’ of null.” so it proved that there is no issue in the payment gateway but an issue in CoreUI Angular. Please kindly give a solution if anyone has.

import { Component, OnInit } from '@angular/core';

declare var Razorpay: any;

@Component({
selector: ‘app-payment’,
templateUrl: ‘./payment.component.html’,
styleUrls: [’./payment.component.css’]
})
export class PaymentComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

title = ‘client’;
options = {
“key”: ‘rzp_test_6T2l60BmZdCzQo’, // Enter the Key ID generated from the Dashboard
“amount”: “50000”, // Amount is in currency subunits. Default currency is INR. Hence, 50000 refers to 50000 paise or INR 500.
“currency”: “INR”,
“name”: “Acme Corp”,
“description”: “A Wild Sheep Chase is the third novel by Japanese author Haruki Murakami”,
“image”: “https://example.com/your_logo”,
“handler”: function (response) {
debugger;
console.log(response);
alert(response);
},
“prefill”: {
“name”: “amin uddin”,
“email”: “amidenf9701@gmail.com”,
“contact”: “7992239847”,
“product”:“Landntoice”
},
“notes”: {
“address”: “note value”
},
“theme”: {
“color”: “#F37254
}
};
btnPayClick() {
var rzp1 = new Razorpay(this.options);
rzp1.open();
}
}