Flutter支付集成插件flutter_paystack_max的使用

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

Flutter支付集成插件flutter_paystack_max的使用

flutter_paystack_max 是一个用于通过 Paystack 支付网关进行支付的Flutter包。它支持所有Paystack支持的支付方式,并且在Android和iOS平台上都能很好地工作。

特性

  • ✔️ 所有Paystack支持的支付方法/渠道
    • Mobile Money
    • Card
    • USSD
    • Bank Transfer
    • Bank
    • QR
    • EFT
  • ✔️ 验证交易

Pay with card Pay with mobile money

支持的平台

  • Android
  • iOS

前置条件

  • Paystack 秘钥
  • 回调URL

此包无需配置,开箱即用。

使用方法

创建一个交易请求对象

final request = PaystackTransactionRequest(
    reference: '...',
    secretKey: '....',
    email: '...',
    amount: 15 * 100,
    currency: PaystackCurrency.ngn,
    channel: [
        PaystackPaymentChannel.mobileMoney,
        PaystackPaymentChannel.card,
        PaystackPaymentChannel.ussd,
        PaystackPaymentChannel.bankTransfer,
        PaystackPaymentChannel.bank,
        PaystackPaymentChannel.qr,
        PaystackPaymentChannel.eft,
    ],
);

初始化交易

final initializedTransaction = await PaymentService.initializeTransaction(request);

if (!initializedTransaction.status) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        backgroundColor: Colors.red,
        content: Text(initializedTransaction.message),
    ));

    return;
}

打开支付模态框以接受付款

final response = await PaymentService.showPaymentModal(
    context,
    transaction: initializedTransaction,
    // 回调URL必须与您在Paystack仪表板上指定的匹配,
    callbackUrl: '...'
).then((_) async {
    return await PaymentService.verifyTransaction(
        paystackSecretKey: '...',
        initializedTransaction.data?.reference ?? request.reference,
    );
});

print(response); // 确认支付的结果

示例代码

下面是一个完整的示例代码,展示了如何在Flutter应用中使用 flutter_paystack_max 插件来实现支付功能:

import 'package:flutter/material.dart';
import 'package:flutter_paystack_max/flutter_paystack_max.dart';
import 'package:logger/logger.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Paystack Max',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Paystack Max'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool initializingPayment = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: initializingPayment
            ? const CircularProgressIndicator.adaptive()
            : OutlinedButton(
                onPressed: makePayment,
                child: const Text('Make Payment'),
              ),
      ),
    );
  }

  void makePayment() async {
    const secretKey = 'sk_test_e9a2346830d863dad481ab4169f67d91a5f5260f';

    final request = PaystackTransactionRequest(
      reference: 'ps_${DateTime.now().microsecondsSinceEpoch}',
      secretKey: secretKey,
      email: 'test@mail.com',
      amount: 15 * 100,
      currency: PaystackCurrency.ngn,
      channel: [
        PaystackPaymentChannel.mobileMoney,
        PaystackPaymentChannel.card,
        PaystackPaymentChannel.ussd,
        PaystackPaymentChannel.bankTransfer,
        PaystackPaymentChannel.bank,
        PaystackPaymentChannel.qr,
        PaystackPaymentChannel.eft,
      ],
    );

    setState(() => initializingPayment = true);
    final initializedTransaction =
        await PaymentService.initializeTransaction(request);

    if (!mounted) return;
    setState(() => initializingPayment = false);

    if (!initializedTransaction.status) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        backgroundColor: Colors.red,
        content: Text(initializedTransaction.message),
      ));

      return;
    }

    await PaymentService.showPaymentModal(
      context,
      transaction: initializedTransaction,
      // 回调URL必须与您在Paystack仪表板上指定的匹配,
      callbackUrl: 'https://binemmanuel.com',
    );

    final response = await PaymentService.verifyTransaction(
      paystackSecretKey: secretKey,
      initializedTransaction.data?.reference ?? request.reference,
    );

    if (kDebugMode) Logger().i(response.data.status == PaystackTransactionStatus.abandoned);
  }
}

更多信息

访问 Paystack文档 获取更多关于交易的信息。

贡献、问题和错误报告

这个项目是开放贡献的。如果您遇到了问题或想要报告一个bug,请在这里报告


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

1 回复

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


