⚠ App Crash on pressing "cancel" button on the payment page

[Lakshya7312]

Description

As soon as you press the "cancel" button placed on the top right of the payment page, it causes the whole app to crash. It works fine if the payment goes through and even failure of payment case works but this specific case where you "cancel" the transaction by clicking the cross button on the top right causes the application to crash.

• Specific to iOS Users :-
• [ ] I have tried updating Razorpay pod to the latest version by using 'pod update'.
• [x] App is only on android.

Razorpay Package Version :

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

Java and Gradle Version (android) :

Managed by Expo.

What you did:

I clicked on the cross button present at the top right corner of the payment page to try to cancel the transaction.

What happened:

It caused the app to crash and resulted in this error from Expo:

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Run the react native (expo) app with a development build.
2. Open the payment page by creating an order and then using the RazorpayCheckout.open() function.
3. Click the "cancel" icon present at the top right of the page.

Suggested solution:

Code example, screenshot, or link to a repository:

This is the code used to create my payment functions which is then called from a TouchableOpacity:

  createOrder = async () => {
    if (this.state.selectedIndex === 0) {
      //this.props.navigation.navigate("OrderPlaced");
      return;
    } else {
      const key = "examplekeyhere";
      const secret = "examplesecret";
      const apiUrl = "https://api.razorpay.com/v1/orders";

      try {
        const orderResponse = await fetch(apiUrl, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Basic ${base64encode(`${key}:${secret}`)}`,
          },
          body: JSON.stringify({
            amount: this.state.total * 100,
            currency: "INR",
          }),
        });

        const orderData = await orderResponse.json();
        return this.completePayment(orderData.id);
      } catch (error) {
        ToastAndroid.show(error.message, ToastAndroid.SHORT);
      }
    }
  };

  completePayment = async (id) => {
    const key = "examplekeyhere";

    var options = {
      description: "Home to the best desserts in town",
      image: "https://i.ibb.co/tcNW440/glazedlogooka.png",
      currency: "INR",
      key: key,
      amount: this.state.total * 100,
      order_id: id,
      name: "Glazed Bakery",
      theme: {
        color: "#5E2B9E",
      },
    };

    RazorpayCheckout.open(options)
      .then((data) => {
        // this.props.navigation.navigate("OrderPlaced");
        ToastAndroid.show("Payment Successful", ToastAndroid.SHORT);
      })
      .catch((error) => {
        ToastAndroid.show(error.message, ToastAndroid.SHORT);
      });
  };

[vivekshindhe]

@Lakshya7312

ToastAndroid.show(error.message, ToastAndroid.SHORT);

In this line, in catch of open function, the property message doesn't exist. Object error contains

• code
• description

You can replace that with,

ToastAndroid.show(error.description, ToastAndroid.SHORT);

I wasn't able to reproduce the crash, but this should resolve the issue for you. Seeing that the logs indicate that the crash isn't originating in the react-native-razorpay plugin.

[Lakshya7312]

ah, my bad brother! Thanks for helping me out, really appreciate it!