Flutter支付集成插件flashpay_flutter_plugin的使用

Flutter支付集成插件flashpay_flutter_plugin的使用

使用

打开支付表单

要打开支付表单,需要执行以下步骤:

  1. 创建EcmpPaymentInfo对象。

此对象必须包含以下必需参数:

  • projectId(int)——由Flashpay分配的项目标识符。
  • paymentId(String)——项目内唯一的支付标识符。
  • paymentCurrency(String)——以ISO 4217 alpha-3格式表示的支付货币代码。
  • paymentAmount(int)——支付金额,以最小货币单位表示。
  • customerId(String)——客户在项目内的标识符。
  • signature(String)——在所有必需参数指定后生成的请求签名。
final paymentInfo = EcmpPaymentInfo(
  projectId: 12312,
  paymentId: "paymentId",
  paymentAmount: 100,
  paymentCurrency: "USD",
);
  1. EcmpPaymentInfo对象中的参数进行签名。
final paramsForSignature = await ecmpPlugin.getParamsForSignature(paymentInfo);
paymentInfo.signature = "CALCULATED_SIGNATURE_FROM_YOUR_BACKEND";
  1. 创建EcmpPaymentOptions对象,其中包含必需的参数actionType(枚举),其值指定了所需的操作类型:
  • EcmpActionType.sale
  • EcmpActionType.auth
  • EcmpActionType.verify
  • EcmpActionType.tokenize

除了必需的EcmpPaymentInfo对象和actionType参数外,以下示例还包含几个额外的参数,包括EcmpAdditionalFields对象,用于收集客户信息的数据。

final paymentOptions = EcmpPaymentOptions(
  actionType: EcmpActionType.Sale,
  paymentInfo: paymentInfo,
  isDarkTheme: false,
  // 如果需要使用真实服务,请设置为EcmpMockModeType.disabled
  mockModeType: EcmpMockModeType.success,
  // 设置显示模式
  screenDisplayModes: [EcmpScreenDisplayMode.hideDeclineFinalScreen],
  // 设置附加字段
  additionalFields: [
    EcmpAdditionalField(type: "email", value: "mail@mail.com"),
    EcmpAdditionalField(type: "first_name", value: "firstName"),
  ],
  // 设置收款人信息
  recipientInfo: EcmpRecipientInfo(),
  // 设置定期信息
  recurrentData: EcmpRecurrentData(),
);
  1. 创建EcmpPlugin对象。
final ecmpPlugin = EcmpPlugin();
  1. 打开支付表单并处理结果。
final response = await ecmpPlugin.sdkRun(paymentOptions);

示例代码

以下是完整的示例代码:

