Vertical Scroll bar goes away after Razorpay payment is Success or Razorpay Modal is Closed in Angular

When I open any bootstrap modal on my page, The Overflow of the body is hidden and When I close the modal, The Overflow is Visible. This is the Correct Way.

But For RazorPay, When I open the payment modal, the overflow is hidden, but after making the payment or closing the payment modal without payment, The Overflow does not become visible. I couldn't scroll the page, I need to refresh the page to make it work.

The solution which I have tried so far:

1. I added overflow: auto to the body tag of the main CSS file. The problem was, The Overflow was not hidden when I open the modal.
2. I tried the below code, what it does is, on both payment success or payment window close, overflow: auto will be added to the body. But the problem was when I open the modal the second time, the overflow is not getting hidden. It always stays visible.

   handler: function (response) {
             $('body').css('overflow', 'auto');
           },
    modal: {
             ondismiss: function () {
               $('body').css('overflow', 'auto');
             },
           },

3. to make the overflow hidden again, I have to add $('body').css('overflow', 'hidden') in all places where I have a modal button or else I have to refresh the page to make it work again normal, But it doesn't have good user experience to refresh the page each time.

is there a best way to achieve this? I checked the Razorpay doc page, But I couldn't find any other solution.