React native app is crashing after confirming payment with razorpay test key?

[knevagi]

I am trying to implement UPI payment in my react native app but my app is crashing on successful payment even though I am getting a successful payment alert. I am using the customui SDK for implementing Razorpay payments. I am not getting any kind of exception or error, the app is just shutting down. I am using react native version 0.61.5 Any help would be appreciated. Thank you.

Checkout code

    var options = {
        currency: 'INR',
        key_id: 'test_key',
        amount: this.props.total,
        vpa:this.state.upi,
        contact: 'XXXXXXXXXX',
        email: 'XXXXXXXXX',
        method: 'upi'          
      }
      Razorpay.open(options).then((data) => {
        // handle success
        alert(`Success: ${data.razorpay_payment_id}`);
        console.log(`Success: ${data.razorpay_payment_id}`)
      }).catch((error) => {
        // handle failure
        alert(`Error: ${error.code} | ${error.description}`);
        console.log(`Error: ${error.code} | ${error.description}`)
      });

[Karan-Chandwani]

Facing the same issue while using Standard SDK and RazoprpatCheckout.open method.

React Versions:
"react": "16.11.0",
"react-native": "0.62.2",

[Nautiyalsachin]

Hi @Karan-Chandwani, @knevagi: Please provide the following asked details that were mentioned on issue template,

1. Please mention the environment where this error is coming. eg. iOS, Android.
2. Also, includes steps that you followed to integrate the payment gateway.
3. If possible please add a sample app so that we can see the whole implementation and debug it for fast outputs.

[knevagi]

@Nautiyalsachin
I am working on android platform. I simply followed the steps on razorpay docs for react-native-customui and imported Razorpay into my component

Version

 "react": "~16.9.0",
 "react-native": "~0.61.5",

Sample Component

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    StatusBar,
    ScrollView,
    screenHeight,
    ActivityIndicator,
    TouchableOpacity
} from "react-native";
import {Button} from './Common/Button'
import Razorpay from 'react-native-customui';


class AddCard extends Component{    
      savecard(){
          var options = {
            currency: 'INR',
            key_id: '',
            amount: '',
            'card[name]':'',
            'card[number]':''
            'card[expiry_month]':'',
            'card[expiry_year]':'',
            'card[cvv]':'',
            contact: '',
            email: ''            
          }
          Razorpay.open(options).then(async (data) => {
            // handle success
            
            alert(`Success: ${data.razorpay_payment_id}`);
            

          }).catch((error) => {
            // handle failure
            alert(`Error: ${error.code} | ${error.description}`);
          });
        
   
      }
   render(){
   	return(
   			<View style={{backgroundColor:'#E32636',flex:1,paddingTop:StatusBar.currentHeight}}>
                    <Button onPress={()=>this.savecard()} children="Pay Amount"/>        
			</View>
   		)
   }
}

export default AddCard;

Basically I am running the Razorpay. open function when the user clicks on the Pay Button. I am getting success alert but once I get the success pop up the app is crashing. Thank you.

[knevagi]

@Nautiyalsachin Any Update?

[Nautiyalsachin]

@knevagi, Have you tried the Sample app yet? Try to run it locally and see the implementation, maybe there is something which you have missed.

[knevagi]

@Nautiyalsachin is the implementation same for react-native-customui as in the sample app?

[samartu-labs]

Observing same issue in production key, app crashing while executing Razor pay, refer attached screenshot about the details, no luck even after multiple retry, similar issue report from samsung tablet!
Dear Razor pay Developers,
Please do something
React Native version: 0.62
there is no additional code included, tried with code mentioned in the documentation except key change.

[Nautiyalsachin]

@knevagi : Yes it is.

@samartu-labs : Please try the step mentioned here -

#265

[knevagi]

@Nautiyalsachin I tried the sample app. It works but for some reason, my app is crashing but everything looks fine to me. The payment is successful and it is getting recorded on the Razorpay dashboard after which the app is crashing. When I logged the crash this is what came up

05-28 17:15:08.100  5863  5947 I WindowManager: Losing focus: Window{275a8e5 u0 com.movieapp/com.razorpay.rn.RazorpayPaymentActivity}
05-28 17:15:08.104  5863  6702 D InputDispatcher: Focus left window (28943): 275a8e5 in display 0 0
05-28 17:15:08.115 28943 28943 D AndroidRuntime: Shutting down VM
05-28 17:15:08.116 28943 28943 E AndroidRuntime: FATAL EXCEPTION: main
05-28 17:15:08.116 28943 28943 E AndroidRuntime: Process: com.movieapp, PID: 28943
05-28 17:15:08.116 28943 28943 E AndroidRuntime: java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=62442, result=62443, data=Intent { (has extras) }} to activity {com.movieapp/com.movieapp.MainActivity}: java.lang.NullPointerException: Attempt to invoke interface method 'void com.facebook.react.bridge.Callback.invoke(java.lang.Object[])' on a null object reference

