react-native-flutterwave
v1.0.0
Published
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 .
Downloads
8
Maintainers
Readme
Rave By Flutterwave React Native WebView Component
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 .
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 |^0.59.0|
Table Of Content
Getting Started
Prerequisites
Installations
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.
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.
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.
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 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 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;
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
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
Usage
Payments
1. import Rave Component
import Rave from 'react-native-rave-webview';
2. Set your success, failure and close methods
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)
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>
)
}
API's
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
|
Contributions
What to help make this package even more awesome? Read how to contribute
Licensing
This project is licensed under MIT license.
Related Projects
Don't forget to star, like and share :)
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!