Flutter支付集成插件weipl_checkout_flutter的使用

weipl_checkout_flutter 是一个用于集成 Worldline ePayments India Checkout 的官方 Flutter 插件。本文将详细介绍如何在 Flutter 应用中集成并使用该插件。

安装

首先，在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  weipl_checkout_flutter: ^1.1.0

注意：

• 对于 Android，确保应用的最低 API 级别为 21 或更高。
• 对于 iOS，确保应用的最低部署目标为 iOS 12.0 或更高。

然后运行以下命令获取依赖包：

flutter packages get

使用

导入包

在需要使用的 Dart 文件中导入插件：

import 'package:weipl_checkout_flutter/weipl_checkout_flutter.dart';

创建插件实例

创建 WeiplCheckoutFlutter 实例：

WeiplCheckoutFlutter wlCheckoutFlutter = WeiplCheckoutFlutter();

绑定事件监听器

插件使用基于事件的通信机制，并在支付成功或失败时发出事件。你可以通过 on(String event, Function handler) 方法绑定事件监听器：

wlCheckoutFlutter.on(WeiplCheckoutFlutter.wlResponse, handleResponse);

定义处理函数：

void handleResponse(Map<dynamic, dynamic> response) {
  // 处理支付响应
}

设置选项

配置支付所需的参数：

var options = {
  "features": {
    "enableAbortResponse": true,
    "enableExpressPay": true,
    "enableInstrumentDeRegistration": true,
    "enableMerTxnDetails": true,
  },
  "consumerData": {
    "deviceId": Platform.isAndroid ? "ANDROIDSH2" : "iOSSH2", // 根据平台选择设备ID
    "token": "a7356fb644fa98999a45d62361c80a574ff24f96b59669381593edbb97ef4feb0ea427d19e79b8d4ef5d82d38bb0eae890615b5054c702695deef11ec771b751",
    "paymentMode": "all",
    "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png",
    "merchantId": "L3348",
    "currency": "INR",
    "consumerId": "c964634",
    "consumerMobileNo": "9876543210",
    "consumerEmailId": "test@test.com",
    "txnId": "1684835158539",
    "items": [
      {"itemId": "first", "amount": "10", "comAmt": "0"}
    ],
    "customStyle": {
      "PRIMARY_COLOR_CODE": "#45beaa",
      "SECONDARY_COLOR_CODE": "#FFFFFF",
      "BUTTON_COLOR_CODE_1": "#2d8c8c",
      "BUTTON_COLOR_CODE_2": "#FFFFFF"
    }
  }
};

打开支付界面

调用 open 方法打开支付界面：

wlCheckoutFlutter.open(options);

响应处理

根据文档中的详细说明处理响应数据，并确保在服务器端执行 HASH 匹配逻辑。

示例 Demo

以下是一个完整的示例 Demo：

import 'package:flutter/material.dart';
import 'package:weipl_checkout_flutter/weipl_checkout_flutter.dart';
import 'dart:io' show Platform;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WeiplCheckoutFlutter wlCheckoutFlutter = WeiplCheckoutFlutter();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
                onPressed: () {
                  String deviceID = "";

                  if (Platform.isAndroid) {
                    deviceID = "ANDROIDSH2";
                  } else if (Platform.isIOS) {
                    deviceID = "iOSSH2";
                  }

                  var reqJson = {
                    "features": {
                      "enableAbortResponse": true,
                      "enableExpressPay": true,
                      "enableInstrumentDeRegistration": true,
                      "enableMerTxnDetails": true
                    },
                    "consumerData": {
                      "deviceId": deviceID,
                      "token": "your_token_here",
                      "paymentMode": "all",
                      "merchantLogoUrl": "https://www.paynimo.com/CompanyDocs/company-logo-vertical.png",
                      "merchantId": "your_merchant_id",
                      "currency": "INR",
                      "consumerId": "your_consumer_id",
                      "consumerMobileNo": "your_mobile_number",
                      "consumerEmailId": "your_email@example.com",
                      "txnId": "unique_transaction_id",
                      "items": [
                        {"itemId": "first", "amount": "10", "comAmt": "0"}
                      ],
                      "customStyle": {
                        "PRIMARY_COLOR_CODE": "#45beaa",
                        "SECONDARY_COLOR_CODE": "#FFFFFF",
                        "BUTTON_COLOR_CODE_1": "#2d8c8c",
                        "BUTTON_COLOR_CODE_2": "#FFFFFF"
                      }
                    }
                  };

                  wlCheckoutFlutter.on(WeiplCheckoutFlutter.wlResponse, handleResponse);
                  wlCheckoutFlutter.open(reqJson);
                },
                child: const Text("Proceed")),
          ],
        ),
      ),
    );
  }

  void handleResponse(Map<dynamic, dynamic> response) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Payment Response"),
          content: Text(response.toString()),
          actions: [
            TextButton(
              child: const Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }
}

以上代码展示了如何在 Flutter 应用中集成 weipl_checkout_flutter 插件，并实现支付功能。请根据实际情况调整参数和配置。