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

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