React Native Paystack WebView

This is an updated version to the original fork

The package allows you accept payment using paystack, install, add keys and use. No stress :)

Installation

Add React-Native-Paystack-WebView to your project by running;

npm install samcode-react-native-paystack-webview

or

yarn add samcode-react-native-paystack-webview

One more thing

To frontload the installation work, let's also install and configure dependencies used by this project, being react-native-webview

run

yarn add react-native-webview

for iOS: cd iOS && pod install && cd ..

for expo applications run;

expo install react-native-webview

and that's it, you're all good to go!

Usage 1

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>
  );
}

Usage 2 - Using Refs

Make use of a ref to start transaction. See example below;

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's

all React-Native-Paystack-WebView API

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
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

Licensing

This project is licensed under MIT license.

Video Tutorial

• Accepting Payment With Paystack In React Native by just1and0