react-paystack

This is a react library for implementing paystack payment gateway

Demo

Get Started

This React library provides a wrapper to add Paystack Payments to your React application

Install

npm install react-paystack --save

or with yarn

yarn add react-paystack

Usage

This library can be implemented into any react application in 3 different ways:

1. By using hooks provided by the library
2. By using a button provided by the library
3. By using a context consumer provided by the library

Note that all 3 implementations produce the same results.

1. Using the paystack hook

importReactfrom'react';importlogofrom'./logo.svg';import{usePaystackPayment}from'react-paystack';import'./App.css';constconfig={reference: (newDate()).getTime().toString(),email: "user@example.com",amount: 20000,//Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',};// you can call this function anythingconstonSuccess=(reference)=>{// Implementation for whatever you want to do with reference and after success call.console.log(reference);};// you can call this function anythingconstonClose=()=>{// implementation for whatever you want to do when the Paystack dialog closed.console.log('closed')}constPaystackHookExample=()=>{constinitializePayment=usePaystackPayment(config);return(<div><buttononClick={()=>{initializePayment(onSuccess,onClose)}}>Paystack Hooks Implementation</button></div>);};functionApp(){return(<divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo"/><p>
Edit <code>src/App.js</code> and save to reload.
</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">
Learn React
</a></header><PaystackHookExample/></div>);}exportdefaultApp;

2. Using the paystack button

importReactfrom'react';importlogofrom'./logo.svg';import{PaystackButton}from'react-paystack';import'./App.css';constconfig={reference: (newDate()).getTime().toString(),email: "user@example.com",amount: 20000,//Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',};functionApp(){// you can call this function anythingconsthandlePaystackSuccessAction=(reference)=>{// Implementation for whatever you want to do with reference and after success call.console.log(reference);};// you can call this function anythingconsthandlePaystackCloseAction=()=>{// implementation for whatever you want to do when the Paystack dialog closed.console.log('closed')}constcomponentProps={
...config,text: 'Paystack Button Implementation',onSuccess: (reference)=>handlePaystackSuccessAction(reference),onClose: handlePaystackCloseAction,};return(<divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo"/><p>
Edit <code>src/App.js</code> and save to reload.
</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">
Learn React
</a></header><PaystackButton{...componentProps}/></div>);}exportdefaultApp;

3. using the Paystack consumer

importReactfrom'react';importlogofrom'./logo.svg';import{PaystackConsumer}from'react-paystack';import'./App.css';constconfig={reference: (newDate()).getTime().toString(),email: "user@example.com",amount: 20000,//Amount is in the country's lowest currency. E.g Kobo, so 20000 kobo = N200publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',};// you can call this function anythingconsthandleSuccess=(reference)=>{// Implementation for whatever you want to do with reference and after success call.console.log(reference);};// you can call this function anythingconsthandleClose=()=>{// implementation for whatever you want to do when the Paystack dialog closed.console.log('closed')}functionApp(){constcomponentProps={
...config,text: 'Paystack Button Implementation',onSuccess: (reference)=>handleSuccess(reference),onClose: handleClose};return(<divclassName="App"><headerclassName="App-header"><imgsrc={logo}className="App-logo"alt="logo"/><p>
Edit <code>src/App.js</code> and save to reload.
</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">
Learn React
</a></header><PaystackConsumer{...componentProps}>{({initializePayment})=><buttononClick={()=>initializePayment(handleSuccess,handleClose)}>Paystack Consumer Implementation</button>}</PaystackConsumer></div>);}exportdefaultApp;

Sending Metadata with Transaction

If you want to send extra metadata e.g. Transaction description, user that made the transaction. Edit your config like so:

constconfig={// Your required fieldsmetadata: {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

Deployment

REMEMBER TO CHANGE THE KEY WHEN DEPLOYING ON A LIVE/PRODUCTION SYSTEM

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feature-name
3. Commit your changes: git commit -am 'Some commit message'
4. Push to the branch: git push origin feature-name
5. Submit a pull request 😉😉

How can I thank you?

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.

License

This project is licensed under the MIT License - see the LICENSE.md file for details