onSuccess not accepting props

[ayocodes]

i am getting error Types of property 'onSuccess' are incompatible. Type '(reference: any) => void' is not assignable to type 'callback'.

some code snippet onSuccess: (reference:any) => { handleSuccess(reference)}, const handleSuccess = (reference: any) =>{ axios.put( https://relayed-service.herokuapp.com/user/verifyTransaction, { UPAddress: account, reference: reference.reference, message: reference.message, } );

}

[somteacodes]

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: "[email protected]",
    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

[dhatGuy]

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;

[kduprey]

See PR #67