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 by Paystack, 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
plan	Specify plan code generated from the Paystack Dashboard or API to create a subscription to a predefined plan by the transaction. The plan code is a unique code given to every plan, it is used to identify a particular plan. Here's an example of usage: plan: "PLANCODE". The PLANCODE comes in the format PLN_xxxxxxxxxx NOTE: This would invalidate/override the value provided in amount	default: nill
invoice_limit	Specify the number of times to charge customer during subscription to plan (integer). Works together with the plan prop	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
split_code	Specify split_code generated from the Paystack Dashboard under Transaction Splits menu or API to enable Multi-Split Payment on the transaction. According to Paystack's documentation available here, Multi-split enables merchants to split the settlement for a transaction across their payout account, and one or more subaccounts. Here's an example of usage: split_code: "SPL_xxxxxxx"	default: nill
split	Specify split object to enable Dynamic Multi-Split Payment on the transaction. According to Paystack's documentation available here, Sometimes, you can't determine a split configuration until later in the purchase flow. With dynamic splits, you can create splits on the fly. The Structure is defined in the Dynamic Multi-Split Structure below	default: nill
channels	Specify payment options available to users. Available channel options are: ["card", "bank", "ussd", "qr", "mobile_money", "bank_transfer", "eft", "apple_pay"]. 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
modalProps	Can be used to extend the root modal props for example to handle closing like so modalProps={{ onRequestClose: () => paystackWebViewRef.current.endTransaction() }}	default: nill

Meta Props

Name	Description	Required?	Default Value
cart_id	A unique identifier for the cart. Can be either a string or a number.	NO	undefined
custom_fields	An array of custom fields for adding additional metadata to the transaction. If not passed, a default custom field is created using the firstName, lastName, and billingName.	NO	[{ display_name: '${firstName + ' ' + lastName}', variable_name: '${billingName}', value: '' }]
cancel_action	A string specifying the action to take if a transaction is canceled.	NO	undefined
custom_filters	Custom filters to restrict or specify transaction options, such as:	NO	undefined
	- recurring: A boolean to indicate if the transaction is recurring.
	- banks: An array of bank codes for supported banks.
	- card_brands: Supported card brands, e.g., 'verve', 'visa', 'mastercard'.
	- supported_mobile_money_providers: Supported mobile money providers, e.g., 'mtn', 'atl', 'vod'.

---

Dynamic Multi-Split Payment Object structure

Name	use/description	required?
type	Dynamic Multi-Split type. Value can be flat or percentage	YES
bearer_type	Defines who bears the charges. Value can be all, all-proportional, account or subaccount	YES
subaccounts	An array of subaccount object as defined below. e.g. {"subaccount": 'ACCT_xxxxxx', "share": 60}	YES
bearer_subaccount	Subaccount code of the bearerof the transaction. It should be specified if bearer_type is subaccount	NO
reference	Unique reference of the split. Can be defined by the user	NO

Dynamic Multi-Split Payment Sub-Account Object structure

Name	use/description	required?
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"	YES
share	Defines the amount in percentage (integer) or value (decimal allowed) depending on the type of multi-split defined	YES

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 💻	Emmanuel Ngene 💻	Mauko 📖

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