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>
)
}