Flutter支付处理插件plugpag_flutter的使用

Flutter支付处理插件plugpag_flutter的使用

Setup - Android

在Android平台设置插件时，需要进行一些配置。

AndroidManifest.xml

首先，在AndroidManifest.xml文件中添加必要的权限和工具替换属性。确保将YOUR_PACKAGE_NAME替换为您的实际包名。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="YOUR_PACKAGE_NAME"
    xmlns:tools="http://schemas.android.com/tools">

    ...
</manifest>

接着，更新<application>标签以包含tools:replace="android:label"属性。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="YOUR_PACKAGE_NAME"
    xmlns:tools="http://schemas.android.com/tools">
    <application
        android:label="YOUR_ANDROID_LABEL"
        tools:replace="android:label"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">

        ...
    </application>
</manifest>

app/build.gradle

在app/build.gradle文件中，确保配置了最低SDK版本，并添加了必要的依赖项。

defaultConfig {
    ...
    minSdkVersion 21
    ...
}

dependencies {
    ...
    
    implementation 'android.br.com.uol.pagseguro:plugpag:4.9.4'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.4.0'
}

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用plugpag_flutter插件。

main.dart

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:plugpag_flutter/plugpag_flutter.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 MaterialApp(
      title: 'Flutter PlugPag Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter PlugPag Demo'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  String _result = "未初始化";

  void _initPlugPag() async {
    try {
      await PlugPag.startPayment(context); // 初始化支付
      setState(() {
        _result = "初始化成功";
      });
    } catch (e) {
      setState(() {
        _result = "初始化失败: $e";
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_result), // 显示结果
            ElevatedButton(
              onPressed: _initPlugPag, // 按钮点击事件
              child: const Text('初始化PlugPag'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


plugpag_flutter 是一个 Flutter 插件，用于在移动应用中处理支付操作。它通常用于与支付终端进行通信，执行支付流程，并获取支付结果。以下是如何在 Flutter 项目中使用 plugpag_flutter 插件的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 plugpag_flutter 插件的依赖。

dependencies:
  flutter:
    sdk: flutter
  plugpag_flutter: ^版本号

请将 ^版本号 替换为你想要使用的 plugpag_flutter 插件的具体版本号。

2. 初始化插件

在使用插件之前，你需要在应用的 main.dart 文件中初始化插件。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await PlugpagFlutter.initialize();
  runApp(MyApp());
}

3. 配置支付

在需要处理支付的地方，你可以使用 PlugpagFlutter 类来配置支付参数并启动支付流程。

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

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

class _PaymentPageState extends State<PaymentPage> {
  bool _isLoading = false;
  String _paymentResult = '';

  Future<void> _startPayment() async {
    setState(() {
      _isLoading = true;
    });

    try {
      // 配置支付参数
      PaymentRequest request = PaymentRequest(
        amount: 1000, // 金额（以分为单位）
        type: PaymentType.CREDIT, // 支付类型
        installment: 1, // 分期数
        userReference: 'order123', // 用户参考信息
      );

      // 启动支付
      PaymentResult result = await PlugpagFlutter.startPayment(request);

      setState(() {
        _paymentResult = 'Payment Success: ${result.transactionId}';
      });
    } catch (e) {
      setState(() {
        _paymentResult = 'Payment Failed: ${e.toString()}';
      });
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Payment Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _isLoading
                ? CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: _startPayment,
                    child: Text('Start Payment'),
                  ),
            SizedBox(height: 20),
            Text(_paymentResult),
          ],
        ),
      ),
    );
  }
}
回到顶部