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.

[] [] [] [] [] [] [] [] []

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:

[x] Once of payment
[x] Recurring payment
[x] 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