UI Overlapping Issue in Razorpay Checkout

[Hassu26]

Description

When opening the Razorpay payment page in React Native, the bottom Continue button overlaps with the android soft buttons. This makes it difficult to proceed with payment as elements are visually cluttered.

Razorpay Package Version :

Open Package.json. > "react-native-razorpay": "2.3.0"

Version (android) :

kotlinVersion = "2.0.21"
Gradle: 8.10.2
"react": "18.3.1",
"react-native": "0.77.0",

What you did:

What happened:

Steps To Reproduce

1. Open the Razorpay checkout modal.
2. Observe that the bottom UI (₹380 View Details + Continue button) overlaps with the android soft buttons.
3. This happens inconsistently across different screens and devices.

[manish-cashify]

This is the issue for Android 15, which has implemented edge-to-edge rendering of content. I am facing same issue.

[dhruvvbhavsar]

yes i am facing the same issue too!
any updates from the razorpay sdk team?

[NikhilMasurkar]

Yes Im facing the same Issue

[swapnilimaker]

+1

[dhruvvbhavsar]

Solution for Razorpay Edge-to-Edge Display Issues on Android 15+

Hello Everyone,

I've implemented a temporary workaround for issues with Razorpay's Checkout UI on Android 15, which introduces edge-to-edge display by default. This solution will work until an official fix is released by the Razorpay team.

Problem:

Android 15 (API 35) enables edge-to-edge display by default, which can cause layout issues with third-party SDKs like Razorpay. Since we can't directly modify Razorpay's internal styles.xml, we need to override its theme declaration in our application.

Solution Steps:

1. Create a custom theme that inherits from Razorpay's CheckoutTheme and adds the opt-out flag
2. Override the CheckoutActivity declaration in your manifest to use this custom theme

Implementation:

1. Update styles.xml

<resources>
    <!-- Base application theme -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Customize your theme here -->
        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
        <!-- Opt out of edge-to-edge enforcement on Android 15+ -->
        <!-- This item is benign on older Android versions -->
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
    
    <!-- Theme for Razorpay Checkout to opt out of edge-to-edge -->
    <style name="AppTheme.RazorpayCheckout" parent="CheckoutTheme">
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
</resources>

2. Update AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">
    <!-- Your existing permissions and features -->
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"  
      android:networkSecurityConfig="@xml/network_security_config"
      android:screenOrientation="portrait"
      android:windowSoftInputMode="adjustResize">
      
      <!-- Main Activity -->
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustPan"
        android:screenOrientation="portrait"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      
      <!-- Razorpay Checkout Activity Override -->
      <activity
        android:name="com.razorpay.CheckoutActivity"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:exported="true" 
        android:theme="@style/AppTheme.RazorpayCheckout"
        tools:replace="android:exported, android:theme">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <data
                android:host="rzp.io"
                android:scheme="io.rzp" />
        </intent-filter>
      </activity>
    </application>
</manifest>

Key Points:

• The tools:replace="android:exported, android:theme" directive resolves manifest merger conflicts by using your values instead of the SDK's
• Clean and rebuild your project after making these changes
• This solution specifically targets the Razorpay checkout screen without affecting other parts of your app

This approach should work until Razorpay releases an official update for Android 15 compatibility.