# React Native Quidpay WebView
This is the react native SDK for Quidpay By Quidpay.
💸💳The package allows you accept payment using Quidpay 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
andnpm
downloaded and installed on your machine.
-
Click Here to download and install
Node
to your machine,npm
is always automatically installed when you installNode
. -
To ensure you have
Node
andnpm
installed, enter the following command into your terminal/command promptnode -v
andnpm -v
respectively. -
To run
react native
on your machine you can usenpm install -g expo-cli
to install Expo CLI a command line utility to get you started quickly or use this commandnpm 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 >>>Quidpay Live.
-
To get your
TEST
public, secret and encryption keys click on theLive Mode
Toggle button to switch to Test account andTest Mode
Toggle button to switch to live.
How It Works
This is a simple demonstration of how to set up a simple react native app and integrate Quidpay inline payment in react native
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-quidpay-webview --save
yarn add react-native-quidpay-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 Quidpay from 'react-native-quidpay-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}>
<Quidpay
buttonText= "Pay Now"
QuidpayKey="<your-api-key-here>"
amount={20000}
billingEmail="ayoshokz@gmail.com"
billingMobile="08101****"
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 |
QuidpayKey |
Public or Private paystack key(visit quidpay.io 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.