This PayStackButton is not supportted on typescript

[chrispydev]

I keep getting this error when using typescript ype '{ email: string; amount: number; currency: any; metadata: { custom_field: string[]; }; publicKey: any; text: string; onSuccess: () => void; onClose: () => void; className: string; }' is not assignable to type 'PaystackButtonProps'. The types of 'metadata.custom_field' are incompatible between these types. Type 'string[]' is not assignable to type 'Record<string, string>[]'. Type 'string' is not assignable to type 'Record<string, string>

[discoverlance-com]

Can you send your code snippet of the props you are using or passing that's resulting in this error?

[Handavipul]

How can we change text of paystack popup button from "Pay" to "AUTH"

[kduprey]

The button is expecting type "callback" for the onSuccess prop however this has been defined as a function with no parameters allowed in the function, resulting in an error with passing a function with parameters when it is called.

[Onyelaudochukwuka]

I was about raising an issue on this The callback type wasn't configured correctly

[kduprey]

@Onyelaudochukwuka Exactly!! This is what is currently limiting me from migrating to the next major release. It would be great if we could get this resolved.

[Onyelaudochukwuka]

Exactly, I had to switch a single component to JavaScript before I could launch for production

[somteacodes]

Taking a hint from @Onyelaudochukwuka 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. In this example I used the hook method, but same logic sould apply to using the button method 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

[Mublin]

I had same issues but @chrispydev @iamraphson @Handavipul @discoverlance-com but here is how I handled it with typescript, I remove the function in reference and replaced it with callback which I imported, here is the tweak, I hope it fixes yours too.

code reference: Full repository

import { callback } from `'react-paystack/dist/types';

<PaystackButton {...componentProps as { 
    text: string;
    onSuccess: callback;
    onClose: () => void;
    reference: string;
    email: string;
    amount: number;
    publicKey: string;
}} /> 

You should be good to go with Typescript I hope it helps

[chrispydev]

Thanks to everyone I fixed this by using a different approach. And I waiting for ten days to close this issue