Unable to open on expo application

[alaksandarjesus]

I am trying to integrate Razor Checkout on my expo application and these are the steps i followed

https://razorpay.com/docs/payments/payment-gateway/react-native-integration/standard/build-integration-android/

npx expo install react-native-razorpay

npx expo prebuild

In my application

import RazorpayCheckout from 'react-native-razorpay';


const result = {
    "amount": 5000,
    "currency": "INR",
    "description": "Payment for credits",
    "image": "logo_url",
    "key": "rzp_live_**********",
    "name": "Site Name",
    "order_id": "order_NMUbv1Oagp6gss",
    "prefill": {
        "contact": "948********",
        "email": "r*******[email protected]",
        "name": "Name"
    },
    "theme": {
        "color": "#53a20e"
    }
}

RazorpayCheckout.open(result).then((data) => {
        // handle success
        alert(`Success: ${data.razorpay_payment_id}`);
    }).catch((error) => {
        // handle failure
        console.log("error", error)
        alert(`Error: ${error.code} | ${error.description}`);
});

And I get below error log

package.json

{
  "name": "******",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "build": "expo build",
    "publish": "expo publish"
  },
  "dependencies": {
    "@react-navigation/native": "^6.1.8",
    "@react-navigation/native-stack": "^6.9.14",
    "expo": "~49.0.13",
    "expo-file-system": "~15.4.5",
    "expo-image": "~1.3.5",
    "expo-secure-store": "~12.3.1",
    "expo-status-bar": "~1.6.0",
    "expo-storage": "^48.1.0",
    "formik": "^2.4.5",
    "lodash": "^4.17.21",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-paper": "^5.10.6",
    "react-native-razorpay": "^2.3.0",
    "react-native-safe-area-context": "4.6.3",
    "react-native-screens": "~3.22.0",
    "react-native-vector-icons": "^10.0.0",
    "typescript": "^5.1.3",
    "yup": "^1.3.2",
    "expo-splash-screen": "~0.20.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

[vivekshindhe]

@alaksandarjesus We've had other people face this issue. This is because the application is running on expo mode whereas it needs to run on development mode for the native modules to be used.

Here are the commands I followed.
npx expo prebuild
npx expo start -> expo go build
a -> running app on android
{you'll see error mentioned above}
s -> switch to development mode
a -> run app on android.

This is what we've seen works before too. Here's the link to the reply quoted above.
Can you please try this and check if this resolves your issue?

[szaid6]

@alaksandarjesus We've had other people face this issue. This is because the application is running on expo mode whereas it needs to run on development mode for the native modules to be used.

Here are the commands I followed.
npx expo prebuild
npx expo start -> expo go build
a -> running app on android
{you'll see error mentioned above}
s -> switch to development mode
a -> run app on android.

This is what we've seen works before too. Here's the link to the reply quoted above. Can you please try this and check if this resolves your issue?

as far as I know there is only 1 build per day right for the free tier? we cant keep building and check if there are any issues occurred? or is there an another way to build where the apk is saved in the local system like every other framework?

[vivekshindhe]

@szaid6 It's not a limitation set by the Razorpay package. These are the steps we need to follow to allow native modules. And there are no limitations on following the steps above multiple times. Creating an APK is a different process. The steps mentioned above are run locally and are run through the expo app. Prebuild helps set the android/iOS projects, and does not count in the build section.

[sidhardh-joe]

I am also having the same issue
Running on expo with development build, installed the razorpay package followed the documentation but getting the above mentioned error.
Any help would be welcomed

[sidhardh-joe]

Anyone who is here with the same issue refer to this video.
If you are using expo install the razorpay package then use
npx expo install expo-dev-client ,if you havent installed dev client install it
eas build --profile development --platform android to make a dev build and install it and follow
razorpay documentation for expo
follow these steps and you will have it working.

Note:
You dont need to run prebuild as expo links them automatically.
Install the package and then run development build.
As of November 2024 latest expo sdk is 52 and it comes with new architecture and as of now razorpay doesn't not support the new architecture. Make sure to go with expo sdk 51 and React Native 0.74 for compatibility.
Good Luck