iamraphson / react-paystack

ReactJS library for implementing paystack payment gateway
https://www.npmjs.com/package/react-paystack
MIT License
432 stars 154 forks source link

OnSuccess & OnClose Function not working #101

Open multiman95 opened 3 months ago

multiman95 commented 3 months ago
const config = {
  reference: (new Date()).getTime().toString(),
  email: "demo@gmail.com",
  amount: Math.ceil(final_fees_to_pay) * 100, 
  currency: "GHS",
  channels: ["card", "bank", "mobile_money", "bank_transfer", "qr", "eft"],
  metadata: {
      "item_id": 'item-1003944'
  },
  publicKey: 'pk_test_4b43c',
};

// onSuccess, Verify Transaction in server and then redirect to Success Page
const onSuccess = (reference) => {

  // Implementation for whatever you want to do with reference and after success call.
  console.log('Transaction Success ', reference);
  alert(reference)

  router.replace('/success')
};

// Cancel transaction when user closes payment modal
const onClose = () => {

  // implementation for  whatever you want to do when the Paystack dialog closed.
  // alert('closed')
}

const PaystackHook = () => {

  const initializePayment = usePaystackPayment(config);

  return(
    <Button fullWidth color='primary' radius='full' size='lg' onClick={() => {initializePayment(onSuccess, onClose)}}> 
        <Image src='/images/default/paystack.jpg' width={30} height={30} className='rounded-full' alt='PayStack'/> Pay 
    </Button>
  )
}

return (
  <React.Fragment>

      <div className='mt-5'>
       <PaystackHook/>
      </div>

  </React.Fragment>
)
}

After payment success onSuccess does not work or throw any error and same as onClose

iamefe commented 3 months ago

Same here.

kodervine commented 2 months ago

I am having the same issue. Have you been able to work around this @multiman95 @iamefe

iamefe commented 2 months ago

@kodervine Yes. Here's what worked for me:

  initializePayment({ onSuccess, onClose });

I wrapped both onSuccess and onClose in curly brackets before they were recognized. I think the documentation needs to be updated.

kodervine commented 2 months ago

@kodervine Yes. Here's what worked for me:

  initializePayment({ onSuccess, onClose });

I wrapped both onSuccess and onClose in curly brackets before they were recognized. I think the documentation needs to be updated.

That worked. Thank you so very much. Yes, definitely a documentation issue

iamefe commented 2 months ago

@kodervine Yes. Here's what worked for me:

  initializePayment({ onSuccess, onClose });

I wrapped both onSuccess and onClose in curly brackets before they were recognized. I think the documentation needs to be updated.

That worked. Thank you so very much. Yes, definitely a documentation issue

You are welcome. I just made a pull request for the edit. https://github.com/iamraphson/react-paystack/pull/106

kodervine commented 2 months ago

@kodervine Yes. Here's what worked for me:

  initializePayment({ onSuccess, onClose });

I wrapped both onSuccess and onClose in curly brackets before they were recognized. I think the documentation needs to be updated.

That worked. Thank you so very much. Yes, definitely a documentation issue

You are welcome. I just made a pull request for the edit. #106

Yeah hopefully. I know the older integration I'd had with paystack without the curly braces still work. But let's see what they resolve it

daviddivinefavour commented 1 month ago

Well.. Thanks guys, was facing the same difficulty for over 40mins now