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

• React-Native-Paystack-WebView
• React-Native-quidpay-WebView

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Oluwatobi Shokunbi 💻 📖

Akinyemi Mosolasi 📖

This project follows the all-contributors specification. Contributions of any kind welcome!