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
• Installations
• Deployment
• How It Works
• Usage
• API
• Contributions

Getting Started

Prerequisites

• Rave Public And Encryption Keys

• Node

• NPM

• React Native

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 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 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.

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 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 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 paystack.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

• React-Native-Paystack-WebView

Don't forget to star, like and share :)