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 |

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:

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