Comments (9)
Exactly, I had to switch a single component to JavaScript before I could launch for production
from react-paystack.
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
from react-paystack.
Can you send your code snippet of the props you are using or passing that's resulting in this error?
from react-paystack.
How can we change text of paystack popup button from "Pay" to "AUTH"
from react-paystack.
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.
from react-paystack.
I was about raising an issue on this
The callback type wasn't configured correctly
from react-paystack.
@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.
from react-paystack.
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
from react-paystack.
Thanks to everyone I fixed this by using a different approach.
And I waiting for ten days to close this issue
from react-paystack.
Related Issues (20)
- OnSuccess & OnClose Function not working HOT 7
- Security Vulnerabilities With Package HOT 6
- Add disabled prop to PayStackButton HOT 2
- Paystack with sanity.io
- TypeScript support HOT 1
- Subscription Start Date HOT 1
- Interface conflicts for the metadata
- onSuccess not accepting props HOT 3
- Ok
- Passing payment options
- The `invoice.update` event isn't getting called in webhook HOT 1
- How do I properly set it up on Next Js HOT 3
- close paystack popup HOT 9
- Cannot load paystack inline script when using SharedArrayBuffer
- pass in access code to either Popup or Button to retrieves the transaction details, HOT 3
- Error when initialising paystack HOT 1
- Export Currency to be accessed by users
- Google Tag Inclusion in Package HOT 1
- why is the amount calculated in kobo HOT 4
- Version 5.0.0m not compatible with react 18.2.0
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-paystack.