Flutter支付集成插件flutter_paystack的使用

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

Flutter支付集成插件flutter_paystack的使用

简介

flutter_paystack 是一个用于通过 Paystack 支付网关进行支付的 Flutter 插件。该插件完全支持 Android 和 iOS 平台。

安装

要使用此插件，在 pubspec.yaml 文件中添加 flutter_paystack 依赖：

dependencies:
  flutter_paystack: ^1.0.0

初始化插件，建议在 initState 方法中执行：

import 'package:flutter_paystack/flutter_paystack.dart';

class _PaymentPageState extends State<PaymentPage> {
  var publicKey = '[YOUR_PAYSTACK_PUBLIC_KEY]';
  final plugin = PaystackPlugin();

  @override
  void initState() {
    plugin.initialize(publicKey: publicKey);
    super.initState();
  }
}

无需其他配置，插件即可直接使用。

发起支付

插件提供了两种支付方式：

  1. 结账（推荐）
  2. 充值卡

1. 结账（推荐）

通过初始化一个带有金额、邮箱和访问码或引用的 Charge 对象来发起支付。如果已经从后端初始化了交易，可以传递 accessCode；否则，传递 reference。

Charge charge = Charge()
      ..amount = 10000
      ..reference = _getReference()
       // 或者 ..accessCode = _getAccessCodeFrmInitialization()
      ..email = 'customer@email.com';
CheckoutResponse response = await plugin.checkout(
  context,
  method: CheckoutMethod.card, // 默认为 CheckoutMethod.selectable
  charge: charge,
);

请注意，如果方法是 CheckoutMethod.bank 或 CheckoutMethod.selectable，则需要 accessCode。

plugin.checkout() 返回一个包含支付状态和详情的 CheckoutResponse 实例。

建议在 plugin.checkout() 返回后，在后端验证支付。

2. 充值卡

你可以选择在本地或通过后端初始化支付。

A. 通过后端初始化（推荐）
  1. 在后端发起一个 HTTP POST 请求到 paystack 初始化交易。
  2. 如果一切顺利，初始化请求将返回一个包含 access_code 的响应。然后创建一个带有 access_code 和卡详细信息的 Charge 对象，并将其传递给 plugin.chargeCard() 函数进行支付：
PaymentCard _getCardFromUI() {
  // 使用必要的参数
  return PaymentCard(
    number: cardNumber,
    cvc: cvv,
    expiryMonth: expiryMonth,
    expiryYear: expiryYear,
  );
}

_chargeCard(String accessCode) async {
  var charge = Charge()
    ..accessCode = accessCode
    ..card = _getCardFromUI();

  final response = await plugin.chargeCard(context, charge: charge);
  // 使用响应
}

如果 response.status 为真，则表示交易成功。更多详情请参阅文档。

B. 本地初始化

直接发送支付详情到 plugin.chargeCard：

Charge charge = Charge();
charge.card = _getCardFromUI();
charge
  ..amount = 2000
  ..email = 'user@email.com'
  ..reference = _getReference()
  ..putCustomField('Charged From', 'Flutter PLUGIN');
_chargeCard();

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

1 回复

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


在Flutter中集成支付功能可以通过使用第三方插件来实现，其中flutter_paystack是一个流行的用于集成Paystack支付的插件。以下是一个如何在Flutter应用中使用flutter_paystack插件的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了flutter_paystack依赖：

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

然后运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你需要按照以下步骤进行配置和使用：

  1. 配置Android和iOS平台：

    • Android：确保你的android/app/src/main/AndroidManifest.xml文件中包含必要的网络权限：

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

    • iOS：在你的ios/Runner/Info.plist文件中，你可能需要添加网络权限和支付相关配置，具体取决于Paystack的要求。

  2. 初始化Paystack：

    在你的主应用文件（通常是main.dart）中，你需要初始化Paystack插件。首先，导入必要的包：

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

    然后，设置Paystack的公钥（从Paystack仪表板获取）：

    void main() {
  PaystackPlugin.setPublicKey('YOUR_PAYSTACK_PUBLIC_KEY'); // 替换为你的Paystack公钥
  runApp(MyApp());
}

  3. 创建支付界面：

    创建一个按钮来触发支付流程，并在按钮点击事件中调用Paystack的支付方法：

    class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Paystack Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              try {
                Map<String, dynamic> response = await PaystackPlugin.initialize(
                  amount: 100000, // 支付金额，单位为奈拉（Nigerian Naira）
                  email: 'customer@example.com', // 用户的电子邮件地址
                  phoneNumber: '+2348012345678', // 用户的电话号码
                  currency: 'NGN', // 货币代码
                  metadata: {'custom_field': 'value'}, // 自定义数据
                  onSuccess: (data) {
                    print('Payment successful: $data');
                  },
                  onCancel: () {
                    print('Payment cancelled');
                  },
                  onError: (error) {
                    print('Payment error: $error');
                  },
                  closeIOSPopover: false, // 对于iOS设备，是否关闭支付视图后自动关闭弹出层
                );
                print('Payment response: $response');
              } catch (e) {
                print('Error initializing payment: $e');
              }
            },
            child: Text('Pay Now'),
          ),
        ),
      ),
    );
  }
}

在这个示例中，当用户点击“Pay Now”按钮时，将会触发Paystack的支付流程。你需要提供支付金额、用户电子邮件、电话号码等必要信息，并处理支付成功、取消和错误的情况。

请确保你已经正确设置了Paystack账户，并且已经获取了必要的公钥和私钥。此外，根据你的实际需求，你可能需要调整支付金额、货币类型和其他参数。

这个示例提供了一个基本的框架，你可以根据自己的需求进行扩展和修改。

回到顶部