payfast 1.0.2-pre.1 copy "payfast: ^1.0.2-pre.1" to clipboard
payfast: ^1.0.2-pre.1 copied to clipboard

A Flutter package to integrate Payfast payments into your app.

Payfast Flutter Package #

Pub Version License Last Commit Issues Coverage



Overview #

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.


Installation #

flutter pub add payfast

Or manually add:

dependencies:
  payfast: ^latest_version

Quick Start #

Minimal 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': 'user@domain.com',
            '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 & iOS Setup #

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>

Hosting the Onsite Script #

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.

Sandbox Version #

<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>

Live Version #

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.


FlutterFlow Integration #

You can easily integrate Payfast into FlutterFlow using a Custom Widget.

Steps #

  1. In FlutterFlow, go to Custom Code → Custom Widgets.
  2. Create a new widget named PayFastWidget.
  3. Add required parameters:
    • useSandBox (bool)
    • passPhrase (String)
    • data (JSON/dynamic)
    • onsiteActivationScriptUrl (String)
    • onPaymentCancelled (Function)
    • onPaymentCompleted (Function)
  4. Add dependency:
    payfast: ^latest_version
    
  5. 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(),
    );
  }
}
  1. Save, build, and use the widget in your FlutterFlow project.

✅ Use the sandbox URL for testing: https://youngcet.github.io/sandbox_payfast_onsite_payments/


Key Features #

  • 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

Common Properties #

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

Recurring Billing #

Subscriptions Example:

PayFast(
  data: {
    'merchant_id': '0000000', 
    'merchant_key': 'xxxxxxxxx', 
    'name_first': 'Yung',
    'name_last': 'Cet',
    'email_address': 'some@domain.com',
    '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
  },
  ...
), 

Frequency

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': 'some@domain.com',
    'm_payment_id': '2547855',
    'amount': '20',
    'item_name': 'Subscription',
    // subscription fields
    'subscription_type': '2',
  },
  ...
), 

See Payfast Docs.


Error Handling #

PayFast(
  ...
  onError: (msg) => print('Error: $msg'),
);

Documentation #

Click here to view the detailed documentation.


Contributing #

Pull requests and issues are welcome on GitHub.

Join the community on Discord → #payfast-flutter-package


License #

MIT License

Support the project ☕ Buy Me a Coffee