Flutter支付集成插件ecommpay_flutter_plugin的使用

Flutter支付集成插件ecommpay_flutter_plugin的使用

使用

打开支付表单

要打开支付表单，请遵循以下步骤：

1. 创建EcmpPaymentInfo对象。

该对象必须包含以下必需参数：

• projectId（int）——由Ecommpay分配的项目标识符
• 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);

完整示例Demo

以下是一个完整的示例，展示了如何使用ecommpay_flutter_plugin插件进行支付集成。

import 'package:ecommpay_flutter_plugin/ecmpplugin.dart';
import 'package:ecommpay_flutter_plugin/models/ecmp_additional_field.dart';
import 'package:ecommpay_flutter_plugin/models/ecmp_payment_info.dart';
import 'package:ecommpay_flutter_plugin/models/ecmp_payment_options.dart';
import 'package:ecommpay_flutter_plugin/models/ecmp_recipient_info.dart';
import 'package:ecommpay_flutter_plugin/models/ecmp_recurrent_data.dart';
import 'package:ecommpay_flutter_plugin_example/signature_generator.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: 138723,
            paymentId: "paymentId",
            paymentAmount: 100,
            paymentCurrency: "USD",
          );

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

          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,
          ),
        ],
      ),
    );
  }
}