Flutter支付剪贴板管理插件flutter_payclip的使用

Flutter支付剪贴板管理插件flutter_payclip的使用

flutter_payclip 是一个扩展应用功能的库，允许开发者创建定制化的移动应用程序，以便处理信用卡和借记卡支付。

你能用 flutter_payclip 做什么？

flutter_payclip 可以让你在应用内集成支付流程，并提供用户友好的界面来引导客户完成支付过程。具体来说，它支持以下功能：

• 接受信用卡或借记卡支付，并预定义了支付界面。
• 获取当天交易历史记录。
• 在你的应用中启动和关闭 Clip 会话。
• 配置设备设置。
• 创建远程支付链接并分享给最终用户。

flutter_payclip 如何工作？

通过与移动设备的集成，flutter_payclip 可以扩展到Android和iOS设备，提供灵活的用户体验。使用该SDK，你可以轻松生成远程支付链接。一旦将远程支付作为支付选项包含在应用内，flutter_payclip 将指导用户完成生成和分享链接的过程。

集成支付流程的步骤如下：

1. 创建你自己的销售点应用。
2. 集成用于刷卡支付的库，支付流程界面已经预定义好了。
3. 在你的应用中继续支付流程的结束部分。

开始前你需要什么？

为了开发 flutter_payclip，你需要以下内容：

• Clip Plus 或 Clip Plus 2 设备。
• 活跃的 Clip 账户。
• 兼容开发需求的Android或iOS应用。

当前支持的功能

• 初始化SDK
• 配置设备设置
• 接受刷卡支付

使用方法

首先，在项目中添加库依赖：

dependencies:
  flutter_payclip: <最新版本>

导入库：

import 'package:flutter_payclip/flutter_payclip.dart';

初始化SDK

bool result = await FlutterPayClip.init();

登录和连接终端

bool result = await FlutterPayClip.settings(
  loginEnabled: true, 
  logoutEnabled: true
);

创建新支付

int result = await FlutterPayClip.payment(
  amount: 133.28, 
  enableContactless: true, 
  enableTips: true, 
  roundTips: true, 
  enablePayWithPoints: false, 
  customTransactionId: "123123"
);

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 flutter_payclip 插件。

import 'package:flutter/material.dart';
import 'package:quickalert/quickalert.dart';
import 'package:flutter_payclip/flutter_payclip.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FlutterPayClip payclip = FlutterPayClip();
  final _email = TextEditingController(text: '');
  final _password = TextEditingController(text: '');

  [@override](/user/override)
  void initState() {
    payclip.init();
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[800],
        title: const Text('SDK Clip'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: ListView(
            children: [
              TextFormField(
                controller: _email,
                keyboardType: TextInputType.emailAddress,
                decoration: const InputDecoration(
                  labelText: 'Email',
                ),
              ),
              TextFormField(
                controller: _password,
                keyboardType: TextInputType.visiblePassword,
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: '密码',
                ),
              ),
              const SizedBox(height: 10),
              MaterialButton(
                minWidth: double.infinity,
                color: Colors.orange[800],
                textColor: Colors.white,
                onPressed: () {
                  payclip.login(email: _email.text, password: _password.text).then((response) => {
                    if (response) {
                      QuickAlert.show(
                        context: context,
                        type: QuickAlertType.success,
                        text: '登录成功',
                        autoCloseDuration: const Duration(seconds: 2),
                      );
                    } else {
                      QuickAlert.show(
                        context: context,
                        type: QuickAlertType.error,
                        text: '登录失败',
                        autoCloseDuration: const Duration(seconds: 2),
                      );
                    }
                  });
                },
                child: const Text('登录'),
              ),
              MaterialButton(
                minWidth: double.infinity,
                color: Colors.orange[800],
                textColor: Colors.white,
                onPressed: () {
                  payclip.logout().then((success) => {
                    if (success) {
                      QuickAlert.show(
                        context: context,
                        type: QuickAlertType.success,
                        text: '登出成功',
                        autoCloseDuration: const Duration(seconds: 5),
                      );
                    } else {
                      QuickAlert.show(
                        context: context,
                        type: QuickAlertType.error,
                        text: '登出失败',
                        autoCloseDuration: const Duration(seconds: 5),
                      );
                    }
                  });
                },
                child: const Text('登出'),
              ),
              const SizedBox(height: 30),
              MaterialButton(
                minWidth: double.infinity,
                color: Colors.orange[800],
                textColor: Colors.white,
                onPressed: () {
                  payclip.settings(
                      loginEnabled: false, logoutEnabled: false);
                },
                child: const Text('打开设置'),
              ),
              MaterialButton(
                minWidth: double.infinity,
                color: Colors.orange[800],
                textColor: Colors.white,
                onPressed: () {
                  payclip.payment(
                          amount: 1.00,
                          enableContactless: true,
                          enableTips: true,
                          roundTips: true,
                          enablePayWithPoints: false,
                          customTransactionId: "123123")
                      .then((response) => {
                            if (response == -1) {
                              QuickAlert.show(
                                context: context,
                                type: QuickAlertType.success,
                                text: '支付成功',
                                autoCloseDuration: const Duration(seconds: 2),
                              );
                            }
                          });
                },
                child: const Text('创建支付'),
              )
            ],
          ),
        ),
      ),
    );
  }
}