Flutter支付集成插件payfast的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter支付集成插件payfast的使用

1. 简介

payfast 是一个用于在Flutter应用中集成PayFast支付的插件。通过该插件，开发者可以轻松地将PayFast的支付功能集成到他们的应用中。本文将详细介绍如何使用 payfast 插件，并提供一个完整的示例demo。

2. 开始使用

2.1 安装插件

首先，你需要在项目的 pubspec.yaml 文件中添加 payfast 依赖：

dependencies:
  payfast: ^latest_version

然后运行以下命令来安装插件：

flutter pub add payfast
2.2 配置Android和iOS
Android配置

确保在 android/app/build.gradle 文件中设置 minSdkVersion 为21或更高：

android {
    defaultConfig {
        minSdkVersion 21
    }
}

在 android/app/src/main/AndroidManifest.xml 中添加互联网权限：

<uses-permission android:name="android.permission.INTERNET" />
iOS配置

在 ios/Runner/Info.plist 文件中添加以下键值对：

<key>io.flutter.embedded_views_preview</key>
<string>YES</string>

3. PayFast Onsite Activation Script

为了使用PayFast的Onsite Payments功能，你需要托管一个HTML文件。你可以选择将文件托管在GitHub上，或者使用其他服务器。

3.1 使用GitHub托管

你可以直接使用以下链接（根据是否使用沙箱环境选择）：

  • 沙箱环境：https://youngcet.github.io/sandbox_payfast_onsite_payments/
  • 生产环境：https://youngcet.github.io/payfast_onsite_payments/
3.2 自定义托管

如果你选择自定义托管，可以使用以下HTML代码并将其托管在你自己的服务器上：

<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 THE CODE BELOW

        // retrieve the uuid that is passed to this file and send it to payfast onsite engine
        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) {
                // Payment Completed
                location.href = 'completed'; // triggers payment completed widget on app
            } else {
                // Payment Window Closed
                location.href = 'closed'; // triggers payment cancelled widget on app
            }
        }); 
    </script>
</body>
</html>

对于生产环境，请将 <script src="https://sandbox.payfast.co.za/onsite/engine.js"></script> 替换为 <script src="https://www.payfast.co.za/onsite/engine.js"></script>。

4. 示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 payfast 插件进行支付集成。

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:payfast/payfast.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _randomId() {
    var rng = Random();
    var randomNumber = rng.nextInt(900000) + 100000;
    return '$randomNumber';
  }

  void paymentCompleted() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('Payment Successful!'),
        behavior: SnackBarBehavior.floating,
      ),
    );
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (context) => const MyApp()),
    );
  }

  void paymentCancelled() {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text('Payment Cancelled!'),
        behavior: SnackBarBehavior.floating,
        backgroundColor: Colors.red,
      ),
    );
    Navigator.push(
      context,
      CupertinoPageRoute(builder: (context) => const MyApp()),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Material(
      child: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showCupertinoModalBottomSheet(
                expand: true,
                bounce: true,
                enableDrag: true,
                context: context,
                backgroundColor: Colors.white,
                builder: (context) => PayFast(
                  data: {
                    'merchant_id': 'xxxxxxxxxxx', // 替换为你的PayFast商户ID
                    'merchant_key': 'xxxxxxxxxxxxxxxx', // 替换为你的PayFast商户密钥
                    'name_first': 'Yung',
                    'name_last': 'Cet',
                    'email_address': 'young.cet@gmail.com',
                    'm_payment_id': _randomId(),
                    'amount': '20',
                    'item_name': 'Subscription',
                  },
                  passPhrase: 'xxxxxxxxxxxxxxxxxxxxxx', // 替换为你的PayFast密码短语
                  useSandBox: true, // true表示使用沙箱环境，false表示使用生产环境
                  onsiteActivationScriptUrl:
                      'https://youngcet.github.io/sandbox_payfast_onsite_payments/', // 替换为你的HTML文件URL
                  onPaymentCancelled: () => paymentCancelled(),
                  onPaymentCompleted: () => paymentCompleted(),
                ),
              );
            },
            child: const Text('Checkout using PayFast'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter支付集成插件payfast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter支付集成插件payfast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter应用中集成PayFast支付插件的示例代码。请注意，这只是一个基本的集成示例，实际应用中可能需要更多的配置和安全措施。

首先，确保你已经在pubspec.yaml文件中添加了PayFast相关的依赖。假设有一个名为flutter_payfast的插件（请注意，实际插件名称可能有所不同，你需要查找实际的PayFast Flutter插件并添加）：

dependencies:
  flutter:
    sdk: flutter
  flutter_payfast: ^x.y.z  # 替换为实际版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你需要进行以下步骤来集成PayFast支付：

  1. 初始化插件：

    在你的MainActivity.kt（Android）或AppDelegate.swift（iOS）中进行必要的初始化（如果有必要的话）。这一步通常插件文档会有详细说明。

  2. 配置支付参数：

    创建一个配置类来存储PayFast的支付参数，如商户ID、密钥、支付描述等。

    class PayFastConfig {
  static const String merchantId = "your_merchant_id";
  static const String merchantKey = "your_merchant_key";
  static const String paymentDescription = "Payment for product X";
  static const double amount = 100.0;  // 支付金额
  static const String currency = "ZAR";  // 货币类型
  static const String notifyUrl = "https://yourwebsite.com/notify";  // 通知URL
  static const String returnUrl = "https://yourwebsite.com/return";  // 返回URL
  static const String cancelUrl = "https://yourwebsite.com/cancel";  // 取消URL
}

  3. 发起支付：

    在你的Flutter应用中，使用插件提供的API来发起支付。

    import 'package:flutter/material.dart';
import 'package:flutter_payfast/flutter_payfast.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PayFast Integration'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 发起支付
              PayFast.startPayment(
                merchantId: PayFastConfig.merchantId,
                merchantKey: PayFastConfig.merchantKey,
                amount: PayFastConfig.amount,
                currency: PayFastConfig.currency,
                description: PayFastConfig.paymentDescription,
                notifyUrl: PayFastConfig.notifyUrl,
                returnUrl: PayFastConfig.returnUrl,
                cancelUrl: PayFastConfig.cancelUrl,
                onSuccess: (response) {
                  // 支付成功处理
                  print("Payment successful: $response");
                },
                onError: (error) {
                  // 支付错误处理
                  print("Payment error: $error");
                },
                onCancel: () {
                  // 支付取消处理
                  print("Payment cancelled");
                },
              );
            },
            child: Text('Pay Now'),
          ),
        ),
      ),
    );
  }
}

  4. 处理支付回调：

    在你的服务器端处理notifyUrl中的回调，以验证支付状态并更新订单状态。

请注意，以上代码仅作为示例，实际使用时需要根据PayFast的API文档和Flutter插件的文档进行调整。此外，支付集成涉及到敏感信息和资金安全，务必确保遵循最佳实践和安全准则。

务必在发布应用之前，在测试环境中充分测试支付流程，并确保所有回调和错误处理都能正常工作。

回到顶部