React-flutterwave-rave NPM

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

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);
});

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: "test@test.com",
      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: "test@test.com",
      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: "test@test.com",
      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;