React Native Payfast Gateway

A react native component to integrate with PayFast via a webview/API calls.

Check out the PayFast documentation for more information on the payload and signature usage.

Note

This libraty was inspired from Danie-ZA's Library React-native-payfast

Installation

npm install react-native-payfast-gateway

OR

yarn add react-native-payfast-gateway

Usage

1. Import the PayFastWebView component.

import {PayFastWebView} from "react-native-payfast-gateway";

2. Assign a JSON object of payment data to the data prop of the component. Note the naming conventions of the fields as per the official PayFast documentation.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20
  },
  btnWrapper: {
    width: "100%",
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    margin: 10
  }
});

export default function App() {

  const [success, setSuccess] = useState(false)
  const [modalVisible, setModalVisible] = useState(false);
  const [paymentData, setPaymentData] = useState({});

  let onceOffPayment = {
    merchant_id : "10000100",
    merchant_key: '46f0cd694581a',
    amount: "60.00",
    item_name: 'React Native Purchase'
  }

  let subscription = {
    subscription_type: 1,
    recurring_amount: "200.00",
    frequency: 3,
    cycles: 0
  }

  function handleOnceOffPayment() {
    setPaymentData(onceOffPayment);
    setModalVisible(true);
  }

  function handleSubscriptionPayment() {
    setPaymentData({ ...onceOffPayment, ...subscription });
    setModalVisible(true);
  }

  return (
    <View style={styles.container}>

      <View style={styles.btnWrapper}>
        <View style={styles.btn}>
          <Button title="Once-Off Payment" onPress={() => handleOnceOffPayment()} />
        </View>
        <View style={styles.btn}>
          <Button title="Subscription" onPress={() => handleSubscriptionPayment()} />
        </View>
      </View>


      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <PayFastWebView sandbox={true} onClick={() => setModalVisible(false)} callback={setSuccess} signature={true} data={paymentData} />
      </Modal>
    </View>
  );
}

Component Props

| Prop name | Type | Description | Example | | ------------- |:-------| :-------------| :-------| | data | JSON | The payment data as per the PayFast documentation. | {merchant_id : 10000100,merchant_key: '46f0cd694581a',amount: 60.00,item_name: 'React Native Purchase'} | sandbox | Boolean | Set the component to redirect to the PayFast sandbox environment for test payments | sandbox={true} | | signature | Boolean | An optional security measure to prevent man in the middle attacks. Note - you must have a passphrase set on your PayFast account | signature={true} | | passphrase | String | The passphrase set on your PayFast/Sandbox account for use in conjunction with the signature generation | passphrase={"passphrase"} | | callback | function | A function that handle the response. The response is True if the payment was successful and False otherwise | callback={setSuccess} | | onClick | function | The action that happens when the user clicks on the button on the successful or unsuccessful page | onClick={() => setModalVisible(false)} |