Flutter支付集成插件paystack_flutter_sa的使用

Flutter支付集成插件paystack_flutter_sa的使用

🚀 安装

要使用此插件，在您的pubspec.yaml文件中添加paystack_flutter_sa作为依赖项。

然后在您的小部件的initState中初始化插件：

import 'package:paystack_flutter_sa/paystack_flutter_sa.dart';

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

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

无需其他配置——插件开箱即用。

💲 进行支付

使用该插件进行支付有两种方法：

  1. 结账：这是简单的方法；插件处理所有涉及的支付过程（除了交易初始化和验证，这些应该从您的后端完成）。
  2. 刷卡：这是一种更长的方法；您需要处理所有回调和UI状态。

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，则需要访问码。

plugin.checkout()返回支付状态和详细信息在一个CheckoutResponse实例中。

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

2. ⭐ 刷卡

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

A. 通过您的后端初始化（推荐）

  1. 首先，从您的后端发起一个HTTP POST请求到Paystack以初始化交易。

  2. 如果一切顺利，初始化请求将返回一个包含access_code的响应。您可以创建一个带有访问码和卡详情的Charge对象。然后将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);
  // 使用响应
}
2. 在本地初始化

只需将支付详情发送到plugin.chargeCard：

Charge charge = Charge();
charge.card = _getCardFromUI();
charge
  ..amount = 2000 // 支付金额（单位为分）
  ..email = 'user@email.com'
  ..reference = _getReference()
  ..putCustomField('Charged From', 'Flutter PLUGIN');
_chargeCard();

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

1 回复

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


在Flutter项目中集成Paystack支付插件paystack_flutter_sa可以通过以下步骤进行。以下是一个基本的代码示例，展示如何在Flutter应用中集成和使用该插件。

1. 添加依赖

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

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

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

2. 配置Android和iOS

Android

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

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

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

    <application
        ... >
        <!-- 其他配置 -->

        <meta-data
            android:name="com.google.android.gms.wallet.api.enabled"
            android:value="true"/>
        
        <!-- Paystack 需要的 Activity 配置 -->
        <activity
            android:name="com.paystack.android.PaystackActivity"
            android:launchMode="singleTop"
            android:theme="@style/PaystackTheme">
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
</manifest>

iOS

在iOS项目中，确保你已经配置了Info.plist以支持URL Scheme，Paystack可能需要特定的配置，具体请参考Paystack的官方文档。

3. 初始化Paystack

在你的Flutter代码中，你需要初始化Paystack并处理支付。以下是一个简单的示例：

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

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

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

class PaystackButton extends StatefulWidget {
  @override
  _PaystackButtonState createState() => _PaystackButtonState();
}

class _PaystackButtonState extends State<PaystackButton> {
  final Paystack _paystack = Paystack();

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 配置支付参数
        final Map<String, dynamic> paymentDetails = {
          'amount': 100000, // 金额，单位为奈拉（Naira）
          'email': 'user@example.com',
          'phone': '+2348012345678',
          'publicKey': '你的Public Key', // 请替换为你的Paystack Public Key
          'currency': 'NGN',
          'reference': DateTime.now().millisecondsSinceEpoch.toString(),
          // 可以添加其他需要的参数，比如metadata等
        };

        try {
          final PaystackResponse response = await _paystack.initializePayment(paymentDetails);
          
          if (response.status) {
            // 支付成功处理
            print('Payment successful: ${response.data}');
          } else {
            // 支付失败处理
            print('Payment failed: ${response.message}');
          }
        } catch (e) {
          // 错误处理
          print('Error initializing payment: $e');
        }
      },
      child: Text('Pay Now'),
    );
  }
}

4. 处理支付回调（可选）

根据Paystack的文档，你可能需要处理支付回调（比如支付成功或失败后的服务器通知）。这通常涉及到在服务器端设置Webhook，并处理Paystack发送的POST请求。

注意事项

  • 确保你已经在Paystack后台配置了正确的回调URL。
  • 测试支付时，请使用Paystack提供的测试公钥和私钥。
  • 在生产环境中，请确保你的应用已经通过了所有必要的安全审核。

这个示例代码提供了一个基本的框架，用于在Flutter应用中集成Paystack支付。你可能需要根据自己的应用需求进行调整和扩展。

回到顶部