Error in Razorpay payment: [TypeError: Cannot read property 'open' of null]

[sojanonelson]

Getting error

im trying to integrate razorpay gateway in react native project. i will provide u the code below. i have getting error message as LOG Error in Razorpay payment: [TypeError: Cannot read property 'open' of null]

• Code snippet `import React, { useEffect } from "react"; import { StyleSheet, Text, View, TouchableHighlight, Alert, } from "react-native"; import RazorpayCheckout from "react-native-razorpay"; import { useSelector } from "react-redux";

const PaymentScreen = () => { const paymentKey = useSelector((state) => state.general.paymentKey); const orderId = useSelector((state) => state.general.orderId); const paymentAmount = useSelector((state) => state.general.paymentAmount);

console.log("📦Payment Key:", paymentKey); console.log("📦Order ID:", orderId); console.log("📦Payment Amount:", paymentAmount);

const handlePayment = async () => { if (!paymentKey) { console.log("Payment key is missing or invalid"); return; }

const options = {
  description: "Credits towards consultation",
  image: "https://i.imgur.com/3g7nmJC.jpg",
  currency: "INR",
  key: paymentKey,
  amount: paymentAmount * 100, // converting amount to paise
  name: "YEKHAZAR",
  order_id: orderId,
  prefill: {
    email: "business.deeze@gmail.com",
    contact: "9191919191",
    name: "Admin Batman Here",
  },
  theme: { color: "red" },
};

**RazorpayCheckout.open(options)
  .then((data) => {
    console.log("Payment Successful:", data);
    Alert.alert("Payment Successful", `ID: ${data.razorpay_payment_id}`);
  })
  .catch((error) => {
    console.log("Error in Razorpay payment:", error);
    Alert.alert("Payment Error", `${error.code} | ${error}`);
  });

};**

return (

Proceed to Payment

); }; export default PaymentScreen;

Razorpay Package Version :

"react-native-razorpay": "^2.3.0",

[vivekshindhe]

Hey @sojanonelson , if this is an expo project, you'll need to run the commands

npx expo prebuild to establish the native modules that this package uses.

When running, you'll need to ensure that you are on development mode in the metro server to ensure it is being read.

[sojanonelson]

Hey @sojanonelson , if this is an expo project, you'll need to run the commands

npx expo prebuild to establish the native modules that this package uses.

When running, you'll need to ensure that you are on development mode in the metro server to ensure it is being read.

i have tried but its not working.. my friend suggest me to use a old version that might be work

[sojanonelson]

😊Converting the project to react native regular resolved the problem. that means its not linked with expo configuration.

[alwaysfriend494]

Hello @sojanonelson . Nice to meet you. I too, like you, am trying to integrate Razor payment gateway into my react-native project. But I get the same error as you. LOG [TypeError: Cannot read property 'open' of null] This is my code:

import React, { useState, useEffect } from 'react'; import { Text, Alert, View, TouchableOpacity } from 'react-native'; import RazorpayCheckout from 'react-native-razorpay';

return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onPress={() => {
            var options = {
                description: 'Credits towards consultation',
                image: 'https://i.imgur.com/3g7nmJC.png',
                currency: 'INR',
                key: 'rzp_test_FChFjA06oHTdte',
                amount: '5000',
                name: 'foo',
                prefill: {
                    email: 'void@razorpay.com',
                    contact: '9191919191',
                    name: 'Razorpay Software'
                },
                theme: { color: '#F37254' }
            }
            RazorpayCheckout.open(options).then((data) => {
                alert(`Success: ${data.razorpay_payment_id}`);
            }).catch((error) => {
                alert(`Error: ${error.code} | ${error.description}`);
                console.log(error);

            });
        }} style={{ padding: 10, backgroundColor: '#61dafb' }}>
            <Text style={{ color: '#fff' }}>Pay with Razorpay</Text>
        </TouchableOpacity>
    </View>
);

};

export default RazorpayPayment; Please teach me a solution. Thank you.