react-ravepayment

This is a ReactJS library for implementing RavePay Payment Gateway

Demo

Get Started

This React library provides a wrapper to add RavePay Payment to your React application

Install

npm install react-ravepayment --save

Then go ahead and reference the Rave inline script in your index.html:

<script src="//ravesandboxapi.flutterwave.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>

Usage

    import React, { Component } from 'react'
    // import the library
    import RavePaymentModal from 'react-ravepayment'
    
    class App extends Component {
    
    		state = {
    		  key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
    		  email: "foo@example.com", // customer email
    		  amount: "1000" // equals NGN 1000. Minimum amount allowed NGN 1 while on production or live system, it's 10
    	    }
    
    	  callback = (response) => {
    		  console.log(response);
    
    	  }
    
    	  close = () => {
    		  console.log("Payment closed");
    	  }
    
    	  getReference = () => {
    		  let text = "";
    		  let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.=";
    
    		  for( let i=0; i < 10; i++ )
    			  text += possible.charAt(Math.floor(Math.random() * possible.length));
    
    		  return text;
    	  }
    
    	render () {
        return (
          <div className='App'>
            <p className='App-intro'>
    	        <RavePaymentModal
    		        text="Make Payment"
    		        class="payButton"
    		        metadata={[{Device : 'IPhone X'}]}
    		        reference={this.getReference()}
    		        email={this.state.email}
    		        amount={this.state.amount}
    		        ravePubKey={this.state.key}
    		        callback={this.callback}
    		        close={this.close}
    	        />
            </p>
          </div>
        )
      }
    }
    
    export default App

Please checkout Rave Documentation for other available options you can add to the tag

Deployment

WHEN DEPLOYING TO PRODUCTION/LIVE SYSTEM, take note of the following;

Change RavePay Inline script,you kept in the index.html to

<script src="//api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>

Change RavePay PUBLIC KEY
Ensure you implement webhooks to receive automatic updates when a transaction happens.

Contributing

Fork it!
Create your feature branch: git checkout -b feature-name
Commit your changes: git commit -am 'Some commit message'
Push to the branch: git push origin feature-name
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

temiadesina/react-ravepayment