Web View Wrapper for Rave by Flutterwave(https://rave.flutterwave.com/)

A web view wrapper for Flutterwave Rave payment gateway with support for React Native v0.60 and doesn't require any react native linking.

This package allows you plug-in Rave's payment gateway directly into your react native application and start accepting payment immediately.

This package copies a similar loading design to that of Rave, which makes transistion to Rave's website less noticeable. This package also offers a cancel button, so one can easily cancel if Rave takes a long time to load its content (the onCancel props event is called when this happens).

Compatibility

|@react-native-community/cli |react-native| | --| --| |^1.0.0 |^0.59.0|

Integrating Rave React Native

You can pull in @creativejoe007/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 @creativejoe007/react-native-rave-webview --save

Usage

1. import Rave Component

import {RaveWebView} from '@creativejoe007/react-native-rave-webview';

2. Set your success, failure and close methods

constructor(props) {
    super(props);

  }

  onSuccess(data) {
    console.log("success", data);
    // You get the complete response returned from FlutterWave,
    // just incase you need more than the reference number

  }

  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}>
          <RaveWebView
            raveKey="<your-api-key-here>"
            amount={20000}
            customerEmail={"[email protected]"}
            customerPhone={"08114089344"}
            billingEmail="[email protected] (optional)"
            billingMobile="08114089344 (optional)"
            billingName="Martins Joseph (optional but advised)"
            ActivityIndicatorColor="black"
            onCancel={this.onCancel}
            onSuccess={this.onSuccess}
            onError={() => { alert('something went wrong') }}
            active={true}
            txref="<your-autogenerated-transaction-reference>"
          />
        </View>
    );
   }

API's

all React-Native-rave-WebView API

| Name | use/description | default | | :--- | :---: | ---: | | active | Should modal box be rendered | false | | currency | What currency are you charging in (visit: https://support.flutterwave.com/en/articles/3632719-accepted-currencies) | NGN | | raveKey | Public or Private FlutterWave Rave key(visit https://rave.flutterwave.com to get yours) |null | | amount | Amount to be paid | null | | txref | set TransactionRef for transaction | null | | ActivityIndicatorColor | color of loader | #f5a623 | | customerEmail | Customer's email | null | | customerPhone | Customer's Mobile | null | | billingEmail | Billers email | null | | billingMobile | Billers mobile | null | | billingName | Billers Name | null | | onCancel | callback function if user cancels, either while web view is loading or after loading | null | | onSuccess | callback function if transaction was successful (it will return the entire response by Flutterwave's Rave ) | null | | onError | callback function if an error occurred during transaction | null |

Everyone is welcome to create a pull request with detailed description of what it fixes, and I would ensure to test and merge.

This project is licensed under ISC license.

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