Are there any fields I am missing? Or something else that I can try?

[knevagi]

@Nautiyalsachin do expo ejected react native applications give problems with razorpay?

[Nautiyalsachin]

@knevagi : We do not support Expo in our react-native plugin. As it won't allow us to use some of the native features which we are using in our SDKs.

[knevagi]

@Nautiyalsachin But once the application is ejected from expo it should work, right? Can you please go over my code snippet and error log again and see if I am missing something?

[Nautiyalsachin]

@knevagi : There might be some code in your codebase which is still auto-generated or might effected by the Expo. I'll suggest you create a new app and try to integrate our plugin if that goes well, you can than try to add the other functionalities.

[sanjeevkse]

I was having the similar issue. I disable the progard rules (minification) of script files in app/build.gradle
def enableProguardInReleaseBuilds = false

[Nautiyalsachin]

@knevagi, you can follow steps given by @sanjeevkse. I am closing this issue for now, feel free to reopen it.

[jitunayak]

I am trying to implement UPI payment in my react native app but my app is crashing on successful payment even though I am getting a successful payment alert. I am using the customui SDK for implementing Razorpay payments. I am not getting any kind of exception or error, the app is just shutting down. I am using react native version 0.61.5 Any help would be appreciated. Thank you.

Checkout code

    var options = {
        currency: 'INR',
        key_id: 'test_key',
        amount: this.props.total,
        vpa:this.state.upi,
        contact: 'XXXXXXXXXX',
        email: 'XXXXXXXXX',
        method: 'upi'          
      }
      Razorpay.open(options).then((data) => {
        // handle success
        alert(`Success: ${data.razorpay_payment_id}`);
        console.log(`Success: ${data.razorpay_payment_id}`)
      }).catch((error) => {
        // handle failure
        alert(`Error: ${error.code} | ${error.description}`);
        console.log(`Error: ${error.code} | ${error.description}`)
      });

yes, i am having the same issue in my fresh install

[CHANDRAMOHANnegi]

use this Doc

https://razorpay.com/docs/payment-gateway/react-native-integration/custom/

[shadowshantu]

@knevagi Could you solve the issue? I am have the same issue.

react - 17.0.1
react-native - 0.64.1
react-native-razorpay - 2.2.7
Device - Android

My checkout code-

let options = {
      description: 'Test',
      currency: 'INR',
      key: 'test_key',
      amount: '50000',
      name: 'Test Account',
      // order_id: razorId,
      prefill: {
        email: 'XXXXXXXX',
        contact: 'XXXXXXXX',
        name:'XXXXXXXX,
      },
      theme: {color: '#009ED2'},
    };
    RazorpayCheckout.open(options)
      .then(data => {
        console.log(data);
        Alert.alert(`Success: ${data.razorpay_payment_id}`);
      })
      .catch(err => {
        console.log(err);
        console.log(`Error: ${err.code} | ${err.description}`);
      });

The app crashes on clicking either Success or Failure. No error log is displayed. Any help would be much appreciated. Thanks in advance.

[Vivektknetstager]

android app crash after getting razorpay_payment_id @vivekshindhe

[Aryan6290]

@knevagi Could you solve the issue? I am have the same issue.

react - 17.0.1 react-native - 0.64.1 react-native-razorpay - 2.2.7 Device - Android

My checkout code-

let options = {
      description: 'Test',
      currency: 'INR',
      key: 'test_key',
      amount: '50000',
      name: 'Test Account',
      // order_id: razorId,
      prefill: {
        email: 'XXXXXXXX',
        contact: 'XXXXXXXX',
        name:'XXXXXXXX,
      },
      theme: {color: '#009ED2'},
    };
    RazorpayCheckout.open(options)
      .then(data => {
        console.log(data);
        Alert.alert(`Success: ${data.razorpay_payment_id}`);
      })
      .catch(err => {
        console.log(err);
        console.log(`Error: ${err.code} | ${err.description}`);
      });

The app crashes on clicking either Success or Failure. No error log is displayed. Any help would be much appreciated. Thanks in advance.
Do you managed to find its solution? Am stuck here, the app is crashing after success and failure callbacks