react-native-paystack-webview v4.6.7

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="paystackwebview@something.com"
        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="paystackwebview@something.com"
        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

Meta Props

Refs

Dynamic Multi-Split Payment Object structure

Dynamic Multi-Split Payment Sub-Account Object structure

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!