Rave-Javascript-SDK

Implement Rave by Flutterwave easily with Javascript frameworks and Libraries

• 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

Tested on

• VueJS
• NuxtJS
• ReactJS

Installation

npm install rave-javascript-sdk --save

ReactJS and VueJS

Add this Rave Inline Script to your index.html for a test 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>

Nuxt

Add this to your nuxt.config.js or in Vue Page head for a test account

head: {
    script: [
      ---
      { src: 'https://rave-api-v2.herokuapp.com/flwv3-pug/getpaidx/api/flwpbf-inline.js', body: true }
      ---
    ]
  },

Add this to your nuxt.config.js or in Vue Page head for a live account

head: {
    script: [
      ---
      { src: 'https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js', body: true }
      ---
    ]
  },

Basic Usage

VueJS Sample

  <template>
    <button v-on:click="buy">Buy</button>
  </template>
  <script>
  import Rave from 'rave-javascript-sdk'
  export default {
    methods: {
      buy() {
        var rave = new Rave();
        
        rave.setEmail('[email protected]')
            .setAmount("3000")
            .setPublicKey("FLWPUBK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X")
            .setModalTitle("Flamez fresh")
            .setMeta([
                      { metaname: 'Room', metavalue: "36A" },
                      { metaname: 'Colour', metavalue: "Blue" }
                    ])
            .initialize()
      }
    }
  }
  </script>

ReactJS Sample

import React, { Component } from 'react';
import Rave from 'rave-javascript-sdk';

class Events extends Component {
  constructor(props) {
    super(props);
    this.buy = this.buy.bind(this);
  }

  buy() {
    var rave = new Rave();
        
    rave.setEmail('[email protected]')
        .setAmount("3000")
        .setPublicKey("FLWPUBK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X")
        .setModalTitle("Flamez fresh")
        .setMeta([
                  { metaname: 'Room', metavalue: "36A" },
                  { metaname: 'Colour', metavalue: "Blue" }
                ])
        .initialize()
  }

  render() {
    return (
      <div>
          <button onClick={this.buy}>Buy</button>
      </div>
    )
  }
}

Available Rave methods

| Name | Type | Default | Required | Description | | ------------------ | ------------ | -------- | -------- | ----------- | | setPublicKey | String | | Yes | Your merchant public key provided when you sign up for rave. | | setEmail | String | | Yes | Email of the customer. | | setAmount | String | | Yes | Amount to charge. | | setPhone | String | | No | Phone number of the customer. | | setPaymentMethod | String | both | No | This allows you select the payment option you want for your users, this can be both, card, ussd or account. | | setMeta | Object Array | [] | No | These are additional information you want to pass through the payment gateway .| | setCurrency | String | NGN | No | The currency you want to charge the customer. | | setRedirectURL | String | | No | URL to redirect to when transaction is completed. | | setCountry | String | NG | No | The country of operation. | | setFirstname | String | | No | First name of the customer. | | setLastName | String | | No | Last name of the customer. | | setModalTitle | String | | No | Text to be displayed as the title of the payment modal. | | setDescription | String | | No | Text to be displayed as a short modal description. | | setLogo | String | | No | Link to the Logo image. | | setTransactionReference | String | It will be generated automatically when left blank | No | Unique transaction reference provided by the merchant. | | setCallback | Function | | No | 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. | | setCancel | Function | | No | 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);
});

More Samples

VueJS with Transaction Verification

  <template>
    <button v-on:click="buy">Buy</button>
  </template>
  <script>
  import Rave from 'rave-javascript-sdk'
  export default {
    methods: {
      buy() {
        var rave = new Rave();
        
        rave.setEmail('[email protected]')
            .setAmount("3000")
            .setPublicKey("FLWPUBK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X")
            .setModalTitle("Flamez fresh")
            .setCancel(this.cancel)
            .setCallback(this.callback)
            .setMeta([
                      { metaname: 'Room', metavalue: "36A" },
                      { metaname: 'Colour', metavalue: "Blue" }
                    ])
            .initialize()
      },
      callback(resp) {
        return VerifyTransaction({ live: false, txref: resp.tx.txRef, SECKEY: "FLWSECK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X" })
          .then(function (response) {
            console.log(response);
            ;
          })
          .catch(function (error) {
            console.log(error);

          });
      },
      cancel() {
        console.log("closed"); 
      }
    }
    }
  }
  </script>

ReactJS with Transaction Verification

import React, { Component } from 'react';
import Rave, { VerifyTransaction } from 'rave-javascript-sdk';

class Events extends Component {
  constructor(props) {
    super(props);
    this.buy = this.buy.bind(this);
  }

  buy() {
    var rave = new Rave();

    rave.setEmail('[email protected]')
        .setAmount("3000")
        .setPublicKey("FLWPUBK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X")
        .setModalTitle("Flamez fresh")
        .setCancel(this.cancel)
        .setCallback(this.callback)
        .setMeta([
                  { metaname: 'Room', metavalue: "36A" },
                  { metaname: 'Colour', metavalue: "Blue" }
                ])
        .initialize()
  }


  callback(resp) {
    return VerifyTransaction({ live: false, txref: resp.tx.txRef, SECKEY: "FLWSECK-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-X" })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);

      });
  }

  cancel() {
    console.log("closed");
  }

  render() {
    return (
      <div>
          <button onClick={this.buy}>Buy</button>
      </div>
    )
  }
}

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.