在本文中，您将学习如何将 Paystack 集成到您的 Flutter 应用程序中。

Paystack 提供支付处理软件，允许企业通过信用卡、借记卡、汇款和移动货币接受付款。一个典型的用例是 Flutter 应用中电子商务解决方案的结账系统。

先决条件

Android Studio / VSCode + Flutter 插件
Paystack 帐户 + API 密钥

第 0 步：创建一个flutter项目

如果您已经有一个可以运行的应用程序，请跳到下一步👇。如果你不这样做，首先通过在终端中运行以下命令来创建一个新的flutter项目：

# terminal

$ flutter create flutter_paystack_app

这将创建一个名为“flutter_paystack_app”的“hello world”颤振应用程序。在您选择的编辑器中打开此文件夹。

第 1 步：将您的 API 密钥添加到您的项目中

在项目中公开您的 API 密钥是非常不安全的。从密码学的角度来看，公开公钥是可以的，但从安全的角度来看，始终要非常小心地保护所有密钥，以免被盗和滥用。因此，在项目的根文件夹中创建一个 .env 文件，并将您的 paystack 公钥添加到其中。

# .\.env

PUBLIC_KEY=YOUR-PAYSTACK-PUBLIC-KEY

在 pubspec.yaml 中包含 .env 文件，以确保 Flutter 能够识别它。您可以通过将其添加到资产列表中来做到这一点，如下所示：

# .\pubspec.yaml

assets:
  - .env

第 2 步：安装必要的软件包

将flutter_dotenv和Paystack pub 包添加到您的 pubspec.yaml 文件中。您可以通过将其包含在依赖项块中来做到这一点，如下所示：

# .\pubspec.yaml

dependencies:
  flutter_dotenv: ^5.0.2
  flutter_paystack: ^1.0.5

然后flutter pub get在项目文件夹中运行命令。这将在您的项目中安装 flutter_dotenv 和 Paystack SDK 插件包。

第 3 步：创建您的结帐页面和卡片

使用“Pay with paystack”卡创建一个简单的结帐页面。这将充当用户结帐操作的界面。Flutter 中的基本动作卡如下所示：

# .\lib\screens\checkout.dart

Widget CheckOutCard() {
    return InkWell(
      onTap: () {},
      child: Card(),
    );
  }

第 4 步：导入必要的包

将 flutter_dotenv 和 Paystack 包连接到您的项目。您可以通过将这些行添加到结帐页面的顶部来使用它们：

# .\lib\screens\checkout.dart

import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_paystack/flutter_paystack.dart';

第 5 步：初始化 FLUTTER_PLAYSTACK 插件

要访问 paystack 支付模式，请加载您的 API 密钥并使用它来创建 paystack 插件的实例。您可以使用此代码段：

# .\lib\screens\checkout.dart

final payStackClient = PaystackPlugin();

void _startPaystack () async{
  await dotenv.load(fileName: '.env');
  String? publicKey = dotenv.env['PUBLIC_KEY'];
  payStackClient.initialize(publicKey: publicKey!);
}

@override
void initState() {
  super.initState();
  _startPaystack();
}

该片段以一个名为 final 的变量开始，该变量payStackClient使用 flutter_paystack 包创建一个 PaystackPlugin()对象。然后我们创建一个名为_startPaystack(). 该函数使用 flutter_dotenv 包在 .env 文件中加载环境变量。这使我们能够在"dotenv.env[‘PUBLIC_KEY’]"访问我们的 API 密钥。我们将密钥附加到一个名为的可为空字符串publicKey，并使用它来创建 Paystack 插件的实例。通过在结帐页面的（开始）中调用 _startPaystack 函数init state，我们现在可以访问 paystack 支付模式。

第 6 步：创建 PAYSTACK 支付功能

在您的结帐页面中创建 Paystack 付款功能。

# .\lib\screens\checkout.dart

final int amount = 100000;
final String reference = "unique_transaction_ref_${Random().nextInt(1000000)}";

void _makePayment() async {
  final Charge charge = Charge()
    ..email = 'paystackcustomer@qa.team'
    ..amount = amount
    ..reference = reference;

  final CheckoutResponse response = await payStackClient.checkout(context,
      charge: charge, method: CheckoutMethod.card);

  if (response.status && response.reference == reference) {
    ScaffoldMessenger.of(context).showSnackBar(snackBarSuccess);
  } else {
    ScaffoldMessenger.of(context).showSnackBar(snackBarFailure);
  }
}

我们已经到了本文的重点，请不要不知所措🙏🙏🙏。我们就快到了！！！

此代码段创建了一个名为_makePayment().

使用该charge变量，我们利用flutter_paystack 提供的Charge 类为支付模式准备一个Charge 对象。我们使用级联运算符轻松地对同一对象执行一系列操作。这包括添加email（要收费的客户的电子邮件）amount（以基础货币kobo收费的金额）和reference（唯一交易参考）。
PS：引用必须是唯一的。如果您传递已支付的引用，paystack 实例将不会加载 payStackClient 支付模式。在本教程中，我们使用该dart:math库来生成一个随机数。可以执行更严格的选择。您还可以向 Charge 对象添加更多运算符。根据您的喜好进行定制。

该response变量在使用方法调用 paystack 对象后返回 CheckOutResponse 的未来.checkout()。共有三种方法可供选择：CheckoutMethod.card、CheckoutMethod.selectable、CheckoutMethod.bank。成功的响应如下所示：

{message: Success, card: PaymentCard{_cvc: 081, expiryMonth: 6, expiryYear: 23, _type: VERVE, _last4Digits: 7812 , _number: null}, account: null, reference: unique_transaction_ref_553969, status: true, method: CheckoutMethod.card, verify: true}

然后，我们使用此响应来确定交易是否成功。如果response.status是真的并且response.response与我们的一致，那就是，并且我们可以为客户提供价值[例如导航到新页面、调用端点、写入数据库等]。本章仅显示一个 Snackbar。

第 7 步：在您的结帐卡的 ONTAP 回调中添加该功能

# .\lib\screens\checkout.dart

Widget CheckOutCard() {
    return InkWell(
      onTap: () {
        _makePayment();
      },
      child: Card(),
    );
  }

这将确保一旦您的操作卡被点击，支付功能就会被调用！！！

您刚刚构建了一个支付应用程序😂😂😂！！！

最后送福利了，现在关注我并且加入群聊可以获取包含源码解析，自定义View，动画实现，架构分享等。
内容难度适中，篇幅精炼，每天只需花上十几分钟阅读即可。
大家可以跟我一起探讨，欢迎加群探讨，有flutter—底层开发—性能优化—移动架构—资深UI工程师 —NDK相关专业人员和视频教学资料，还有更多面试题等你来拿

`点击文末微信卡片即可免费领取