Skip to content

Latest commit

 

History

History
319 lines (249 loc) · 13.6 KB

README.md

File metadata and controls

319 lines (249 loc) · 13.6 KB
Raw

React-Native-Paystack-WebView

All Contributors

The package allows you accept payment using paystack and guess what , it doesn't require any form of linking, just install and begin to use .

Compatibility

Our release cycle is independent of react-native. We follow semver and here is the compatibility table:

@react-native-paystack-webview react-native
^2.0 ^0.59
^3 ^0.60

Installation

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

npm install react-native-paystack-webview

or

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

import PaystackWebView from 'react-native-paystack-webview';
import React, {Component} from 'react';
import {View} from 'react-native';

class MyApp extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <PaystackWebView
          buttonText="Pay Now"
          showPayButton={false}
          paystackKey="your-public-key-here"
          paystackSecretKey="your-secret-key-here"
          amount={120000}
          billingEmail="[email protected]"
          billingMobile="09787377462"
          billingName="Oluwatobi Shokunbi"
          ActivityIndicatorColor="green"
          SafeAreaViewContainer={{marginTop: 5}}
          SafeAreaViewContainerModal={{marginTop: 5}}
          onCancel={(e) => {
            // handle response here
          }}
          onSuccess={(e) => {
            // handle response here
          }}
          autoStart={false}
        />
      </View>
    );
  }
}

Usage 2

import PaystackWebView from 'react-native-paystack-webview';
import React, {Component} from 'react';
import {View} from 'react-native';

class MyApp extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <PaystackWebView
          buttonText="Pay Now"
          showPayButton={false}
          paystackKey="your-public-key-here"
          paystackSecretKey="your-secret-key-here"
          amount={120000}
          billingEmail="[email protected]"
          billingMobile="09787377462"
          billingName="Oluwatobi Shokunbi"
          ActivityIndicatorColor="green"
          SafeAreaViewContainer={{marginTop: 5}}
          SafeAreaViewContainerModal={{marginTop: 5}}
          handleWebViewMessage={(e) => {
            // handle the message
          }}
          onCancel={(e) => {
            // handle response here
          }}
          onSuccess={(e) => {
            // handle response here
          }}
          autoStart={false}
          refNumber={uuid()} // this is only for cases where you have a reference number generated
          renderButton=((onPress) => {
            <Button onPress={onPress}>
              Pay Now
            <Button>
          })
        />
      </View>
    );
  }
}

Use ref's

make use of ref's to start transaction. See example below;

import React, {useRef} from 'react';
import {View, TouchableOpacity,Text} from 'react-native';
function Pay(){
   const childRef = useRef();

  return(
    <View style={{flex: 1}}>
        <PaystackWebView
          showPayButton={false}
          paystackKey="your-public-key-here"
          paystackSecretKey="your-secret-key-here"
          amount={120000}
          billingEmail="[email protected]"
          billingMobile="09787377462"
          billingName="Oluwatobi Shokunbi"
          ActivityIndicatorColor="green"
          SafeAreaViewContainer={{marginTop: 5}}
          SafeAreaViewContainerModal={{marginTop: 5}}
          onCancel={(e) => {  // handle response here }}
          onSuccess={(e) => {  // handle response here }}
           ref={childRef}
        />

            <TouchableOpacity onPress={()=> childRef.current.StartTransaction()}>
             <Text>pay now</Text>
						<TouchableOpacity/>
      </View>
)
}

Recurrent Payment

Once billing of card is successful, you'll get an object data in the success callback. The call back will contain cardDetails , this object contains basic details about the card you just billed, save this to your backend.

import React, {useRef} from 'react';
import {View, TouchableOpacity,Text} from 'react-native';
function Pay(){
   const childRef = useRef();
const success = (e) =>{
	// get authorization_code
	const {authorization_code} = e.cardDetails;
	
}
  return(
    <View style={{flex: 1}}>
        <PaystackWebView
          showPayButton={false}
          paystackKey="your-public-key-here"
          paystackSecretKey="your-secret-key-here"
          amount={120000}
          billingEmail="[email protected]"
          billingMobile="09787377462"
          billingName="Oluwatobi Shokunbi"
          ActivityIndicatorColor="green"
          SafeAreaViewContainer={{marginTop: 5}}
          SafeAreaViewContainerModal={{marginTop: 5}}
          onCancel={(e) => {  // handle response here }}
          onSuccess={(e) => {  success(e) }}
           ref={childRef}
        />

            <TouchableOpacity onPress={()=> childRef.current.StartTransaction()}>
             <Text>pay now</Text>
						<TouchableOpacity/>
      </View>
)
}

now we have the authorization_code, and other card details, we can bill this card again by using the react-native-paystack-helpers package to bill this card anytime we want to.

first run; yarn add react-native-paystack-helpers || npm i react-native-paystack-helpers

now to bill the card again;

import React from 'react';
import {Transaction} from 'react-native-paystack-helpers';
import {View, TouchableOpacity,Text} from 'react-native';

function Pay(){
    
const bill = () =>{
	// get authorization_code
	const aa = await Transaction.ChargeAuthorization(
      authorization_code,
      payStack-secret-key,
     amount,
      billing-email,
    );
    console.log(aa);
	
}
  return(
    <View style={{flex: 1}}>
    

            <TouchableOpacity onPress={()=> bill()}>
             <Text>Bill again</Text>
	<TouchableOpacity/>
      </View>
)
}

Note:

You can also make use of the new props autoStart to initiate payment once the screen mounts. Just see autoStart={true}. This is set to false by default.

API's

all React-Native-Paystack-WebView API

Name use/description extra
buttonText Defines text on the button default: Pay Now
textStyles Defines styles for text in button nill
btnStyles Defines style for button nill
paystackKey Public or Private paystack key(visit paystack.com to get yours) nill
paystackSecretKey Paystack Secret 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={JSON.stringify(["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
SafeAreaViewContainer style for SafeAreaView containter default: nill
SafeAreaViewContainerModal style for SafeAreaView for modal default: nill
showPayButton Control the Pay Now button visibility default: true
refNumber Reference number, if you have already generated one default: ''+Math.floor((Math.random() * 1000000000) + 1)
renderButton Render your own Pay Now button, should be used when showPayButton is true default: null
handleWebViewMessage Will be called when a WebView receives a message default: true

Contributions

What to help make this package even more awesome? Read how to contribute

Licensing

This project is licensed under MIT license.

Disclamier

Do not put your seceret key in production, only use the callback! as it is not safe. I won't be held accountable for any lost, hack or security breach.

Related Projects

Don't forget to star, like and share :)

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Oluwatobi Shokunbi
💻 📖
Akinyemi Mosolasi
📖 💻
okechukwu0127
💻
Johney
💻
sammy
💻
Jimoh Jamiu
🐛

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