Integrating Payment In your React Native Application — In Nigeria.

Photo by rupixen on Unsplash

Hey there!

You may have opened this post in hopes to solve your problem of basically integrating a payment gateway into your react native application. You may even have no need for this but just want to know how it’s done! yeah?

In your quest to find a solution you may have come across a couple of payment processor, Paystack, Rave by Flutterwave, Quidpay or Gladpay and you’re wondering how do I manage to integrate any of this in my react native application!

You may also have come across the various payment processors inline payment option for the web and the question keeps coming up, the question being, *why can’t the react-native version be this simple* — if there ever was one.

Well, You’re in luck because in this article I'd be showing you the easiest way you could integrate any of the payment processors in your react native project. And guess what? it’s almost too easy!

Let’s Begin

I’d be showing you how to integrate Paystack, Rave by Flutterwave and yes Quidpay in your react native application. Well then let’s begin;

• Paystack

React-Native-Paystack-WebView

Yes, another npm package, deal with it.

React-native-paystack-webview is nothing short of a best friend when it comes to integrating payment in your react native application with Paystack. This package requires no linking of any sort and is super easy to get up and running. So let write some codes.

first you’d need to install the package, You can do this by running the code below in your terminal (in the root of your react-native project).

$ npm install react-native-paystack-webview

or

$ yarn add react-native-paystack-webview

and that’s it! no linking required! just start using.

import PaystackWebView from 'react-native-paystack-webView'
import React, { Component } from 'react'
import { View } from 'react-native'

class MyApp extends Component {
  render () {
    return (
      <View>
        <PaystackWebView
          buttonText='Pay Now'
          paystackKey='<your-key-here>'
          amount={120000}
          billingEmail='ayoshokz@gmail.com'
          billingMobile='08101274387'
          billingName='Oluwatobi Shokunbi'
          ActivityIndicatorColor='green'
          onSuccess={(tranRef)=>{console.log(tranRef)}}
          onCancel={()=>{console.log('something went wrong')}}
         />
      </View>
    )
  }
}

and that’s it! you’ve successfully set up Paystack inline payment in your react native application.

• Rave by Flutterwave

Rave By Flutterwave React Native WebView Component

React-native-rave-webview is very similar to the previous package, it also doesn’t require any form of linking, and yes it gets the job done.

To set this up you’d have to install the package so let’s do that.

$ npm install react-native-rave-webview

or

$ yarn add react-native-rave-webview

and that’s it! no linking required! just start using.

import Rave from 'react-native-rave-webView'
import React, { Component } from 'react'
import { View } from 'react-native'

class MyApp extends Component {
  render() {
     return (
        <View  style={styles.container}>
		    <Rave
			    buttonText=  "Pay Now"
			    raveKey="<your-api-key-here>"
			    amount={20000}
			    billingEmail="ayoshokz@gmail.com"
			    billingMobile="08101274387"
			    billingName="Oluwatobi Shokunbi"
			    ActivityIndicatorColor="green"
			    onCancel={()=>this.onCancel()}
			    onSuccess={(tranRef)=>{alert(tranRef)}}
			    btnStyles={{backgroundColor:'green'}}
			    textStyles={{ color:'white'}}
			    onError={()=>{alert('error')}}
			    txref="1234"
			  />
	    </View>
    );
   }
}

And just like magic, we’ve successfully integrated rave inline payment in our react native application.

• Quidpay

React Native Quidpay WebView

react-native-quidpay-webview is the last on our list and as you may have already guessed, it’s very similar to the previous two, Functions just the same way and requires no form of linking whatsoever to get running.

To start working with this package, run;

$ npm install react-native-quidpay-webview

or

$ yarn add react-native-quidpay-webview

and that’s it! no linking required! just start using.

import {Quidpay} from 'react-native-rave-webView'
import React, { Component } from 'react'
import { View } from 'react-native'

class MyApp extends Component {
  render() {
     return (
        <View  style={styles.container}>
		    <Quidpay
			    buttonText=  "Pay Now"
			    raveKey="<your-api-key-here>"
			    amount={20000}
			    billingEmail="ayoshokz@gmail.com"
			    billingMobile="08101274387"
			    billingName="Oluwatobi Shokunbi"
			    ActivityIndicatorColor="green"
			    onCancel={()=>this.onCancel()}
			    onSuccess={(tranRef)=>{alert(tranRef)}}
			    btnStyles={{backgroundColor:'green'}}
			    textStyles={{ color:'white'}}
			    onError={()=>{alert('error')}}
			    txref="1234"
			  />
	    </View>
    );
   }
}

And just like magic, we’ve successfully integrated Quidpay inline payment in our react native application.

Take Note

• All packages have an onSuccess and onCancel callback which you can use to handle what happens if user transaction was successful or canceled.
• The onSuccess callback returns a transactionRef which you could use to verify the payment.

Video Tutorial

Conclusion

Handling card payment in your react native application is easy as it can be with these packages, allowing you to concentrate on the more important part of your application.

If you enjoyed this article do give it a clap, also don’t forget to star the project on GitHub, Links are listed below.

Also, feel free to reach out to me on Twitter

react-native-nigeria/react-native-rave-webview

react-native-nigeria/react-native-quidpay-webview

just1and0/React-Native-Paystack-WebView