This will no longer be maintained or updated, please consider using react-native-ortho instead.
This is the react native SDK for Rave By Flutterwave.
๐ธ๐ณ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 .
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 | ^0.59.0 |
To use react native rave webview in your application, you need to have
Node
andnpm
downloaded and installed on your machine.
-
Click Here to download and install
Node
to your machine,npm
is always automatically installed when you installNode
. -
To ensure you have
Node
andnpm
installed, enter the following command into your terminal/command promptnode -v
andnpm -v
respectively. -
To run
react native
on your machine you can usenpm install -g expo-cli
to install Expo CLI a command line utility to get you started quickly or use this commandnpm install -g react-native-cli
to install the react native CLI.
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.
-
To get your
TEST
public, secret and encryption keys click on theLive Mode
Toggle button to switch to Test account andTest Mode
Toggle button to switch to live. -
This is shown in the screenshots displayed below.
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 command line utility, Enter the following command to get started:
-
expo init AwesomeProject
-
cd AwesomeProject
-
npm start
-
Install the Expo client or mobile application from Apple Store or Playstore
-
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;
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
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
import Rave from 'react-native-rave-webview';
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
}
render () {
return (
<View style={styles.container}>
<Rave
buttonText='Pay Now'
raveKey='<your-api-key-here>'
amount={20000}
billingEmail='[email protected]'
billingMobile='08101274387'
billingName='Oluwatobi Shokunbi'
ActivityIndicatorColor='green'
onCancel={() => 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'
/>
</View>
)
}
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 |
What to help make this package even more awesome? Read how to contribute
This project is licensed under MIT license.
Thanks goes to these wonderful people (emoji key):
Oluwatobi Shokunbi ๐ป ๐ |
Akinyemi Mosolasi ๐ |
This project follows the all-contributors specification. Contributions of any kind welcome!