当然,以下是一个关于如何在Flutter应用中集成flutter_paystack_max插件的示例代码。flutter_paystack_max是一个用于集成Paystack支付网关的Flutter插件。以下示例代码展示了如何初始化插件、启动支付流程并处理支付结果。

前提条件

  1. 确保你已经在Flutter项目中添加了flutter_paystack_max依赖。
  2. 确保你已经在Paystack后台配置了你的应用。

添加依赖

在你的pubspec.yaml文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_paystack_max: ^最新版本号  # 请替换为最新版本号

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

配置Android

android/app/src/main/AndroidManifest.xml中添加以下权限和Activity配置:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.yourapp">

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

    <application
        ...>

        <activity android:name="io.flutter.plugins.paystack.PaystackActivity"
            android:launchMode="singleTask"
            android:theme="@style/Theme.AppCompat.NoActionBar"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="your_custom_scheme" android:host="callback" />
            </intent-filter>
        </activity>

        ...
    </application>
</manifest>

确保替换your_custom_scheme为你的自定义URL Scheme,这个Scheme将在Paystack后台配置。

配置iOS

ios/Runner/Info.plist中添加以下配置(如果需要):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

初始化插件并启动支付

在你的Dart代码中,初始化flutter_paystack_max插件并启动支付流程:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Paystack Payment Integration'),
        ),
        body: Center(
          child: PaystackButton(
            apiKey: '你的Paystack公钥',  // 替换为你的Paystack公钥
            email: 'customer@example.com',
            amount: 1000,  // 金额,单位为分(例如1000表示10.00)
            currency: 'USD',  // 货币类型
            reference: 'unique_reference_${DateTime.now().toIso8601String()}',  // 唯一支付引用
            withCard: true,  // 是否显示信用卡输入界面
            onSuccessfulPayment: (paymentData) {
              // 支付成功处理
              print('Payment successful: $paymentData');
            },
            onFailedPayment: (error) {
              // 支付失败处理
              print('Payment failed: $error');
            },
            onClose: () {
              // 用户关闭支付界面处理
              print('Payment closed');
            },
            onPreAuthorize: (preAuthData) {
              // 预授权处理(如果需要)
              print('Pre-authorize data: $preAuthData');
            },
          ),
        ),
      ),
    );
  }
}

class PaystackButton extends StatefulWidget {
  final String apiKey;
  final String email;
  final int amount;
  final String currency;
  final String reference;
  final bool withCard;
  final ValueChanged<Map<String, dynamic>> onSuccessfulPayment;
  final ValueChanged<String> onFailedPayment;
  final VoidCallback onClose;
  final ValueChanged<Map<String, dynamic>> onPreAuthorize;

  PaystackButton({
    required this.apiKey,
    required this.email,
    required this.amount,
    required this.currency,
    required this.reference,
    required this.withCard,
    required this.onSuccessfulPayment,
    required this.onFailedPayment,
    required this.onClose,
    required this.onPreAuthorize,
  });

  @override
  _PaystackButtonState createState() => _PaystackButtonState();
}

class _PaystackButtonState extends State<PaystackButton> {
  final FlutterPaystackMax paystack = FlutterPaystackMax();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        try {
          await paystack.initialize(
            apiKey: widget.apiKey,
            email: widget.email,
            amount: widget.amount,
            currency: widget.currency,
            reference: widget.reference,
            withCard: widget.withCard,
          );

          final result = await paystack.startTransaction(
            onSuccessful: widget.onSuccessfulPayment,
            onFailed: widget.onFailedPayment,
            onClose: widget.onClose,
            onPreAuthorize: widget.onPreAuthorize,
          );

          if (result) {
            // 交易已启动,后续处理将在回调中完成
          }
        } catch (e) {
          widget.onFailedPayment(e.toString());
        }
      },
      child: Text('Pay Now'),
    );
  }
}

处理回调

确保在你的回调函数中处理支付结果,例如更新UI、发送通知或存储支付数据。

注意事项

  1. 替换示例代码中的你的Paystack公钥为你的实际Paystack公钥。
  2. 确保在Paystack后台正确配置了回调URL和自定义URL Scheme。
  3. 根据你的需求调整支付参数和回调处理逻辑。

这个示例代码展示了如何在Flutter应用中集成flutter_paystack_max插件并启动支付流程。你可以根据需要进行进一步的自定义和扩展。

回到顶部