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

[zenzzenpl]

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

[maishivamhoo123]

@team can i work on this issue?

[kcsf]

I second that. It's painful.

[kcsf]

@zenzzenpl
For me the issue was 'color-scheme' property on my site. The solution to get transparent bg was simply to add this to global css:

/* Add to your global CSS */
.razorpay-container,
.razorpay-container ,
[class="razorpay"] {
color-scheme: light !important;
}

==================
Summary of Issue: The Razorpay checkout iframe, when embedded on a host page that applies color-scheme: dark (e.g., html.dark), can inherit this property. This inheritance can cause browser-controlled elements (like the iframe's document background or certain form controls within it) to render in a dark mode variant, which sometimes appears as an opaque white background where transparency is expected.

Recommended Solution for Razorpay Developers: To ensure consistent rendering and proper transparency of the checkout modal, Razorpay should explicitly set color-scheme: light on its main container (.razorpay-container) or the iframe element itself. This will effectively reset any inherited color-scheme from the host page, allowing the iframe's content to render as designed.

This explicit declaration will prevent unintended color-scheme inheritance from the host page, allowing the iframe's content to render as designed, including full transparency if other background properties are set accordingly.

[dinesh8368]

@zenzzenpl For me the issue was 'color-scheme' property on my site. The solution to get transparent bg was simply to add this to global css:

/* Add to your global CSS */ .razorpay-container, .razorpay-container , [class="razorpay"] { color-scheme: light !important; }

================== Summary of Issue: The Razorpay checkout iframe, when embedded on a host page that applies color-scheme: dark (e.g., html.dark), can inherit this property. This inheritance can cause browser-controlled elements (like the iframe's document background or certain form controls within it) to render in a dark mode variant, which sometimes appears as an opaque white background where transparency is expected.

Recommended Solution for Razorpay Developers: To ensure consistent rendering and proper transparency of the checkout modal, Razorpay should explicitly set color-scheme: light on its main container (.razorpay-container) or the iframe element itself. This will effectively reset any inherited color-scheme from the host page, allowing the iframe's content to render as designed.

This explicit declaration will prevent unintended color-scheme inheritance from the host page, allowing the iframe's content to render as designed, including full transparency if other background properties are set accordingly.

worked for me