Closed
Description
After a transaction is successful a callback is triggered as usual, but if the user does not refresh the page and then decides to make another payment, the callback for the second transaction plus that of the first transaction are triggered. And when a third transaction is done the callbacks for the first, second and third transactions are triggered thereby sending the request to the server 3 times. A fourth transaction triggers 4 times, and so on, until the page is refreshed. It seems the previous callbacks are cached in memory and then run all over again before running the callback of the latest. This is a very dangerous issue and it should be looked at very urgently.
const [resetConfigKey, setResetConfigKey] = useState(0);
const [paymentConfig, setpPaymentConfig] = useState({
public_key: process.env.REACT_APP_FLUTTERWAVE_PUBLIC_KEY,
payment_options: "all",
customizations: {
// title: 'my Payment Title',
// description: 'Payment for items in cart',
logo: process.env.REACT_APP_FAVICON_URL,
},
});
const handleFlutterPayment = useFlutterwave(paymentConfig, [resetConfigKey]);
const handleUpdatePaymentConfig = (values) => {
setpPaymentConfig({
...paymentConfig,
tx_ref: transaction_ref,
amount: values.amount,
currency: values.currency,
customer: {
email: values.email,
// phonenumber: '07064586146',
name: `${values.first_name} ${values.last_name}`,
},
});
// Reset the config key to reload UseFlutterwave
setResetConfigKey(() => {
const k = resetConfigKey;
return k + 1;
});
};
const handlePayment = ()=>{
handleFlutterPayment({
callback: (resp) => {
dispatch(
sendToServer({
email: values.email,
first_name: values.first_name,
last_name: values.last_name,
})
).then((res) => {
closePaymentModal();
if (res.error) {
} else {
if (res.success == true) {
NotificationManager.success(res.message, "Success!")
}
}
}
}
});
},
onClose: () => {
},
});
}
Metadata
Metadata
Assignees
Labels
No labels