React Native Payfast Plugin

React Native Payfast Plugin is a React Native library for Payfast payment gateway integration. It allows you to integrate the Payfast payment gateway into your React Native app with ease. It provides a simple interface to accept in-app payments, generate payment links, and tokenize & update card details.

[ GitHub stars ] [ GitHub license ] [ GitHub contributors ] [ GitHub last commit ] [ GitHub pull requests ] [] [] [] []

This is not a Payfast official library.

Check out my other libraries

React Native Ozow

Getting started
License
Author
Help Wanted!
Credits
Support

Getting started

Installation

npm install react-native-payfast-plugin

Expo?

expo install react-native-payfast-plugin

Supported transactions:

<input checked="" disabled="" type="checkbox"> Once of payment
<input checked="" disabled="" type="checkbox"> Recurring payment
<input checked="" disabled="" type="checkbox"> Tokenization

Features:

In-app payment
Generate payment link
Update card details (for tokenized cards)
Split payment (coming soon)
Charge tokenized card (coming soon)

Usage

In-app payment

import Payfast from 'react-native-payfast-plugin';

...
        <PayFast
            data={{
                merchantDetails: {
                    merchant_id: "10031584",
                    merchant_key: "5n52c1qu5501c",
                    notify_url: "https://webhook.site/f30e4b32-15b5-44e6-ae0b-c75486b8797d",
                },
                customerDetails: {
                    name_first: "First Name",
                    name_last: "Last Name",
                    email_address: "firstname@gmail.com",
                    cell_number: "0885....",
                },
                transactionDetails: {
                    m_payment_id: "1234",
                    amount: "10.00",
                    item_name: "Item Name",
                    item_description: "Item Description",
                },
                transactionOptions: {
                    email_confirmation: 0,
                    confirmation_address: "firstname@gmail.com",
                },
            }}

            sandbox={true}
            passphrase="thisisatestforthe"

            onCancel={(data) => {
                console.log("Payment cancelled: ", data.transaction_id);
            }}

            onMessage={(message) => {
                console.log(message);
            }}

            onSuccess={({ data, transaction_id }) => {
                console.log(transaction_id);
            }}

            onClose={() => {
                console.log("Payment closed");
            }}
        />
        ...

Generate payment link

import { LinkPayment } from "react-native-payfast-plugin";

const link = new LinkPayment(
  {
    merchantDetails: {
      merchant_id: "10031584",
      merchant_key: "5n52c1qu5501c",
      notify_url: "https://webhook.site/f30e4b32-15b5-44e6-ae0b-c75486b8797d",
    },
    customerDetails: {
      name_first: "First Name",
      name_last: "Last Name",
      email_address: "firstname@gmail.com",
      cell_number: "088...",
    },
    transactionDetails: {
      m_payment_id: "1234",
      amount: "10.00",
      item_name: "Item Name",
      item_description: "Item Description",
    },
    transactionOptions: {
      email_confirmation: 0,
      confirmation_address: "firstname4@gmail.com",
    },
  },
  true,
  "thisisatestforthe"
);

// Optional - change to your own urls defaults to https://payfast.io/
link.cancel_url = "https://www.google.com/search?q=cancel";
link.return_url = "https://www.google.com/search?q=success";

const handleLink = async () => {
  link.getLink().then((link) => {
    setLink(link);
  });
};


// In your render function

...
  <Button title="Generate Link" onPress={handleLink} />
  <Text>{link}</Text>
...

Update card details

import { UpdateCard } from "react-native-payfast-plugin";

...
    <UpdateCard
        token="...e90c2-....-....-9ccb-...."
        onComplete={(data) => console.log(data)}
        sandbox={true}
    />
....

Tokenize card details


// Use the same PayFast component as in-app payment on the data prop add the following

    recurringBilling: {
        subscription_type: "2",
    },

Props

PayFast

Prop	Type	Description
data	object	Data object for in-app payment
sandbox	boolean	Set to true for sandbox mode
passphrase	string	Passphrase for sandbox mode
onCancel	function	Callback function when payment is cancelled
onMessage	function	Callback function when payment is in progress
onSuccess	function	Callback function when payment is successful
onClose	function	Callback function when payment is closed
onComplete	function	Callback function when card update is complete

data

Prop	Type	Description
merchantDetails	object	Merchant details. See
customerDetails	object	Customer details See
transactionDetails	object	Transaction details See
transactionOptions	object	Transaction options See
recurringBilling	object	Recurring billing options See

LinkPayment

Same as PayFast data

UpdateCard

Prop	Type	Description
token	string	Token for card to be updated
sandbox	boolean	Set to true for sandbox mode
onComplete	function	Callback function when card update is complete

License

MIT

Author

Axole Maranjana

Help Wanted!

This project is open for contributions. All contributions must be made via pull requests. Feel free to create issues and pull requests.

Credits

Support

Upcoming features and versions

<input disabled="" type="checkbox"> Charge tokenized card v1.1.0
<input disabled="" type="checkbox"> Get subscription details v1.2.0
<input disabled="" type="checkbox"> Cancel subscription v1.3.0
<input disabled="" type="checkbox"> Pause subscription v1.4.0
<input disabled="" type="checkbox"> Resume subscription v1.5.0
<input disabled="" type="checkbox"> Split payment v1.6.0

Package detail