Flutter支付集成插件flutter_paystack_client的使用

flutter_paystack_client 是一个用于通过Paystack支付网关进行支付的Flutter插件，支持Web和移动设备。它作为 flutter_paystack 的一个包装器。

🚀 安装

要在项目中使用此插件，请在 pubspec.yaml 文件中添加 flutter_paystack_client 作为依赖项：

dependencies:
  flutter_paystack_client: ^latest_version

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

import 'package:flutter_paystack_client/flutter_paystack_client.dart';

class _PaymentPageState extends State<PaymentPage> {
  var publicKey = '[YOUR_PAYSTACK_PUBLIC_KEY]';

  [@override](/user/override)
  void initState() {
    super.initState();
    PaystackClient.initialize(publicKey);
  }
}

Web

对于Web平台，需要在 index.html 文件中包含Paystack JS脚本：

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

使用方法

下面是如何使用 flutter_paystack_client 创建并处理支付请求的基本示例：

Charge charge = Charge()
      ..amount = 10000 // 支付金额，单位为最小货币单位（如分）
      ..reference = _getReference() // 唯一交易参考号
      ..email = 'customer@email.com'; // 用户邮箱

CheckoutResponse response = await PaystackPlugin.checkout(
  context, 
  charge: charge,
);

当 PaystackClient.checkout() 返回时，建议在后端验证支付是否成功。

示例代码

以下是一个完整的示例demo，展示了如何集成和使用 flutter_paystack_client 插件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_paystack_client/flutter_paystack_client.dart';

// 假设.env文件中定义了paystackPublicKey变量
import '.env.dart';

const String appName = 'Paystack Example';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PaystackClient.initialize(paystackPublicKey);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appName,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _email = '';
  int _amount = 0;
  String _message = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Paystack Client Test'),
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(
          horizontal: MediaQuery.of(context).size.width / 8,
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _message,
              style: TextStyle(
                fontWeight: FontWeight.w600,
                color: Colors.deepPurple,
              ),
            ),
            const SizedBox(height: 10),
            TextField(
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              keyboardType: TextInputType.emailAddress,
              onChanged: (val) {
                _email = val;
              },
            ),
            TextField(
              decoration: InputDecoration(
                labelText: 'Amount',
              ),
              keyboardType: TextInputType.number,
              onChanged: (val) {
                try {
                  _amount = (double.parse(val) * 100).toInt();
                } catch (e) {}
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                setState(() {
                  _message = '';
                });

                final charge = Charge()
                  ..email = _email
                  ..amount = _amount
                  ..reference = 'ref_${DateTime.now().millisecondsSinceEpoch}';
                final res =
                    await PaystackClient.checkout(context, charge: charge);

                if (res.status) {
                  _message = 'Charge was successful. Ref: ${res.reference}';
                } else {
                  _message = 'Failed: ${res.message}';
                }
                setState(() {});
              },
              child: Text('Checkout'),
            ),
          ],
        ),
      ),
    );
  }
}