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 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 >>>Quidpay 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.

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

OR

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`

chrisehlee/react-native-quidpay-webview