Payfast Flutter Package enables seamless Payfast payment integration for mobile Flutter apps (Android/iOS).
⚠️ Web support is not included — use Payfast Web for web apps.
flutter pub add payfastOr manually add:
dependencies:
payfast: ^latest_versionMinimal example:
import 'package:flutter/material.dart';
import 'package:payfast/payfast.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: PayFast(
data: {
'merchant_id': '000000',
'merchant_key': '000000',
'name_first': 'Yung',
'name_last': 'Cet',
'email_address': '[email protected]',
'm_payment_id': '123456',
'amount': '20',
'item_name': 'Subscription',
},
passPhrase: 'your-passphrase',
useSandBox: true, // Set to false for production
onsiteActivationScriptUrl: 'https://youngcet.github.io/sandbox_payfast_onsite_payments/', // ensure that this matches sandbox/live mode
onPaymentCompleted: (data) => print('Payment completed: $data'), // data contains payment details
onPaymentCancelled: () => print('Payment cancelled'),
),
),
);
}
}Android:
Set minSdkVersion in android/app/build.gradle to greater than 19:
Add <uses-permission android:name="android.permission.INTERNET" /> permission in android/app/src/main/AndroidManifest.xml.
iOS:
Add the key below in ios/Runner/Info.plist
<key>io.flutter.embedded_views_preview</key>
<string>YES</string>You must host the Payfast Onsite activation script (served over HTTPS).
If you don’t host your own file, you can use:
- Sandbox:
https://youngcet.github.io/sandbox_payfast_onsite_payments/ - Live:
https://youngcet.github.io/payfast_onsite_payments/
Alternatively, host your own HTML file using the templates below.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://sandbox.payfast.co.za/onsite/engine.js"></script>
</head>
<body>
<script>
// DO NOT MODIFY THIS CODE
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const uuid = urlParams.get('uuid');
window.payfast_do_onsite_payment({"uuid": uuid}, function (result) {
if (result === true) {
location.href = 'completed'; // triggers completed widget
} else {
location.href = 'closed'; // triggers cancelled widget
}
});
</script>
</body>
</html>To switch to live mode, replace the Payfast script URL:
<script src="https://www.payfast.co.za/onsite/engine.js"></script>For full documentation, see Payfast Onsite Payments Docs.
You can easily integrate Payfast into FlutterFlow using a Custom Widget.
- In FlutterFlow, go to Custom Code → Custom Widgets.
- Create a new widget named PayFastWidget.
- Add required parameters:
useSandBox(bool)passPhrase(String)data(JSON/dynamic)onsiteActivationScriptUrl(String)onPaymentCancelled(Function)onPaymentCompleted(Function)
- Add dependency:
payfast: ^latest_version
- Paste this widget code:
import 'package:flutter/material.dart';
import 'package:payfast/payfast.dart';
class PayFastWidget extends StatefulWidget {
final String passPhrase;
final bool useSandBox;
final dynamic data;
final Future Function() onPaymentCancelled;
final Future Function() onPaymentCompleted;
final String onsiteActivationScriptUrl;
final double? width;
final double? height;
const PayFastWidget({
required this.passPhrase,
required this.useSandBox,
required this.data,
required this.onsiteActivationScriptUrl,
required this.onPaymentCancelled,
required this.onPaymentCompleted,
this.width,
this.height,
Key? key,
}) : super(key: key);
@override
State<PayFastWidget> createState() => _PayFastWidgetState();
}
class _PayFastWidgetState extends State<PayFastWidget> {
@override
Widget build(BuildContext context) {
return PayFast(
data: widget.data,
passPhrase: widget.passPhrase,
useSandBox: widget.useSandBox,
onsiteActivationScriptUrl: widget.onsiteActivationScriptUrl,
onPaymentCancelled: () => widget.onPaymentCancelled(),
onPaymentCompleted: (data) => widget.onPaymentCompleted(),
);
}
}- Save, build, and use the widget in your FlutterFlow project.
✅ Use the sandbox URL for testing:
https://youngcet.github.io/sandbox_payfast_onsite_payments/
- Onsite payments (secure checkout inside app)
- Sandbox & Live environments
- Custom payment callbacks
- Custom UI widgets (summary, buttons, overlays)
- FlutterFlow support
- Recurring billing (subscriptions & tokenization)
- Error handling callbacks
| Property | Type | Description |
|---|---|---|
passPhrase |
String |
Payfast passphrase |
useSandBox |
bool |
Use sandbox (test) mode |
data |
Map<String, dynamic> |
Payment details (amount, merchant info, etc.) |
onsiteActivationScriptUrl |
String |
Hosted Payfast script URL |
onPaymentCompleted |
Function(Map data) |
Callback after success |
onPaymentCancelled |
Function() |
Callback after cancel |
waitingOverlayWidget |
Widget |
Custom loading UI |
paymentSummaryBuilder |
Widget |
Custom payment summary UI |
Subscriptions Example:
PayFast(
data: {
'merchant_id': '0000000',
'merchant_key': 'xxxxxxxxx',
'name_first': 'Yung',
'name_last': 'Cet',
'email_address': '[email protected]',
'm_payment_id': '2547855',
'amount': '20',
'item_name': 'Subscription',
// subscription fields
'subscription_type': '1',
'billing_date': '2020-01-01', // optional
'recurring_amount': '123.45', // optional
'frequency': '3', // see table below
'cycles': '12',
'subscription_notify_email': 'true', // optional
'subscription_notify_webhook': 'true', // optional
'subscription_notify_buyer': 'true' // optional
},
...
), | Value | Frequency |
|---|---|
| 1 | Daily |
| 2 | Weekly |
| 3 | Monthly |
| 4 | Quarterly |
| 5 | Biannually |
| 6 | Annually |
Tokenization Example:
PayFast(
data: {
'merchant_id': '0000000',
'merchant_key': 'xxxxxxxxx',
'name_first': 'Yung',
'name_last': 'Cet',
'email_address': '[email protected]',
'm_payment_id': '2547855',
'amount': '20',
'item_name': 'Subscription',
// subscription fields
'subscription_type': '2',
},
...
), See Payfast Docs.
PayFast(
...
onError: (msg) => print('Error: $msg'),
);Click here to view the detailed documentation.
Pull requests and issues are welcome on GitHub.
Join the community on Discord → #payfast-flutter-package
Support the project ☕ Buy Me a Coffee