Need help with react-paystack?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

iamraphson
257 Stars 92 Forks MIT License 92 Commits 5 Opened issues

Description

ReactJS library for implementing paystack payment gateway

Services available

!
?

Need anything else?

Contributors list

# 93,078
CSS
payment...
reactjs
oauth2
54 commits
# 399,877
JavaScr...
CSS
payment...
payment...
4 commits
# 227,602
HTML
CSS
payment...
reactjs
2 commits
# 145,905
CSS
HTML
payment...
reactjs
2 commits
# 455,768
JavaScr...
CSS
payment...
payment...
2 commits
# 8,381
JavaScr...
Angular
es6-jav...
Node.js
2 commits
# 464,919
JavaScr...
CSS
payment...
payment...
2 commits
# 440,692
JavaScr...
CSS
payment...
payment...
2 commits
# 452,955
HTML
CSS
payment...
payment...
1 commit
# 452,022
JavaScr...
CSS
payment...
payment...
1 commit
# 519,032
JavaScr...
CSS
payment...
payment...
1 commit
# 506,027
JavaScr...
CSS
payment...
payment...
1 commit

react-paystack

This is a react library for implementing paystack payment gateway

Demo

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

  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: "[email protected]", amount: 20000, 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 (

{ initializePayment(onSuccess, onClose) }}>Paystack Hooks Implementation
); };

function App() { return (

logo

Edit src/App.js and save to reload.

Learn React
); }

export default App;

2. Using the paystack button

  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: "[email protected]", amount: 20000, 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="%7Blogo%7D" 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></paystackbutton>
  </div>
);

}

export default App;

3. using the Paystack consumer

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: "[email protected]", amount: 20000, 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="%7Blogo%7D" 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>
      {({initializePayment}) =&gt; <button onclick="{()"> initializePayment(handleSuccess, handleClose)}&gt;Paystack Consumer Implementation</button>}
    </paystackconsumer>
  </div>
);

}

export default App;

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! Ayeni Olusegun.

License

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.