NativeModules.RazorpayCheckout is undefined

[ggarg2]

Hi Team,

I have imported RazorpayCheckout still getting undefined error.

import RazorpayCheckout from 'react-native-razorpay'.

<TouchableHighlight onPress={() => {
                                        var options = {
                                            description: 'Credits towards consultation',
                                            image: 'https://i.imgur.com/3g7nmJC.png',
                                            currency: 'INR',
                                            key: 'rzp_test_1DP5mmOlF5G5ag',
                                            amount: '5000',
                                            name: 'foo',
                                            theme: {color: '#74AFAD'}
                                        }
                                        RazorpayCheckout.open(options).then((data) => {
                                            // handle success
                                            alert(`Success: ${data.razorpay_payment_id}`);
                                        }).catch((error) => {
                                            // handle failure
                                            console.log(error)
                                            alert(`Error: ${error.code} | ${error.description}`);
                                        });
                                        }}>

                                        <View>
                                            <Text style={{color: '#74AFAD' }}>Pay</Text>
                                        </View>
                                        </TouchableHighlight>


error is:

TypeError: Cannot read property 'open' of undefined
    **## at E:\dev\finalMobileApp\node_modules\react-native-razorpay\RazorpayCheckout.js:26**
    at tryCallTwo (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:45)
    at doResolve (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:200)
    at new Promise (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:66)
    at Function.open (E:\dev\finalMobileApp\node_modules\react-native-razorpay\RazorpayCheckout.js:15)
    at Object.onPress (E:\dev\finalMobileApp\App\Hotels\HotelDetail.js:926)
    at Object.touchableHandlePress (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\TouchableHighlight.js:199)
    at Object._performSideEffectsForTransition (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:746)
    at Object._receiveSignal (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:664)
    at Object.touchableHandleResponderRelease (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:43

[Prateek479]

Hey , Did you get a solution for this one.? @ggarg2

[iThink32]

Please reopen issues before you comment as it makes it easier for us to reach you.
Regarding the issue , can u describe the exact problem you are facing?

[Prateek479]

The exact same response which is mentioned in the issue , I created a file with following
@iThink32

import RazorpayCheckout from 'react-native-razorpay'.

<TouchableHighlight onPress={() => {
var options = {
description: 'Credits towards consultation',
image: 'https://i.imgur.com/3g7nmJC.png',
currency: 'INR',
key: <merchantID>,
amount: '5000',
name: '<merchantName>',
prefill: {
email: 'test@gmail.com',
contact: '9829058512',
name: 'Test'
},
theme: {color: '#74AFAD'}
}
RazorpayCheckout.open(options).then((data) => {
// handle success
alert(Success: ${data.razorpay_payment_id});
}).catch((error) => {
// handle failure
console.log(error)
alert(Error: ${error.code} | ${error.description});
});
}}>

And getting a response

TypeError: Cannot read property 'open' of undefined

at E:\dev\finalMobileApp\node_modules\react-native-razorpay\RazorpayCheckout.js:26

at tryCallTwo (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:45)
at doResolve (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:200)
at new Promise (E:\dev\finalMobileApp\node_modules\promise\setimmediate\core.js:66)
at Function.open (E:\dev\finalMobileApp\node_modules\react-native-razorpay\RazorpayCheckout.js:15)
at Object.onPress (E:\dev\finalMobileApp\App\Hotels\HotelDetail.js:926)
at Object.touchableHandlePress (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\TouchableHighlight.js:199)
at Object._performSideEffectsForTransition (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:746)
at Object._receiveSignal (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:664)
at Object.touchableHandleResponderRelease (E:\dev\finalMobileApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:43

react-native version : 0.51

[iThink32]

can u please cross check the example project that has been included in the repo ? Its working fine over there maybe that might help you as the error seems to be syntactical to me.

[iThink32]

closing due to inactivity.Please reopen if you face any further issues.

[ShaileshBhatNP]

Remember to add below lines to package.json file to clear the above bug

"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve --sourceMap source-map --iscordovaserve --wwwDir platforms/browser/www/ --buildDir platforms/browser/www/build"
},

[faijan22]

does anybody knows how to integarte razorpay to expo