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

Table of contents

• Getting started
  • Installation
  • Supported transactions:
  • Features:
  • Usage
    • In-app payment
    • Generate payment link
    • Update card details
    • Tokenize card details
  • Props
    • PayFast
      • data
    • LinkPayment
    • UpdateCard
• License
• Author
• Help Wanted!
• Credits
• Support

Getting started

Installation

npm install react-native-payfast-plugin

Expo?

expo install react-native-payfast-plugin

Supported transactions:

• Once of payment
• Recurring payment
• 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: "[email protected]",
                    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: "[email protected]",
                },
            }}

            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: "[email protected]",
      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: "[email protected]",
    },
  },
  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

• Payfast
• React Native

Support

Upcoming features and versions

• Charge tokenized card v1.1.0
• Get subscription details v1.2.0
• Cancel subscription v1.3.0
• Pause subscription v1.4.0
• Resume subscription v1.5.0
• Split payment v1.6.0