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

• Installations

• Deployment

• How It Works

• Usage

• API

• Contributions

Getting Started

Prerequisites

• Quidpay Public And Encryption Keys

• Node

• NPM

• React Native

Installations

To use react native quidpay 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 QuidPay 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

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

• React-Native-Paystack-WebView
• React-Native-rave-WebView

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