Flutter支付集成插件flutter_pix_pagstar的使用

这是由公司Pagstar创建的一个Flutter插件，旨在简化Pix交易的创建。该插件遵循MVC架构，并使用了尽可能多的Flutter原生资源，以减少外部依赖。

前提条件

在使用该插件之前，你必须首先请求访问Pagstar的沙箱环境，以获取所需的凭证（authorizationToken 和 tenantId）。你可以通过完成注册来获取这些凭证。完成后，你会收到必要的凭证以初始化插件。

安装

要安装该插件，请将以下行添加到项目的pubspec.yaml文件中：

dependencies:
   flutter_pix_pagstar: ^1.0.2

然后运行 flutter pub get 来获取插件。

使用

在使用插件之前，需要通过 init() 函数进行初始化。此函数接受两个命名参数 authorizationToken 和 tenant，用于API请求。

FlutterPixPagstar.init(authorizationToken: 'your_authorization_token', tenant: 'your_tenant_id');

更改主题

为了自定义插件的外观，可以使用 setTheme() 函数，该函数接受一个 ThemeData 参数。

FlutterPixPagstar.setTheme(ThemeData.dark());

生成交易

要生成一个不返回屏幕的交易，可以使用 generateTransaction() 函数。它接收一个 PixTransactionModel 模型（名称和文档是可选的，如果不传递这些参数，将会创建一个匿名交易）。

FlutterPixPagstar.generateTransaction(model: PixTransactionModel(
  value: 100,
  tenantId: 'your_tenant_id',
  name: 'your_name',
  document: 'your_document',
  expiration: 600,
));

检查交易

要检查交易的状态，可以使用 checkTransaction() 函数。此函数接受一个名为 externalReference 的命名参数，该参数是要检查的交易的标识符。

FlutterPixPagstar.checkTransaction(externalReference: 'external_reference');

生成交易并显示屏幕

如果需要生成一个交易并同时展示一个屏幕，可以使用 generateTransactionWithScreen() 函数。此函数接受用于自定义的命名参数，包括 title、subtitle、cancelButtonLabel、successMessage 和 returnButtonLabel。

FlutterPixPagstar.generateTransactionWithScreen(
   context: context,
   model: PixTransactionModel(
     value: 100,
     tenantId: 'your_tenant_id',
     name: 'your_name',
     document: 'your_document',
     expiration: 600,
   ),
   title: 'Title',
   buttonLabel: 'Button Label',
   feedbackText: 'Feedback text',
   subtitle: 'Subtitle',
   cancelButtonLabel: 'Cancel Button Label',
   successMessage: 'Success Message',
   returnButtonLabel: 'Return Button Label',
);

打开选择金额页面

你还可以打开一个页面，让用户选择交易的金额。为此，可以使用 selectValuePage() 函数，该函数接受如 headerText、transactionTitle、transactionButtonLabel 和 feedbackText 等命名参数。

FlutterPixPagstar.selectValuePage(
   context: context,
   headerText: 'Header',
   buttonText: 'Transaction Button',
   subtitleText: 'Subtitle',
   transactionTitle: 'Transaction Title',
   transactionButtonLabel: 'Transaction Button Label',
   feedbackText: 'Feedback Text',
   cancelButtonLabel: 'Cancel Button Label',
   successMessage: 'Success Message',
   returnButtonLabel: 'Return Button Label',
);

错误处理

如果在请求过程中或在插件页面上发生意外错误，则会显示一个带有错误消息的通用屏幕。

计划变更

我们正在不断努力改进Flutter Pix Pagstar插件，未来更新的主要目标之一是提高设计组件的解耦性。这一改变旨在让开发者更灵活地个性化插件的外观和行为。

支持

如果你遇到任何问题或有任何改进此插件的建议，欢迎在GitHub上提交问题或拉取请求。

希望这个插件能让你轻松地将Pix集成到你的Flutter应用中！

示例代码

以下是完整的示例代码，展示了如何使用 flutter_pix_pagstar 插件：

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

void main() {
  // 初始化插件，输入你的凭证
  FlutterPixPagstar.init(
    authorizationToken: 'your_authorization_token',
    tenant: 'your_tenant_id',
  );
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pix Pagstar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Pix Pagstar Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '欢迎来到Pix Pagstar示例！',
            ),
            ElevatedButton(
              onPressed: () {
                FlutterPixPagstar.selectValuePage(
                  context: context,
                  headerText: "请输入Pix金额",
                  buttonText: "继续",
                  transactionTitle: "复制付款代码",
                  subtitleText:
                      "请选择用Pix付款，并粘贴以下代码：",
                  transactionButtonLabel: "复制代码",
                  feedbackText: "已复制到剪贴板！",
                  cancelButtonLabel: "取消",
                  successMessage: '付款已收到',
                  returnButtonLabel: "回到首页",
                );
              },
              child: const Text('创建Pix交易'),
            ),
          ],
        ),
      ),
    );
  }
}