razorpay.open not a function error in angular

Question

`I'm developing a web application using Angular as the frontend and Node.js as the backend. I'm trying to integrate Razorpay for payments. I'm encountering an issue where I receive an error message stating "rzp.open is not a function" when attempting to open the Razorpay payment popup``

<script src="https://checkout.razorpay.com/v1/razorpay.js"></script>

`

payWithRazor(val: any) {
  const options: any = {
    key: this.razorPayKey,
    amount: 125500,
    currency: 'INR',
    name: 'DealerFree',
    description: 'testing',
    image: '/assets/img/logo.png',
    order_id: val,
    modal: {
      escape: false,
    },
    theme: {
      color: '#0c238a'
    }
  };
  
  options.handler = ((response: any, error: any) => {
    options.response = response;
    console.log(response);
    console.log(options);
  });

  options.modal.ondismiss = (() => {
    console.log('Transaction cancelled.');
  });
  
  const rzp = new this.winRef.nativeWindow.Razorpay(options);
  rzp.open();
}

I have a winRef service to return a window.