Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kingflamez/rave-javascript-sdk
To integrate Rave easily with Javascript Libraries and Frameworks
https://github.com/kingflamez/rave-javascript-sdk
flutterwave flutterwave-api flutterwave-rave flutterwave-ravepay-api kingflamez nuxt nuxtjs payment-gateway payment-integration reactjs sdk-js transaction transaction-requery transaction-verification vuejs
Last synced: 4 days ago
JSON representation
To integrate Rave easily with Javascript Libraries and Frameworks
- Host: GitHub
- URL: https://github.com/kingflamez/rave-javascript-sdk
- Owner: kingflamez
- License: mit
- Created: 2018-03-27T09:38:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-04-13T14:05:20.000Z (over 6 years ago)
- Last Synced: 2024-11-07T08:46:32.651Z (8 days ago)
- Topics: flutterwave, flutterwave-api, flutterwave-rave, flutterwave-ravepay-api, kingflamez, nuxt, nuxtjs, payment-gateway, payment-integration, reactjs, sdk-js, transaction, transaction-requery, transaction-verification, vuejs
- Language: JavaScript
- Size: 156 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Rave-Javascript-SDK
[](LICENSE)
[](https://badge.fury.io/js/rave-javascript-sdk)
[](https://www.npmjs.com/package/rave-javascript-sdk)
> Implement Rave by Flutterwave easily with Javascript frameworks and Libraries
- 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
## Tested on
- VueJS
- NuxtJS
- ReactJS
## Installation
```bash
npm install rave-javascript-sdk --save
```
### ReactJS and VueJS
Add this Rave Inline Script to your `index.html` for a test account
```html
```
Add this Rave Inline Script to your `index.html` for a live account
```html
```
### Nuxt
Add this to your `nuxt.config.js` or in `Vue Page` head for a test account
```javascript
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
```javascript
head: {
script: [
---
{ src: 'https://api.ravepay.co/flwv3-pug/getpaidx/api/flwpbf-inline.js', body: true }
---
]
},
```
## Basic Usage
### VueJS Sample
```html
Buy
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()
}
}
}
```
### ReactJS Sample
```javascript
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 (
Buy
)
}
}
```
## 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
```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);
});
```
## More Samples
### VueJS with Transaction Verification
```html
Buy
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");
}
}
}
}
```
### ReactJS with Transaction Verification
```javascript
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 (
Buy
)
}
}
```
## 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.