Chaining of dispatch HTTP requests isn't working in Razorpay React

Question

Before I start, I am very new to redux and quite new to React in general. I am integrating the Subscription functionality of Razorpay for an app. Everything is working fine but when I try to chain dispatch of HTTP endpoints, it is not working. Here is the code snippet:

const SubscriptionForm: FC<ISubscriptionForm> = ({ planId, totalCount }) => {

  const { data: user, isFetching } = useAppSelector((store) => store.user.details);

  const dispatch = useAppDispatch();
  const [Razorpay] = useRazorpay();

  const handlePayment = async (subscription_id: any, userDetails: { name: string; email: string; phone: string}) => {


    const options: any = {
      key: process.env.REACT_APP_RAZORPAY_ID,
      amount: "500",
      currency: "USD",
      name: "Test App",
      description: "Test Transaction",
      image: Logo,
      subscription_id: subscription_id,
      handler: (razaorpayResponse: {
        razorpay_payment_id: any;
        razorpay_subscription_id: any;
        razorpay_signature: any;
      }) => {
        dispatch(SubscriptionRestService.verifySignature({ razaorpayResponse}))
          .then((response) => {
            if (SubscriptionRestService.verifySignature.fulfilled.match(response)) {
              console.log("Success:", response);
              dispatch(SubscriptionRestService.updateSubscriptionStatus({ subscriptionId: subscription_id, status: "active" }))
                .then((response) => {
                  if (SubscriptionRestService.updateSubscriptionStatus.fulfilled.match(response)) {
                    console.log("Success:", response);
                    toast.success("Subscription was activated successfully");
                  } else {
                    console.error("Error:", response);
                    toast.error("Subscription activation may have failed. Please contact support if payment was deducted");
                  }
                })
                .catch((error) => {
                  console.error("Error:", error);
                });
              toast.success("Subscription was activated successfully");
            } else {
              console.error("Error:", response);
              toast.error("Subscription may have failed. Please contact support if payment was deducted");
            }
          })
          .catch((error) => {
            console.error("Error:", error);
          });
      },
      theme: {
        color: "#e9e6e6",
      },
      prefill: {
        name: userDetails.name,
        email: userDetails.email,
        contact: userDetails.phone,
      }
    };
    const rzp1 = new Razorpay(options);

    rzp1.open();
  }

This thing works perfectly fine as long as I remove the inner dispatch: dispatch(SubscriptionRestService.updateSubscriptionStatus({ subscriptionId: subscription_id, status: "active" })) But when I add the inner dispatch it gives Invalid Hook Call Error

I want to get away with this error and have the chained dispatch working. The 2 dispatch asyncThunks are as follows:

const verifySignature = createAsyncThunk(
  'subscription/verify_signature',
  async (args:{razaorpayResponse: {
    razorpay_payment_id: any;
    razorpay_subscription_id: any;
    razorpay_signature: any;
  }}, { rejectWithValue }) => {
    try {
      return (await HttpClient.post('/payment/verify-signature', args.razaorpayResponse)).data;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
});

const updateSubscriptionStatus = createAsyncThunk(
  'subscription/update_status',
  async (args: { subscriptionId: any, status: any }, { rejectWithValue }) => {
    try {
      return (await HttpClient.post('/payment/update-subscription-status', args)).data;
    } catch (error: any) {
      return rejectWithValue(error.message);
    }
});

The verifySignature is working fine but when I dispatch the updateSubscriptionStatus it fails.

Answer 1

The error was at the console.error statements. Changing console.error("Error:", response); to console.error("Error:", response.error); solved the issue.