React-Flutterwave-Rave

Implement Rave by Flutterwave easily with ReactJS

• Go to Flutterwave Rave Live to get your LIVE public and private key
• Go to Flutterwave Rave Test to get your TEST public and private key

Installation

npm install react-flutterwave-rave --save

Add this Rave Inline Script to your index.html for a testing account

<script src="https://rave-api-v2.herokuapp.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>

Add this Rave Inline Script to your index.html for a live account

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

Available Props

Name	Type	Default	Required	Description
pay_button_text	String	False	No	The text that displays on your button.
class	String		No	The css style class of the button.
payment_method	String	both	No	This allows you select the payment option you want for your users, this can be both, card, ussd or account.
metadata	Object Array	{}	No	These are additional information you want to pass through the payment gateway .
currency	String	NGN	No	The currency you want to charge the customer.
redirect_url	String		No	URL to redirect to when transaction is completed.
country	String	NG	No	The country of operation.
customer_firstname	String		No	First name of the customer.
customer_lastname	String		No	Last name of the customer.
custom_title	String		No	Text to be displayed as the title of the payment modal.
custom_description	String		No	Text to be displayed as a short modal description.
custom_logo	String		No	Link to the Logo image.
txref	String	It will be generated automatically when left blank	No	Unique transaction reference provided by the merchant.
customer_email	String		No	Email of the customer.
customer_phone	String		No	Phone number of the customer.
amount	String		No	Amount to charge.
ravePubKey	String		No	Your merchant public key provided when you sign up for rave.
callback	Function		Yes	A function to be called on successful card charge. User’s can always be redirected to a successful or failed page supplied by the merchant here based on response.
onclose	Function		Yes	A function to be called when the pay modal is closed.

Available Functions

1. RequeryTransaction({ live, txref, SECKEY })

This requeries a transaction, useful to check if a failed transaction is successful

• live: false or true Set to true if you are using a live account and vice versa
• txref: The transaction reference
• SECKEY: Your API secret key

RequeryTransaction({ live: false, txref: response.tx.txRef, SECKEY: "FLWSECK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X" })
.then(function (resp) {
  // console.log(resp);
})
.catch(function (error) {
  // console.log(error);
});

1. VerifyTransaction({ live, txref, SECKEY })

This validates a transaction, you can get your metas passed through this

• live: false or true Set to true if you are using a live account and vice versa
• txref: The transaction reference
• SECKEY: Your API secret key

 
var currency = "NGN"; //Gotten from server or hardcoded
var amount = "3000"; //Gotten from server or hardcoded
 
VerifyTransaction({ live: false, txref: response.tx.txRef, SECKEY: "FLWSECK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X" })
.then(function (resp) {
  // console.log(resp);
  var chargeResponse = resp.data.data.flwMeta.chargeResponse;
  var chargeAmount = resp.data.data.amount;
  var chargeCurrency = resp.data.data.transaction_currency;
 
 
  if ((chargeResponse == "00" || chargeResponse == "0") && (chargeAmount == amount) && (chargeCurrency == currency)) {
    console.log("Successful");
    
    console.log(resp.data);
    
    //Give Value and return to Success page
  } else {
    console.log("Error");
    console.log(resp);
    
    
    //Dont Give Value and return to Failure page
  }
})
.catch(function (error) {
  // console.log(error);
});

Usage

Sample 1

This is a basic sample of using Rave

import React, { Component } from 'react';
import './App.css';
// Import the Library
import Rave from 'react-flutterwave-rave'
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
      phone: "0000000000000",
      amount: 2000,
      firstname: "Oluwole",
      lastname: "Adebiyi",
      email: "[e-mail]",
      room_number: "23A",
      hostel: "Silver 1",
      ticket_number: 3,
    }
    this.callback = this.callback.bind(this);
    this.close = this.close.bind(this);
  }
 
 
  callback = (response) => {
    
    console.log(response);
    
    
  }
 
 
  close = () => {
    console.log("Payment closed");
  }
 
  render() {
    return (
      <div className="App">
        <Rave
          pay_button_text="Pay With Rave"
          class="button"
          metadata={[
            { metaname: 'Tickets', metavalue: this.state.ticket_number },
            { metaname: 'Hostel', metavalue: this.state.hostel },
            { metaname: 'Room', metavalue: this.state.room_number }
          ]}
          payment_method="card"
          customer_email={this.state.email}
          customer_phone={this.state.phone}
          amount={"" + this.state.amount * this.state.ticket_number + ""}
          ravePubKey={this.state.key}
          callback={this.callback}
          onclose={this.close}
        />
      </div>
    );
  }
}
 
