Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
react-paystack
Advanced tools
This is an reactJS library for implementing paystack payment gateway
This is a react library for implementing paystack payment gateway
This React library provides a wrapper to add Paystack Payments to your React application
npm install react-paystack --save
or with yarn
yarn add react-paystack
This library can be implemented into any react application in 3 different ways:
Note that all 3 implementations produce the same results.
import React from 'react';
import logo from './logo.svg';
import { usePaystackPayment } from 'react-paystack';
import './App.css';
const config = {
reference: (new Date()).getTime().toString(),
email: "user@example.com",
amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};
// you can call this function anything
const onSuccess = (reference) => {
// Implementation for whatever you want to do with reference and after success call.
console.log(reference);
};
// 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(onSuccess, onClose)
}}>Paystack Hooks Implementation</button>
</div>
);
};
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<PaystackHookExample />
</div>
);
}
export default App;
import React from 'react';
import logo from './logo.svg';
import { PaystackButton } from 'react-paystack';
import './App.css';
const config = {
reference: (new Date()).getTime().toString(),
email: "user@example.com",
amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};
function App() {
// you can call this function anything
const handlePaystackSuccessAction = (reference) => {
// Implementation for whatever you want to do with reference and after success call.
console.log(reference);
};
// you can call this function anything
const handlePaystackCloseAction = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log('closed')
}
const componentProps = {
...config,
text: 'Paystack Button Implementation',
onSuccess: (reference) => handlePaystackSuccessAction(reference),
onClose: handlePaystackCloseAction,
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<PaystackButton {...componentProps} />
</div>
);
}
export default App;
import React from 'react';
import logo from './logo.svg';
import { PaystackConsumer } from 'react-paystack';
import './App.css';
const config = {
reference: (new Date()).getTime().toString(),
email: "user@example.com",
amount: 20000, //Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200
publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
};
// you can call this function anything
const handleSuccess = (reference) => {
// Implementation for whatever you want to do with reference and after success call.
console.log(reference);
};
// you can call this function anything
const handleClose = () => {
// implementation for whatever you want to do when the Paystack dialog closed.
console.log('closed')
}
function App() {
const componentProps = {
...config,
text: 'Paystack Button Implementation',
onSuccess: (reference) => handleSuccess(reference),
onClose: handleClose
};
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<PaystackConsumer {...componentProps} >
{({initializePayment}) => <button onClick={() => initializePayment(handleSuccess, handleClose)}>Paystack Consumer Implementation</button>}
</PaystackConsumer>
</div>
);
}
export default App;
If you want to send extra metadata e.g. Transaction description, user that made the transaction. Edit your config like so:
const config = {
// Your required fields
metadata: {
custom_fields: [
{
display_name: 'description',
variable_name: 'description',
value: 'Funding Wallet'
}
// To pass extra metadata, add an object with the same fields as above
]
}
};
Please checkout Paystack Documentation for other available options you can add to the tag
REMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM
git checkout -b feature-name
git commit -am 'Some commit message'
git push origin feature-name
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? Spread the word!
Don't forget to follow me on twitter!
Thanks! Olusegun Ayeni.
This project is licensed under the MIT License - see the LICENSE.md file for details
FAQs
This is an reactJS library for implementing paystack payment gateway
The npm package react-paystack receives a total of 5,829 weekly downloads. As such, react-paystack popularity was classified as popular.
We found that react-paystack demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.