# Rave By Flutterwave React Native WebView Component
[](#contributors-)
This is the react native SDK for Rave By [Flutterwave.](https://rave.flutterwave.com/)
πΈπ³The package allows you accept payment using Rave by Flutterwave and guess what , it doesn't require any form of linking, just install and begin to use .
### Compatibility
Our release cycle is independent of `react-native`. We follow semver and here is the compatibility table:
|`@react-native-community/cli` |`react-native`|
| --| --|
|[^1.0.0](https://github.com/react-native-community/cli/tree/1.x) |^0.59.0|
## Table Of Content
- [Getting Started](https://github.com/react-native-nigeria/react-native-rave-webview#getting-started)
- [Installations](https://github.com/react-native-nigeria/react-native-rave-webview#installations)
- [Deployment](https://github.com/react-native-nigeria/react-native-rave-webview#deployment)
- [How It Works](https://github.com/react-native-nigeria/react-native-rave-webview#how-it-works)
- [Usage](https://github.com/react-native-nigeria/react-native-rave-webview#usage)
- [API](https://github.com/react-native-nigeria/react-native-rave-webview#API)
- [Contributions](https://github.com/react-native-nigeria/react-native-rave-webview#contributions)
## Getting Started
### [](https://github.com/react-native-nigeria/react-native-rave-webview#prerequisites)Prerequisites
- [Rave Public And Encryption Keys](https://rave.flutterwave.com/dashboard/settings/apis)
- [Node](https://nodejs.org/en/)
- [NPM](https://www.npmjs.com/get-npm)
- [React Native](https://facebook.github.io/react-native/docs/getting-started.html)
## Installations
> To use react native rave webview in your application, you need to have `Node` and `npm` downloaded and installed on your machine.
- [Click Here](https://nodejs.org/en/) to download and install `Node` to your machine, `npm` is always automatically installed when you install `Node`.
- To ensure you have `Node` and `npm` installed, enter the following command into your terminal/command prompt `node -v` and `npm -v` respectively.
- To run `react native` on your machine you can use `npm install -g expo-cli` to install [Expo CLI](https://expo.io/) a command line utility to get you started quickly or use this command `npm install -g react-native-cli` to install the [react native CLI](https://facebook.github.io/react-native/docs/getting-started.html).
## Deployment
> To Implement Rave By Flutterwave easily with React Native
- You can get your Public, Secret and your Encryption Keys on your account by clicking this link >>> [Flutterwave Rave Live](https://rave.flutterwave.com/dashboard/settings/apis).
- To get your **`TEST`** public, secret and encryption keys click on the `Live Mode` Toggle button to switch to Test account and `Test Mode` Toggle button to switch to live.
- This is shown in the screenshots displayed below.
## How It Works
This is a simple demonstration of how to set up a simple react native app and integrate `rave react native SDK` into it.
Using the [Expo CLI](https://expo.io/) command line utility, Enter the following command to get started:
- `expo init AwesomeProject`
- `cd AwesomeProject`
- `npm start`
- You should get this from your terminal:
- Install the Expo client or mobile application from [Apple Store](https://itunes.apple.com/app/apple-store/id982107779) or [Playstore](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)
- Open the Expo client app you installed on your mobile phone, then scan the barcode displaying on the terminal on your PC.
- If successfully scanned and built, your app should load up on your mobile phone with the result in the image below;
### Integrating Rave React Native
You can pull in react-native-rave-webview into app with the steps below;
- Change directory into your current project directory from your terminal and enter this command:
`npm install react-native-rave-webview --save`
### [](https://github.com/react-native-nigeria/react-native-rave-webview#or)OR
`yarn add react-native-rave-webview`
and that's it, you're all good to go!
`Note:` To use `Yarn` on your machine [Click Here](https://yarnpkg.com/en/docs/install)
## Usage
### [](https://github.com/react-native-nigeria/react-native-rave-webview#payments)Payments
#### [](https://github.com/react-native-nigeria/react-native-rave-webview#1--import-rave-component)1. import Rave Component
``` javascript
import Rave from 'react-native-rave-webview';
```
#### 2. Set your success, failure and close methods
``` javascript
constructor (props) {
super(props)
}
onSuccess (data) {
console.log('success', data)
// You can get the transaction reference from successful transaction charge response returned and handle your transaction verification here
}
onCancel () {
console.log('error', 'Transaction was Cancelled!')
}
onError () {
// an error occoured
}
```
#### 3. Use component (ensure to set currency for the desired payment method to display)
``` javascript
render () {
return (
this.onCancel()}
onSuccess={transactionRef => this.onSuccess(transactionRef)}
btnStyles={{
backgroundColor: 'green',
width: 100,
alignContent: 'center'
}}
textStyles={{ color: 'white', alignSelf: 'center' }}
onError={() => {
alert('something went wrong')
}}
txref='1234'
/>
)
}
```
## API's
#### [](https://github.com/react-native-nigeria/react-native-rave-webview#API)all React-Native-rave-WebView API
| Name | use/description | extra |
| :--- | :---: | ---: |
| `buttonText` | Defines text on the button | default: `Pay Now` |
| `textStyles` | Defines styles for text in button | `nill` |
| `btnStyles` | Defines style for button | `nill` |
| `raveKey` | Public or Private paystack key(visit https://rave.flutterwave.com to get yours) |`nill` |
| `amount` | Amount to be paid | `nill` |
| `txref` | set TransactionRef of transaction | `nill` |
| `ActivityIndicatorColor` | color of loader | default: `green` |
| `billingEmail` | Billers email | default: `nill` |
| `billingMobile` | Billers mobile | default: `nill` |
| `billingName` | Billers Name | default: `nill` |
| `onCancel` | callback function if user cancels | default: `nill` |
| `onSuccess` | callback function if transaction was successful (it will also return the transactionRef number in the callback ) | default: `nill` |
| `onError` | callback function if an error occured during transaction | default: `nill` |
## [](https://github.com/react-native-nigeria/react-native-rave-webview/blob/master/contribution.md)Contributions
What to help make this package even more awesome? [Read how to contribute](https://github.com/react-native-nigeria/react-native-rave-webview/blob/master/contribution.md)
## [](https://github.com/react-native-nigeria/react-native-rave-webview#licensing)Licensing
This project is licensed under MIT license.
## Related Projects
- [React-Native-Paystack-WebView](https://github.com/just1and0/react-native-paystack-webview)
- [React-Native-quidpay-WebView](https://github.com/react-native-nigeria/react-native-quidpay-webview)
### Don't forget to star, like and share :)
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
