@creativejoe007/react-native-rave-webview v1.1.0

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

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={"hello@creativejoe007.com"}
            customerPhone={"08114089344"}
            billingEmail="hello@creativejoe007.com (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

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