# @creativejoe007/react-native-rave-webview > A web view wrapper for Flutterwave Rave payment gateway with support for React Native v0.60 and doesn't require any react native linking. For more info, checkout (https://github.com/creativeJoe007/react-native-rave-webview) Latest version **1.1.0** (published 2020-08-21) · ISC license · 0 weekly downloads ## Install ```sh npm install @creativejoe007/react-native-rave-webview pnpm add @creativejoe007/react-native-rave-webview yarn add @creativejoe007/react-native-rave-webview bun add @creativejoe007/react-native-rave-webview ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2020-08-21 | | First published | 2019-11-10 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 9.9 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 6 | | Author | creativeJoe007 | | Maintainers | creativejoe007 | | Keywords | react-native, rave, flutterwave-rave, rave, flutterwave, payment-gateway, react, flutterwave | ## Links - npm: https://www.npmjs.com/package/@creativejoe007/react-native-rave-webview - Repository: https://github.com/creativeJoe007/react-native-rave-webview - Homepage: https://github.com/creativeJoe007/react-native-rave-webview#readme - Issues: https://github.com/creativeJoe007/react-native-rave-webview/issues - npm.io page: https://npm.io/package/@creativejoe007/react-native-rave-webview ## Dependencies (1) - [react-native-webview](https://npm.io/package/react-native-webview.md) ^9.0.2 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.0 (latest) — 2020-08-21 - 1.0.9 — 2020-08-21 - 1.0.3 — 2019-11-11 - 1.0.2 — 2019-11-11 - 1.0.1 — 2019-11-10 - 1.0.0 — 2019-11-10 ## README # 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](https://github.com/react-native-community/cli/tree/1.x) |^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 #### [](https://github.com/creativeJoe007/react-native-rave-webview#1--import-rave-component)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 ( { alert('something went wrong') }} active={true} txref="" /> ); } ## API's #### [](https://github.com/react-native-nigeria/react-native-rave-webview#API)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 :) --- _Source: https://npm.io/package/@creativejoe007/react-native-rave-webview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._