react-native-quidpay-webview

1.0.0 • Public • Published

# 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: enter image description here

  • 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; enter image description here

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

Contributions

What to help make this package even more awesome? Read how to contribute

Licensing

This project is licensed under MIT license.

Related Projects

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

Package Sidebar

Install

npm i react-native-quidpay-webview

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

16 kB

Total Files

6

Last publish

Collaborators

  • react-native-nigeria-community