DEPRECATED

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

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.

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

_{Oluwatobi Shokunbi}
💻 📖

_{Akinyemi Mosolasi}
📖

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

react-native-nigeria-community / react-native-rave-webview Goto Github PK

react-native-rave-webview's Introduction