import 'package:flashpay_flutter_plugin/ecmpplugin.dart';
import 'package:flashpay_flutter_plugin/models/ecmp_additional_field.dart';
import 'package:flashpay_flutter_plugin/models/ecmp_payment_info.dart';
import 'package:flashpay_flutter_plugin/models/ecmp_payment_options.dart';
import 'package:flashpay_flutter_plugin/models/ecmp_recipient_info.dart';
import 'package:flashpay_flutter_plugin/models/ecmp_recurrent_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ProductDetailsPage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品详情'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () async {
          final ecmpPlugin = EcmpPlugin();
          // 创建支付信息
          final paymentInfo = EcmpPaymentInfo(
            projectId: 12312,
            paymentId: "paymentId",
            paymentAmount: 100,
            paymentCurrency: "USD",
          );

          // 获取签名参数
          final paramsForSignature = await ecmpPlugin.getParamsForSignature(paymentInfo);
          debugPrint(paramsForSignature);
          // 计算并设置签名,并将其设置到支付信息中
          paymentInfo.signature = "signature";

          final paymentOptions = EcmpPaymentOptions(
            actionType: EcmpActionType.sale,
            paymentInfo: paymentInfo,
            isDarkTheme: false,
            // 如果需要使用真实服务,请设置为EcmpMockModeType.disabled
            mockModeType: EcmpMockModeType.success,
            // 设置显示模式
            screenDisplayModes: [EcmpScreenDisplayMode.hideDeclineFinalScreen],
            // 设置附加字段
            additionalFields: [
              EcmpAdditionalField(type: "email", value: "mail@mail.com"),
              EcmpAdditionalField(type: "first_name", value: "firstName"),
            ],
            // 设置收款人信息
            recipientInfo: EcmpRecipientInfo(),
            // 设置定期信息
            recurrentData: EcmpRecurrentData(),
          );

          try {
            final response = await ecmpPlugin.sdkRun(paymentOptions);
            debugPrint(response.toString());
          } on PlatformException {
            debugPrint("PlatformException");
          }
        },
        label: const Text('购买'),
      ),
      body: ListView(
        children: [
          // 商品图片
          Container(
            height: 300,
            color: Colors.grey,
          ),

          // 商品标题
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 10.0),
            child: Text(
              '数字印刷聚酯棉果阿风格热带印花男式半袖衬衫',
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0),
            ),
          ),

          // 商品描述
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget risus lacus. Curabitur a turpis eros. Cras congue dui nec magna aliquet, quis vehicula libero egestas. Nullam at sollicitudin sem. Sed a augue dictum, tempor mi quis, feugiat neque. Aliquam egestas lectus orci, et rhoncus augue suscipit quis. Ut quis porta magna.'),
          ),

          // 商品价格
          const Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              '\$100',
              style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500),
            ),
          ),
          const SizedBox(
            height: 30.0,
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


flashpay_flutter_plugin 是一个用于在 Flutter 应用中集成支付功能的插件。使用这个插件,你可以轻松地在你的 Flutter 应用中集成支付功能。以下是如何使用 flashpay_flutter_plugin 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 flashpay_flutter_plugin 的依赖。

dependencies:
  flutter:
    sdk: flutter
  flashpay_flutter_plugin: ^版本号  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入插件:

import 'package:flashpay_flutter_plugin/flashpay_flutter_plugin.dart';

3. 初始化插件

在应用启动时,你需要初始化 flashpay_flutter_plugin。通常,你可以在 main.dart 文件中进行初始化。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlashpayFlutterPlugin.initialize(
    appId: 'your_app_id',  // 替换为你的应用ID
    merchantId: 'your_merchant_id',  // 替换为你的商户ID
    isTestMode: true,  // 如果是在测试环境,设置为 true
  );
  runApp(MyApp());
}

4. 发起支付

在需要发起支付的地方,调用 FlashpayFlutterPlugin 的支付方法。例如:

void _makePayment() async {
  try {
    var paymentResult = await FlashpayFlutterPlugin.makePayment(
      amount: '100.00',  // 支付金额
      currency: 'USD',  // 货币类型
      orderId: 'order123',  // 订单ID
      productName: 'Product Name',  // 产品名称
      productDescription: 'Product Description',  // 产品描述
    );

    if (paymentResult['status'] == 'success') {
      // 支付成功
      print('Payment successful: ${paymentResult['transactionId']}');
    } else {
      // 支付失败
      print('Payment failed: ${paymentResult['message']}');
    }
  } catch (e) {
    // 处理异常
    print('Error during payment: $e');
  }
}

5. 处理支付结果

支付完成后,makePayment 方法会返回一个包含支付结果的对象。你可以根据 status 字段来判断支付是否成功,并根据需要进行处理。

6. 其他功能

flashpay_flutter_plugin 可能还提供了其他功能,如查询订单、退款等。你可以查阅插件的文档或源代码来了解更多信息。

7. 注意事项

  • 确保你在测试环境和生产环境中正确配置了 appIdmerchantId
  • 如果是在测试环境中,记得将 isTestMode 设置为 true
  • 处理支付结果时,确保处理了所有可能的异常情况。

8. 插件文档

由于插件的具体实现可能会有所不同,建议你查阅 flashpay_flutter_plugin 的官方文档或 GitHub 仓库以获取最新的使用说明和示例代码。

示例代码

以下是一个完整的示例代码,展示了如何使用 flashpay_flutter_plugin 进行支付:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await FlashpayFlutterPlugin.initialize(
    appId: 'your_app_id',
    merchantId: 'your_merchant_id',
    isTestMode: true,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PaymentPage(),
    );
  }
}

class PaymentPage extends StatelessWidget {
  void _makePayment() async {
    try {
      var paymentResult = await FlashpayFlutterPlugin.makePayment(
        amount: '100.00',
        currency: 'USD',
        orderId: 'order123',
        productName: 'Product Name',
        productDescription: 'Product Description',
      );

      if (paymentResult['status'] == 'success') {
        print('Payment successful: ${paymentResult['transactionId']}');
      } else {
        print('Payment failed: ${paymentResult['message']}');
      }
    } catch (e) {
      print('Error during payment: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FlashPay Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _makePayment,
          child: Text('Make Payment'),
        ),
      ),
    );
  }
}
回到顶部