Skip to content

⛔️ DEPRECATED 💸💳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 .

License

Notifications You must be signed in to change notification settings

react-native-nigeria-community/react-native-rave-webview

Repository files navigation

No Maintenance Intended

DEPRECATED

This will no longer be maintained or updated, please consider using react-native-ortho instead.

All Contributors

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

enter image description here

enter image description here

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: enter image description here

  • 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; enter image description here

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='ayoshokz@gmail.com'
          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):


Oluwatobi Shokunbi

💻 📖

Akinyemi Mosolasi

📖

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

About

⛔️ DEPRECATED 💸💳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 .

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published