Flutter支付集成插件 `pagseguro_smart_flutter` 的使用

🎯 关于

该项目旨在简化Flutter应用程序与PagSeguro Smart SDK的集成。它仅适用于智能POS设备。

🚀 技术栈

以下工具用于构建项目：

Flutter
PlugPagServiceWrapper

🏁 配置

# Pubspec.yaml

要在项目中使用此插件，请将 pagseguro_smart_flutter 添加为依赖项到您的 pubspec.yaml 文件中。

dependencies:
  pagseguro_smart_flutter: any

这会获取最新版本。

# Android Manifest

为了在Android应用中集成PlugPagService库，需要在AndroidManifest.xml中添加如下权限：

<uses-permission android:name="br.com.uol.pagseguro.permission.MANAGE_PAYMENTS"/>

并且，在主Activity中添加如下Intent-filter以使您的应用能够作为默认支付应用接收卡片插入意图：

<intent-filter>
 <action android:name="br.com.uol.pagseguro.PAYMENT"/>
 <category android:name="android.intent.category.DEFAULT"/>
</intent-filter>

# Build.gradle

确保在app级别的build.gradle文件中设置minSdkVersion为23，这是由PagSeguro的plugpagservice版本1.27.2所要求的。

defaultConfig {
    applicationId "com.example.pagseguro_example"
    minSdkVersion 23
    targetSdkVersion flutter.targetSdkVersion
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
}

# 实现

创建PaymentController类

创建一个继承自PaymentHandler的类，该类负责监控并返回PagSeguro的数据。

class PaymentController extends PaymentHandler {
  // 类成员变量定义...

  [@override](/user/override)
  void onTransactionSuccess() {
    BotToast.showText(text: "Transacao com successo!");
  }

  // 其他方法实现...
}

启动交易

首先激活PinPad，然后可以进行不同类型的支付操作，如信用、借记等。

// 激活PinPad
PagseguroSmart.instance().payment.activePinpad('12345');

// 发起信用支付
PagseguroSmart.instance().payment.creditPayment(12.50);

更多交易类型和功能请参阅上述文档部分。

示例代码

下面是一个简单的示例程序结构，展示如何使用pagseguro_smart_flutter插件。

import 'package:flutter/material.dart';
import 'package:bot_toast/bot_toast.dart'; // 用于显示消息提示
import 'payment/payment_page.dart'; // 假设这是处理支付逻辑的页面

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

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

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [BotToastNavigatorObserver()],
      builder: BotToastInit(),
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Pagseguro Smart Flutter'),
            bottom: const TabBar(tabs: [
              Tab(child: Text("Vender")),
              Tab(child: Text("Transações"))
            ]),
          ),
          body: TabBarView(
            children: [
              const PaymentPage(), // 处理支付逻辑的页面
              Container(),
            ],
          ),
        ),
      ),
    );
  }
}

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

sinazl 1楼•5 小时前

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

当然，下面是一个关于如何在Flutter应用中集成pagseguro_smart_flutter插件的示例代码。这个插件允许你使用PagSeguro支付网关进行支付操作。

首先，确保你已经在pubspec.yaml文件中添加了pagseguro_smart_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  pagseguro_smart_flutter: ^最新版本号  # 替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来，你需要在你的Flutter项目中配置和使用这个插件。以下是一个基本的集成示例：

1. 配置Android和iOS平台

对于Android，你可能需要在android/app/src/main/AndroidManifest.xml中添加必要的权限（如网络权限），但pagseguro_smart_flutter通常会处理这些配置。

对于iOS，你可能需要在ios/Runner/Info.plist中添加一些配置，但这通常也是由插件自动处理的。不过，确保你的Xcode项目配置正确，并且已经设置了适当的支付网关URL Scheme。

2. 初始化插件并进行支付

在你的Flutter项目中，你可以创建一个新的Dart文件来封装支付逻辑，例如payment_service.dart：

import 'package:flutter/services.dart';
import 'package:pagseguro_smart_flutter/pagseguro_smart_flutter.dart';

class PaymentService {
  static const MethodChannel _channel = MethodChannel('pagseguro_smart_flutter');

  // 配置你的PagSeguro凭证
  static final String email = "your_pagseguro_email@example.com";
  static final String token = "your_pagseguro_token";

  // 初始化PagSeguro
  static Future<void> initialize() async {
    try {
      await PagSeguroSmartFlutter.initialize(email: email, token: token);
    } catch (e) {
      print("Error initializing PagSeguro: $e");
    }
  }

  // 发起支付
  static Future<void> startPayment({
    required String paymentDescription,
    required double amount,
    required List<Map<String, dynamic>> items,
  }) async {
    try {
      await PagSeguroSmartFlutter.startPayment(
        paymentDescription: paymentDescription,
        amount: amount,
        currency: 'BRL', // 巴西雷亚尔
        items: items,
      );
    } catch (e) {
      print("Error starting payment: $e");
    }
  }
}

3. 在你的主应用中使用支付服务

在你的主Dart文件（例如main.dart）中，你可以这样调用支付服务：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PagSeguro Payment Integration'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              await PaymentService.initialize();

              // 示例商品列表
              final items = [
                {
                  'id': '1',
                  'description': 'Product 1',
                  'amount': 10.0,
                  'quantity': 1,
                },
                {
                  'id': '2',
                  'description': 'Product 2',
                  'amount': 20.0,
                  'quantity': 2,
                },
              ];

              await PaymentService.startPayment(
                paymentDescription: 'Order #12345',
                amount: 50.0, // 总金额
                items: items,
              );
            },
            child: Text('Start Payment'),
          ),
        ),
      ),
    );
  }
}

注意事项

安全性：不要在客户端代码中硬编码敏感信息（如电子邮件和令牌）。考虑使用安全的存储方式，如Flutter的Keychain或KeyStore插件。
错误处理：在实际应用中，你应该添加更详细的错误处理逻辑，以处理各种可能的异常情况。
测试：在发布之前，确保在真实设备和不同的网络条件下测试支付流程。

这个示例展示了如何在Flutter应用中集成和使用pagseguro_smart_flutter插件。根据你的具体需求，你可能需要调整代码和配置。

Flutter支付集成插件pagseguro_smart_flutter的使用

Flutter支付集成插件 pagseguro_smart_flutter 的使用