React Native Paystack WebView

This package lets you accept payments with Paystack in a snap! Just install, add your keys, and you’re good to go—no headaches here! Plus, it’s officially [endorsed](https://paystack.com/docs/libraries-and-plugins/libraries/#react-native) by [Paystack](https://paystack.com), so you know you’re in good hands. Payment processing has never been this easy!

Installation

Add react-native-paystack-webview to your project by running;

npm install react-native-paystack-webview

or

yarn add react-native-paystack-webview

Additional Setup

To ensure everything works smoothly, install and configure the required dependency, react-native-webview:

yarn add react-native-webview

for iOS:

cd iOS && pod install && cd ..

for expo applications run;

npx expo install react-native-webview

That’s it! You’re all set.

Usage

Basic Example

import React from 'react';
import  { Paystack }  from 'react-native-paystack-webview';
import { View } from 'react-native';

function Pay() {
  return (
    <View style={{ flex: 1 }}>
      <Paystack  
        paystackKey="your-public-key-here"
        amount={'25000.00'}
        billingEmail="[email protected]"
        activityIndicatorColor="green"
        onCancel={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
        autoStart={true}
      />
    </View>
  );
}

Using Refs

You can also use a ref to start a transaction. Here’s how:

import React, { useRef } from 'react';
import  { Paystack , paystackProps}  from 'react-native-paystack-webview';
import { View, TouchableOpacity,Text } from 'react-native';

function Pay(){
  const paystackWebViewRef = useRef<paystackProps.PayStackRef>(); 

  return (
    <View style={{flex: 1}}>
      <Paystack
        paystackKey="your-public-key-here"
        billingEmail="[email protected]"
        amount={'25000.00'}
        onCancel={(e) => {
          // handle response here
        }}
        onSuccess={(res) => {
          // handle response here
        }}
        ref={paystackWebViewRef}
      />

        <TouchableOpacity onPress={()=> paystackWebViewRef.current.startTransaction()}>
          <Text>Pay Now</Text>
        </TouchableOpacity>
      </View>
  );
}

API Reference

Name	use/description	extra
paystackKey	Public or Private paystack key(visit paystack.com to get yours)	nill
amount	Amount to be paid	nill
activityIndicatorColor	color of loader	default: green
billingEmail(required by paystack)	Billers email	default: nill
billingMobile	Billers mobile	default: nill
billingName	Billers Name	default: nill
subaccount	Specify subaccount code generated from the Paystack Dashboard or API to enable Split Payment on the transaction. Here's an example of usage: subaccount: "SUB_ACCOUNTCODE"	default: nill
channels	Specify payment options available to users. Available channel options are: ["card", "bank", "ussd", "qr", "mobile_money"]. Here's an example of usage: channels={["card","ussd"]}	default: ["card"]
onCancel	callback function if user cancels or payment transaction could not be verified. In a case of not being verified, transactionRef number is also returned in the callback	default: nill
onSuccess	callback function if transaction was successful and verified (it will also return the transactionRef number in the callback )	default: nill
autoStart	Auto start payment once page is opened	default: false
refNumber	Reference number, if you have already generated one	default: ''+Math.floor((Math.random() * 1000000000) + 1)
handleWebViewMessage	Will be called when a WebView receives a message	default: true

Contributions

Want to help improve this package? Read how to contribute and feel free to submit your PR!

Licensing

This project is licensed under the MIT License.

Related Projects

• React-Native-quidpay-WebView
• React-Native-rave-WebView

Video Tutorial

• Accepting Payment With Paystack In React Native by just1and0

Sponsorship

• Star the project on Github
• Buy me a coffee

Thanks to Our Superheroes ✨

A huge shoutout to our amazing contributors! Your efforts make this project better every day. Check out the (emoji key) for what each contribution means:

Oluwatobi Shokunbi 💻 📖	Akinyemi Mosolasi 📖 💻	okechukwu0127 💻	Johney 💻	sammy 💻	Jimoh Jamiu 🐛 📖 💻	Cahak George 💻
John Ayeni 📖	majirieyowel 💻	David Erinayo Obidu 🐛	surafelbm 🐛	Rex Omiv 🐛	Osagie Osaigbovo Charles 🐛	Ujjalcha1 🐛
Oyefeso Oluwatunmise 🐛	Fuad Olatunji 📖	Wilhelm Erasmus 💻	Matiluko Opeyemi Emmanuel 💻	Oluwamurewa Alao 💻

This project follows the all-contributors specification. Contributions of any kind welcome!