Flutterwave / React-Native

React Native library for Flutterwave for Business (F4B) v2 and v3 APIs.
https://developer.flutterwave.com/
MIT License
6 stars 14 forks source link

onRedirect called twice #40

Closed georgeben closed 2 years ago

georgeben commented 2 years ago

I don't understand why on onRedirect is being called twice. Here's a snippet of my code.

async function handleRedirect(params) {
    console.log("Params!", params);
    if (loading) return
    setLoading(true);
    setShowPaymentDialog(false);
    if (params.status == "cancelled") {
      return;
    }
    try {
      console.log("Verifying transaction", params.tx_ref);
      const transactionResponse = await verifyTransaction(params.tx_ref);
      const transaction = transactionResponse.data.transaction;

      setTransaction(transaction);
    } catch (error) {
      console.log("Error", error);
    } finally {
      setLoading(false);
    }
  }
<FlutterwaveCheckout
          onAbort={handleAbort}
          onRedirect={handleRedirect}
          link={paymentLink || undefined}
          visible={showPaymentDialog}
        />

Please what am I doing wrong?

georgeben commented 2 years ago

I would appreciate any help I can get. Thank you in advance @thecodecafe @Corvus97 @Official-kornelios

thecodecafe commented 2 years ago

Hi @georgeben, we will look into this but for now, can you look into debouncing your redirect handler?

First within your component, before the handleRedirect method, do the following.

let redirectTimeout = useRef();

Then in your handleRedirect do the following.

async function handleRedirect(params) {
  // clear scheduled action
  clearTimeout(redirectTimeout.current);
  // delay action to prevent from reoccurring
  redirectTimeout.current = setTimeout(() => {
    console.log("Params!", params);
    if (loading) return
    setLoading(true);
    setShowPaymentDialog(false);
    if (params.status == "cancelled") {
      return;
    }
    try {
      console.log("Verifying transaction", params.tx_ref);
      const transactionResponse = await verifyTransaction(params.tx_ref);
      const transaction = transactionResponse.data.transaction;

      setTransaction(transaction);
    } catch (error) {
      console.log("Error", error);
    } finally {
      setLoading(false);
    }
  }, 100);
}

Let me know if this helps.

georgeben commented 2 years ago

Thank you @thecodecafe I was able to get it working.

habeebtheprogrammer commented 2 years ago

This issue has cost us alot of money.

thecodecafe commented 2 years ago

@habeebtheprogrammer apologies for this, we'll do our best to avert issues like this in the future, please can you try the solution here?

thecodecafe commented 2 years ago

I'll be closing this issue for now but feel free to open the issue again should in case the solution proffered above does not solve your problem.