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

2. 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: "[email protected]",
      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: "[email protected]",
      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: "[email protected]",
      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.