react-native-payfast-checkout

This is a React Native package for integration of Payfast payment gateway into your React Native projects. The package is also compatible with React Native Expo.

Features

• Make once off or repeat payments using a bank card e.g Cheque or Credit Card
• Save bank card for future use (Tokenization), token sent to your notifyUrl
• Update saved bank card details
• Hook/Function to make a payment with saved card / token

Upcoming Features

• Recurring Billing / Subscriptions

About the package

• Make a once off payment for any product/service within the app
• Easy to use package for integrating Payfast payment gateway into your React Native app
• Written in TypeScript, providing type definitions and improved developer experience
• Compatible with React Native & React Native Expo

Props

Paystack Props

Prop	Type	Description	Required	Default Value
paymentMethod	String	See below	Yes	cc
transactionDetails	Object	See below	Yes	N/A
notifyUrl	String	Webhook url for outcome notification	No	N/A
sandbox	Boolean	Used to set the integration into testing mode	Yes	false
signature	Boolean	Whether to to use singature or not	Yes	false
merchantId	String	Payfast merchant Id	Yes	N/A
merchantKey	String	Payfast merchant key	Yes	N/A
isVisible	Boolean	Whether to show the payment window or not	Yes	N/A
passPhrase	String	Phrase to secure the payload	Yes	N/A
onClose	Function	Function to close the payment window	Yes	N/A

Payment Method

When this field is set, only the SINGLE payment method specified can be used when the customer reaches Payfast. If this field is blank, or not included, then all available payment methods will be shown

Options

Option	Description
eft	EFT
cc	Credit card
dc	Debit card
mp	Masterpass Scan to Pay
mc	Mobicred
sc	SCode
ss	SnapScan
zp	Zapper
mt	MoreTyme
rcs	Store card

Transaction Details

Name	Type	Description	Required
customerFirstName	String	Customer First Name	No
customerLastName	String	Customer Last Name	No
customerEmailAddress	String	Customer Email address	No
customerPhoneNumber	String	Customer Phone Number	No
reference	String	Transaction Reference	No
amount	Float	Transaction Amount in South African Rands	Yes
itemName	String	Name of item being paid for	Yes
itemDescription	String	Description of the item being paid for	No

How to use the package

Install the latest version of the package Using Yarn

yarn add react-native-payfast-checkout

or Npm

npm install react-native-payfast-checkout

or Expo

npx expo install react-native-payfast-checkout

Use the package in your cart or checkout screen

...
import Payfast from 'react-native-payfast-checkout'
...
const CartScreen = () => {
    ...
    const [showPayfast, setShowPayfast] = useState(false)
    ...
    const transactionDetails = {
        itemName:'iPhone',
        amount: 1500.25
    }
    return <View>
    ...
    <PayFast
        merchantId={process.env.PAYFAST_MERCHANT_ID}
        merchantKey={process.env.PAYFAST_MERCHANT_KEY}
        passPhrase={process.env.PAYFAST_SIGNATURE_PHRASE}
        sandbox
        isVisible={showPayfast}
        onClose={() => setShowPayfast(false)}
        transactionDetails={transactionDetails}
      />
    ...
    </View>
}

export default CartScreen

Adding saving a card for future use

Unfortunately Payfast does not return any details for your saved card, except for the token, therefore you can't show the last 4 digits for the user to remember the card they saved, but the update card screen shows the last 4 digits and the expiry date

...
import {PayFastSaveCard} from 'react-native-payfast-checkout'
...
const PaymentOptionsScreen = () => {

    const [showAddCard, setShowAddCard] = useState(false)
    const [showUpdateCard, setShowUpdateCard] = useState(false)

    const transactionDetails = {
        customerFirstName: 'John',
        customerLastName: 'Doe',
        customerEmailAddress: 'name@email.com',
    }

    return <View>
    ...
    <PayFastSaveCard
        transactionDetails={transactionDetails}
        merchantId={process.env.PAYFAST_MERCHANT_ID}
        merchantKey={process.env.PAYFAST_MERCHANT_KEY}
        passPhrase={process.env.PAYFAST_SIGNATURE_PHRASE}
        notifyUrl=''
        isVisible={showAddCard}
        onClose={(isDone) => {
            // Do things here then
            setShowAddCard(false)
        }}
    />
    ...
    <PayFastUpdateCard
        cardToken=''
        isVisible={showUpdateCard}
        sandbox
        onClose={() => {
            // Do things here
            setShowUpdateCard(false)
        }}
    />
    ...
    </View>
}

export default PaymentOptionsScreen

Using a token in a transaction

...
import { usePayFast } from 'react-native-payfast-checkout'
...

const CheckoutScreen = () => {
    ...
    const { chargeCardToken } = usePayFast({
        merchantId:{process.env.PAYFAST_MERCHANT_ID}
        passPhrase:{process.env.PAYFAST_SIGNATURE_PHRASE}
    })
    ...
    const onCheckout = async( ) => {
        try {
            const { message, pf_payment_id } = await chargeCardToken({
                token:'',
                total:10000 // in cents e.g 10000 = R100,
                reference:'',
                itemName:''
            })
        } catch(error){
            console.log({error})
        }
    }
    ...
    return <View>
    ...
        <Button text='Checkout' onPress={() => onCheckout() } />
    ...
    </View>
}

export default CheckoutScreen

Official Documentation

For more details you can visit the official Payfast documentation page