react-fincra

This is a react library for implementing fincra payment gateway

Demo

Get Started

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

Install

npm install react-fincra --save

or with yarn

yarn add react-fincra

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 fincra hook

  import React from 'react';
  import logo from './logo.svg';
  import { useFincraPayment } from 'react-fincra';
  import './App.css';
  
  const config = {
      reference: (new Date()).getTime().toString(),
      email: "[e-mail]",
      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 Fincra dialog closed.
    console.log('closed')
  }

  const FincraHookExample = () => {
      const initializePayment = useFincraPayment(config);
      return (
        <div>
            <button onClick={() => {
                initializePayment(onSuccess, onClose)
            }}>Fincra 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>
        <FincraHookExample />
      </div>
    );
  }
  
  export default App;

2. Using the fincra button

  import React from 'react';
  import logo from './logo.svg';
  import { FincraButton } from 'react-fincra';
  import './App.css';
  
  const config = {
    reference: (new Date()).getTime().toString(),
    email: "[e-mail]",
    amount: 20000,
    publicKey: 'pk_test_dsdfghuytfd2345678gvxxxxxxxxxx',
  };
  
  function App() {
    // you can call this function anything
    const handleFincraSuccessAction = (reference) => {
      // Implementation for whatever you want to do with reference and after success call.
      console.log(reference);
    };

    // you can call this function anything
    const handleFincraCloseAction = () => {
      // implementation for  whatever you want to do when the Fincra dialog closed.
      console.log('closed')
    }

    const componentProps = {
        ...config,
        text: 'Fincra Button Implementation',
        onSuccess: (reference) => handleFincraSuccessAction(reference),
        onClose: handleFincraCloseAction,
    };

    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>
        <FincraButton {...componentProps} />
      </div>
    );
  }
  
  export default App;

3. using the Fincra consumer

import React from 'react';
import logo from './logo.svg';
import { FincraConsumer } from 'react-fincra';
import './App.css';
  
  const config = {
      reference: (new Date()).getTime().toString(),
      email: "[e-mail]",
      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 Fincra dialog closed.
    console.log('closed')
  }

  function App() {
      const componentProps = {
          ...config,
          text: 'Fincra 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>
        <FincraConsumer {...componentProps} >
          {({initializePayment}) => <button onClick={() => initializePayment(handleSuccess, handleClose)}>Fincra Consumer Implementation</button>}
        </FincraConsumer>
      </div>
    );
  }
  
  export default App;

Please checkout Fincra 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