onRedirect function is called twice

[Kingswhale]

Kindly help me with this

<PayWithFlutterwave onRedirect={this.onsuccess} options={{ tx_ref: Date.parse(new Date()).toString(), authorization: PUBLICKEY_FLUTTER, customer: { email: email.toString(), phonenumber: phoneNumber.toString(), name: userName.toString(), }, amount: parseFloat(amount), currency: 'NGN', payment_options: 'card', }} />

[thecodecafe]

Hello @Kingswhale, so sorry you're experiencing this, but I've been unable to reproduce from my end. Here's a trick you apply for now to resolve this on your end. Debounce the redirect handler so that it only fires once, see the example below.

class YourComponent extends React.Component {
  ...
  redirectTimeout;
  ...
  onSuccess = (result) => {
    // clear timer
    clearTimeout(this.redirectTimeout);
    // set timer to handle result in 100ms
    this.redirectTimeout = setTimeoute(() => {
      // do something with the result
    }, 100);
  };
  ...
  render() {
    ...
    return (
      ...
      <PayWithFlutterwave
        onRedirect={this.onSuccess}
        options={{
        tx_ref: Date.parse(new Date()).toString(),
        authorization: PUBLICKEY_FLUTTER,
        customer: {
          email: email,
          phonenumber: phoneNumber,
          name: userName,
        },
        amount: amount,
        currency: 'NGN',
        payment_options: 'card',
        }}
      />
      ...
    );
  }
}

Please try this out and let me know if it solves your problem. Thanks.

[thecodecafe]

This will be closed, please feel free to reopen if the proposed solution above does not suffice.