Adding ability to pass parameters to Callback functions

[kduprey]

I ran into the issue upon updating to v4 and the PaystackButton component would not let me pass parameters to my callback function for running onSuccess or onCancel. I am guessing this is due to the upgrade to TypeScript, but it should allow for functionality of passing parameters to these functions for more flexibility.

[kduprey]

@iamraphson Are you able to review this for me and approve for a merge? I would like to update my client's site to the non-vulnerable version of this library.

[Dunsin-cyber]

I was just about to make this same fix and make a PR, really needed for a Ts project i am working on @iamraphson

[somteacodes]

Hopefully this is merged soon. A workaround is to extract the payment logic to a child component in JavaScript and handle the callbacks without types and return to parent component (since parent is in ts, you can have type checking there)

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

[204070]

Hopefully this is merged soon. A workaround is to extract the payment logic to a child component in JavaScript and handle the callbacks without types and return to parent component (since parent is in ts, you can have type checking there)

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

Maybe you can also temporarily set the successHandler type to any for now instead of the long workaround. It should serve till the PR gets merged