Flutter支付集成插件flutter_paystack_plus的使用

特殊功能

Split payment：支持将支付金额拆分到多个子账户。
Subscription payment：支持订阅支付。

其他功能

Mobile Money
VISA
Bank Payment
Bank Transfer
USSD
QR Code Payment
Split Payments
Subscriptions

开始使用

在开始之前，请确保您已经在Paystack上创建了账号，并获取了您的公钥。访问 https://paystack.com 设置您的账号。

Web兼容性设置

创建一个名为 paystack_interop.js 的文件并添加以下代码：

function paystackPopUp(publicKey, email, amount, ref, plan, currency, onClosed, callback) {
  let handler = PaystackPop.setup({
    key: publicKey,
    email: email,
    amount: amount,
    ref: ref,
    plan: plan,
    currency: currency,
    onClose: function () {
      alert("Window closed.");
      onClosed();
    },
    callback: function (response) {
      callback();
      let message = "Payment complete! Reference: " + response.reference;
      alert(message);
    },
  });
  return handler.openIframe();
}

在 web/index.html 文件中，添加以下代码到 <body> 标签的顶部：

<body>
<script src="https://js.paystack.co/v1/inline.js"></script>
<script src="paystack_interop.js"></script>
...
</body>

Android兼容性设置

确保 minSdkVersion 是 19 或更高：

defaultConfig {
    applicationId '...'
    minSdkVersion 19 // 确保这一行是19或更高
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

iOS无需额外设置

分割付款（Split Payments）

单个分割付款

在 paystack_interop.js 文件中添加以下代码：

let handler = PaystackPop.setup({
    key: publicKey,
    email: email,
    amount: amount,
    ref: ref,
    currency: currency,
    onClose: function () {
        alert("Window closed.");
        onClosed();
    },
    callback: function (response) {
        callback();
        let message = "Payment complete! Reference: " + response.reference;
        alert(message);
    },
    subaccount: "<CODE_ID_OF_SUBACCOUNT>",  // 子账户ID
    transaction_charge: "2500", // 可选，交易费用
    bearer: "subaccount" // 决定谁承担交易费用，默认为账户
});
return handler.openIframe();

多个分割付款

在 paystack_interop.js 文件中添加以下代码：

let handler = PaystackPop.setup({
    key: publicKey,
    email: email,
    amount: amount,
    ref: ref,
    currency: currency,
    onClose: function () {
        alert("Window closed.");
        onClosed();
    },
    callback: function (response) {
        callback();
        let message = "Payment complete! Reference: " + response.reference;
        alert(message);
    },
    split_code: "<CODE_ID_OF_SUBACCOUNT>",  // 分割代码
});
return handler.openIframe();

订阅支付（Subscriptions）

在 paystack_interop.js 文件中添加以下代码：

let handler = PaystackPop.setup({
    key: publicKey,
    email: email,
    amount: amount,
    ref: ref,
    currency: currency,
    onClose: function () {
        alert("Window closed.");
        onClosed();
    },
    callback: function (response) {
        callback();
        let message = "Payment complete! Reference: " + response.reference;
        alert(message);
    },
    plan: "<PLAN_CODE>",  // 计划代码
    quantity: "10" // 可选，数量
});
return handler.openIframe();

重要参数

[publicKey]：仅Web需要
[secretKey]：仅移动平台需要
[context]：仅移动平台需要
[amount]：应乘以100（例如 amount * 100）
[onClose]：用户取消交易或交易失败时调用
[onSuccess]：交易成功时调用
[callBackURL]：仅移动平台需要，用户支付成功后重定向的URL
[plan]：用于订阅支付
[currency]：支付货币，默认为NGN（奈拉）

使用示例

以下是一个完整的Flutter应用示例，展示了如何使用 flutter_paystack_plus 插件进行支付：

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final emailController = TextEditingController();
  final amountController = TextEditingController();

  @override
  void initState() {
    amountController.addListener(() {
      setState(() {});
    });
    super.initState();
  }

  String generateRef() {
    final randomCode = Random().nextInt(3234234);
    return 'ref-$randomCode';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(255, 238, 237, 237),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(24),
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width * 0.9,
          height: MediaQuery.of(context).size.height * 0.9,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Center(
                child: Text(
                  'Pay with Paystack',
                  style: Theme.of(context).textTheme.headline5?.copyWith(
                        color: Colors.black,
                        fontWeight: FontWeight.w800,
                      ),
                ),
              ),
              const SizedBox(height: 48),
              TextField(
                controller: emailController,
                decoration: const InputDecoration(
                  hintText: 'Email',
                ),
              ),
              const SizedBox(height: 24),
              TextField(
                controller: amountController,
                decoration: const InputDecoration(
                  hintText: 'Amount(₦)',
                ),
              ),
              const Spacer(),
              TextButton(
                onPressed: () async {
                  final ref = generateRef();
                  final amount = int.parse(amountController.text);
                  try {
                    return await FlutterPaystackPlus.openPaystackPopup(
                        publicKey: 'YOUR_PUBLIC_KEY',
                        context: context,
                        secretKey: 'YOUR_SECRET_KEY',
                        currency: 'NGN',
                        customerEmail: emailController.text,
                        amount: (amount * 100).toString(),
                        reference: ref,
                        callBackUrl: "[GET IT FROM YOUR PAYSTACK DASHBOARD]",
                        onClosed: () {
                          debugPrint('Could\'nt finish payment');
                        },
                        onSuccess: () {
                          debugPrint('Payment successful');
                        });
                  } catch (e) {
                    debugPrint(e.toString());
                  }
                },
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.green[400]),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    'Pay${amountController.text.isEmpty ? '' : ' ₦${amountController.text}'} with Paystack',
                    style: Theme.of(context).textTheme.subtitle1?.copyWith(
                          color: Colors.white,
                          fontWeight: FontWeight.w500,
                        ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

贡献者

特别感谢以下贡献者：

如果您遇到问题或想要报告错误，请随时提交issue。感谢您的支持！

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

zlyuanteng 1楼•2 天前

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

在Flutter项目中集成flutter_paystack_plus插件来实现支付功能，可以按照以下步骤进行。flutter_paystack_plus是一个用于集成Paystack支付网关的Flutter插件。以下是一个基本的集成代码示例：

1. 添加依赖

首先，在你的pubspec.yaml文件中添加flutter_paystack_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_paystack_plus: ^x.y.z  # 替换为最新版本号

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

2. 配置Android

在android/app/src/main/AndroidManifest.xml文件中添加必要的权限和网络配置：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

<application
    ... >
    <activity
        android:name=".MainActivity"
        ... >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
            <data android:scheme="yourappscheme" android:host="callback"/>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
        </intent-filter>
    </activity>
</application>

将yourappscheme替换为你应用的实际scheme。

3. 配置iOS

在ios/Runner/Info.plist中添加必要的配置，比如LSApplicationQueriesSchemes：

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>yourappscheme</string>
</array>

4. 初始化插件并进行支付

在你的Flutter代码中，初始化flutter_paystack_plus插件并调用支付功能。例如：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Paystack Payment Example'),
        ),
        body: Center(
          child: PayButton(),
        ),
      ),
    );
  }
}

