# react-flutterwave-rave

> This is a reactJS library for implementing rave payment gateway

Latest version **1.0.4** (published 2018-03-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-flutterwave-rave
pnpm add react-flutterwave-rave
yarn add react-flutterwave-rave
bun add react-flutterwave-rave
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-03-24 |
| First published | 2018-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 107.3 KB |
| Known vulnerabilities | 0 (+24 in 1 direct dependencies) |
| Install scripts | no |
| Author | Oluwole Adebiyi |
| Maintainers | kingflamez |
| Keywords | Javascript, rave.flutterwave.com, github, laravel, Open Source, payments, kingflamez, ReactJS, React, rave, payment gateway, flutterwave, Gateway |

## Links

- npm: https://www.npmjs.com/package/react-flutterwave-rave
- Repository: https://github.com/kingflamez/react-flutterwave-rave
- Homepage: https://github.com/kingflamez/react-flutterwave-rave#readme
- Issues: https://github.com/kingflamez/react-flutterwave-rave/issues
- npm.io page: https://npm.io/package/react-flutterwave-rave

## Dependencies (5)

- [axios](https://npm.io/package/axios.md) ^0.18.0
- [react](https://npm.io/package/react.md) ^15.5.4
- [webpack](https://npm.io/package/webpack.md) ^2.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.1
- [querystring](https://npm.io/package/querystring.md) ^0.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-03-24
- 1.0.3 — 2018-03-24
- 1.0.2 — 2018-03-24
- 1.0.1 — 2018-03-24
- 1.0.0 — 2018-03-24

## README

# React-Flutterwave-Rave

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
[![npm version](https://badge.fury.io/js/react-flutterwave-rave.svg)](https://badge.fury.io/js/react-flutterwave-rave)

> Implement Rave by Flutterwave easily with ReactJS

- Go to [Flutterwave Rave Live](https://rave.flutterwave.com) to get your **`LIVE`** public and private key
- Go to [Flutterwave Rave Test](https://raveappv2.herokuapp.com) to get your **`TEST`** public and private key


## Installation
```bash
npm install react-flutterwave-rave --save
```

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

```javascript
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

```javascript

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

```javascript
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

```javascript

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

```javascript

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;

```

## 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](https://twitter.com/mrflamez_)!

## Credits

- [Oluwole Adebiyi (KingFlamez)](https://github.com/kingflamez)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

---
_Source: https://npm.io/package/react-flutterwave-rave · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._