react-native-payfast-plugin
v1.0.3
Published
A react native component to integrate with PayFast via a webview/API calls.
Downloads
65
Maintainers
axolemaReadme
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
Table of contents
Getting started
Installation
npm install react-native-payfast-pluginExpo?
expo install react-native-payfast-pluginSupported 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: "[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
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