class PayButton extends StatefulWidget {
  @override
  _PayButtonState createState() => _PayButtonState();
}

class _PayButtonState extends State<PayButton> {
  final PaystackPlugin _paystack = PaystackPlugin();

  void _makePayment() async {
    try {
      String publicKey = "YOUR_PAYSTACK_PUBLIC_KEY"; // 替换为你的Paystack公钥
      double amount = 1000.0; // 付款金额（单位：分）
      String email = "customer@example.com"; // 付款人的邮箱
      String phoneNumber = "+2341234567890"; // 付款人的电话号码
      String ref = "ref_${DateTime.now().toIso8601String()}"; // 唯一支付引用

      var response = await _paystack.initialize(
        publicKey: publicKey,
        amount: amount,
        email: email,
        phoneNumber: phoneNumber,
        ref: ref,
        currency: "NGN", // 货币类型，例如尼日利亚奈拉
      );

      if (response.status == "success") {
        // 支付成功处理
        print("Payment successful: ${response.data}");
      } else if (response.status == "error") {
        // 支付错误处理
        print("Payment error: ${response.message}");
      }
    } catch (e) {
      print("An error occurred: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _makePayment,
      child: Text('Make Payment'),
    );
  }
}

注意事项

Paystack公钥：确保你已经在Paystack仪表盘上获取了公钥，并将其替换到代码中。
支付回调：Paystack支付完成后，会回调到你配置的URL或应用内的指定scheme。你需要在应用中处理这个回调，以完成支付状态的更新。
安全性：不要在客户端代码中硬编码敏感信息，如私钥。这些应该通过安全的后端服务来处理。

通过上述步骤，你应该能够在Flutter应用中成功集成Paystack支付功能。