Payment Gateway iFrame has opaque white background instead of transparent / translucent background.

Hello, I am facing an issue since a long time and I can't find a solution regarding same on web, When I initiate an payment window, razor pay frame opens but with an opaque white window, instead of transparent white window. here is my code:

const options = {
key: getEnviromentVariable("razorpay_key_id"),
amount: amount * 100,
currency: "INR",
name: props.company_name,
description: "Payment for order #" + order_id,
image: getEnviromentVariable("LOGO_DARK_URL"),
order_id: razorpay_order_id,
handler: function (response: any) { ... },
prefill: {
name: props.user_name,
contact: props.mobile,
},
theme: {},
};

const paymentObject = new (window as any).Razorpay(options);
paymentObject.open();

Razorpay SDK Version: 2.9.6

Expected window:

What my code is showing:

You can clearly see that there is no transparency in background.

Please guide me if any code changes required or is there anything to be done from your side

Start by reproducing the browser flow shown in the issue with Razorpay SDK 2.9.6, the provided options, and paymentObject.open(). Check the SDK documentation and theme configuration for iframe background behavior; done means determining whether transparency is configurable and documenting or resolving the opaque background behavior.