export default App;
 

Sample 2

This Sample shows how to use Rave and how to verify transaction

 
import React, { Component } from 'react';
import './App.css';
// Import the Library
import Rave, { VerifyTransaction } from 'react-flutterwave-rave'
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
      phone: "000000000000",
      amount: 2000,
      firstname: "Oluwole",
      lastname: "Adebiyi",
      email: "[e-mail]",
      room_number: "23A",
      hostel: "Silver 1",
      ticket_number: 3,
    }
    this.callback = this.callback.bind(this);
    this.close = this.close.bind(this);
  }
 
 
  callback = (response) => {
 
    return VerifyTransaction({ live: false, txref: response.tx.txRef, SECKEY: "FLWSECK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X" })
    .then(function (resp) {
      console.log(resp);
    })
    .catch(function (error) {
      console.log(error);
    });
    
  }
 
 
  close = () => {
    console.log("Payment closed");
  }
 
  render() {
    return (
      <div className="App">
        <Rave
          pay_button_text="Pay With Rave"
          class="button"
          metadata={[
            { metaname: 'Tickets', metavalue: this.state.ticket_number },
            { metaname: 'Hostel', metavalue: this.state.hostel },
            { metaname: 'Room', metavalue: this.state.room_number }
          ]}
          payment_method="card"
          customer_email={this.state.email}
          customer_phone={this.state.phone}
          amount={"" + this.state.amount * this.state.ticket_number + ""}
          ravePubKey={this.state.key}
          callback={this.callback}
          onclose={this.close}
        />
      </div>
    );
  }
}
 
export default App;
 
 

Sample 3

This Sample shows how to use Rave and requery a transaction

 
import React, { Component } from 'react';
import './App.css';
// Import the Library
import Rave, { RequeryTransaction } from 'react-flutterwave-rave'
 
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: "FLWPUBK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X", // RavePay PUBLIC KEY
      phone: "000000000000",
      amount: 2000,
      firstname: "Oluwole",
      lastname: "Adebiyi",
      email: "[e-mail]",
      room_number: "23A",
      hostel: "Silver 1",
      ticket_number: 3,
    }
    this.callback = this.callback.bind(this);
    this.close = this.close.bind(this);
  }
 
 
  callback = (response) => {
 
    return RequeryTransaction({ live: false, txref: response.tx.txRef, SECKEY: "FLWSECK-XXXXXXXXXXXXXXXXXXXXXXXXXXXX-X" })
    .then(function (resp) {
      console.log(resp);
    })
    .catch(function (error) {
      console.log(error);
    });
    
  }
 
 
  close = () => {
    console.log("Payment closed");
  }
 
  render() {
    return (
      <div className="App">
        <Rave
          pay_button_text="Pay With Rave"
          class="button"
          metadata={[
            { metaname: 'Tickets', metavalue: this.state.ticket_number },
            { metaname: 'Hostel', metavalue: this.state.hostel },
            { metaname: 'Room', metavalue: this.state.room_number }
          ]}
          payment_method="card"
          customer_email={this.state.email}
          customer_phone={this.state.phone}
          amount={"" + this.state.amount * this.state.ticket_number + ""}
          ravePubKey={this.state.key}
          callback={this.callback}
          onclose={this.close}
        />
      </div>
    );
  }
}
 
export default App;
 

Contributing

Please feel free to fork this package and contribute by submitting a pull request to enhance the functionalities.

Kindly star the GitHub repo and share ❤️. I ❤️ Flutterwave

Kindly follow me on twitter!

Credits

• Oluwole Adebiyi (KingFlamez)

License

The MIT License (MIT). Please see License File for more information.