onSuccess not accepting props #62

Activity

1. somteacodes commented on Sep 25, 2022

   

   somteacodes

   on Sep 25, 2022

   Last edited by somteacodes

   More actions

   a workaround is to extract the payment logic to a child component in JavaScript instead of a typescript component, as the issue is from incorrect typings from the package.

   Parent Component named PaymentPage.tsx name an be called anything

   import PaymentWithPaystack from './components/PaymentWithPaystack'
     interface PaymentRef {
       message: string;
       redirecturl: string;
       reference: number;
       status: string;
       trans: number;
       transaction: number;
       trxref: number;
     }
   const PaymentPage= () =>{
     const paymentResponse = (ref: PaymentRef )=>{  
         console.log(ref);
       }
   
       return (
       <>
       //....Other components
       <PaymentWithPaystack amount={300000} paymentResponse={paymentResponse}/>
       </>
       )
   }
   export default PaymentPage;

   Child Component named PaymentWithPaystack.js name can be called anything

   import { usePaystackPayment } from 'react-paystack';
   
   const PaymentWithPaystack = ({amount=0, paymentResponse }) => {
     const config = {
       reference: (new Date()).getTime().toString(),
       email: "user@example.com",
       amount: amount,
       publicKey: 'pk_test_.........',
     };
     
     // you can call this function anything
     const handleSuccess = (ref) => {
     // Implementation for whatever you want to do with reference and after success call.
     //  console.log(ref);
      paymentResponse(ref)
      
     };
     
     // you can call this function anything
     const onClose = () => {
     // implementation for  whatever you want to do when the Paystack dialog closed.
     console.log('closed')
     }
     
     const PaystackHookExample = () => {
       const initializePayment = usePaystackPayment(config);
       return (
         <div>
             <button onClick={() => {
                 initializePayment(handleSuccess, onClose)
             }}>Paystack Hooks Implementation</button>
         </div>
       );
     };
     return (
       <div>
         
         <PaystackHookExample />
       </div>
       
     )
   }
   
   export default PaymentWithPaystack

   👍React with 👍1Reacted by Okegbenro Abayomi
2. dhatGuy commented on Oct 12, 2022

   

   dhatGuy

   on Oct 12, 2022

   More actions

   interface PaymentRef {
       message: string;
       redirecturl: string;
       reference: number;
       status: string;
       trans: number;
       transaction: number;
       trxref: number;
     }

   I think reference could be either number or string
   reference: number | string;
3. kduprey commented on Dec 3, 2022

   

   kduprey

   on Dec 3, 2022

   Contributor

   More actions

   See PR #67