Flutter支付网关插件phonepe_gateway的使用

在本教程中，我们将详细介绍如何在Flutter应用程序中使用phonepe_gateway插件来集成PhonePe支付网关。由于该插件并非公开发布，因此我们无法提供具体实现细节，但可以通过以下通用代码结构帮助您理解如何在Flutter中实现支付网关集成。

使用步骤概述

1. 初始化插件
   在Flutter应用中初始化phonepe_gateway插件，并传递必要的配置参数。

2. 设置事件处理程序
   设置处理支付成功、失败或取消等事件的回调函数。

3. 设计用户界面
   创建触发支付流程的按钮或其他交互组件。

4. 启动支付流程
   当用户触发支付时，调用支付网关API并传递必要信息。

5. 处理支付结果
   根据支付网关返回的状态更新用户界面或记录支付结果。

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter中使用phonepe_gateway插件进行支付：

import 'dart:convert';

import 'package:flutter/material.dart';

// 导入PhonePe Gateway相关的库
import 'package:phonepe_gateway/model/phonepe_config.dart';
import 'package:phonepe_gateway/model/phonepe_params_upi.dart';
import 'package:phonepe_gateway/phonepe_ui.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    // 初始化PhonePe支付网关
    PhonpePaymentGateway.instance.init(
      config: PhonePeConfig(
        redirectUrl: "http://127.0.0.1/test/view", // 回调URL
        baseUrl: "http://127.0.0.1/test", // 基础URL
        appName: "PhonePe Test App", // 应用名称
        callBackUrl:
            "https://webhook.site/845cb8cc-5d74-4494-95ea-3003c9c518ab", // 回调Webhook
        merchanId: "************", // 商户ID
        saltIndex: 1, // 盐值索引
        saltKey: "********-****-****-****-***********", // 盐值密钥
      ),
    );

    // 设置事件处理程序
    PhonpePaymentGateway.instance.handlerCancelled(
      (value) {
        debugPrint("Cancelled :${jsonEncode(value.toJson())}");
      },
    );

    PhonpePaymentGateway.instance.handlerFailed(
      (value) {
        debugPrint("Failed :${jsonEncode(value.toJson())}");
      },
    );

    PhonpePaymentGateway.instance.handlerSuccess(
      (value) {
        debugPrint("Success :${jsonEncode(value.toJson())}");
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('PhonePe支付示例'),
        ),
        body: Center(
          child: FloatingActionButton(
            onPressed: () async {
              // 启动支付流程
              await PhonpePaymentGateway.instance.initPayment(
                context,
                params: ParamsPayment(
                  amount: 1, // 支付金额（单位为分）
                  merchantTransactionId:
                      DateTime.now().millisecondsSinceEpoch.toString(), // 商户交易ID
                  merchantUserId: "1234567890", // 商户用户ID
                  mobileNumber: "1234567890", // 用户手机号码
                  notes: {
                    "uid": "1234567890", // 用户唯一标识
                    "name": "测试用户", // 用户姓名
                    "email": "example@example.com" // 用户邮箱
                  },
                ),
              );
            },
            child: const Icon(Icons.payment), // 图标
          ),
        ),
      ),
    );
  }
}

代码详解

1. 初始化支付网关

   PhonpePaymentGateway.instance.init(
     config: PhonePeConfig(
       redirectUrl: "http://127.0.0.1/test/view",
       baseUrl: "http://127.0.0.1/test",
       appName: "PhonePe Test App",
       callBackUrl: "https://webhook.site/845cb8cc-5d74-4494-95ea-3003c9c518ab",
       merchanId: "************",
       saltIndex: 1,
       saltKey: "********-****-****-****-***********",
     ),
   );

   • redirectUrl: 支付完成后重定向的URL。
   • baseUrl: 基础URL，用于API请求。
   • appName: 应用名称。
   • callBackUrl: 用于接收支付结果的Webhook URL。
   • merchanId: 商户ID。
   • saltIndex 和 saltKey: 用于签名验证的安全参数。

2. 设置事件处理程序

   PhonpePaymentGateway.instance.handlerCancelled(
     (value) {
       debugPrint("Cancelled :${jsonEncode(value.toJson())}");
     },
   );
   
   PhonpePaymentGateway.instance.handlerFailed(
     (value) {
       debugPrint("Failed :${jsonEncode(value.toJson())}");
     },
   );
   
   PhonpePaymentGateway.instance.handlerSuccess(
     (value) {
       debugPrint("Success :${jsonEncode(value.toJson())}");
     },
   );

   • handlerCancelled: 处理用户取消支付的情况。
   • handlerFailed: 处理支付失败的情况。
   • handlerSuccess: 处理支付成功的情况。

3. 启动支付流程

   await PhonpePaymentGateway.instance.initPayment(
     context,
     params: ParamsPayment(
       amount: 1,
       merchantTransactionId: DateTime.now().millisecondsSinceEpoch.toString(),
       merchantUserId: "1234567890",
       mobileNumber: "1234567890",
       notes: {
         "uid": "1234567890",
         "name": "测试用户",
         "email": "example@example.com"
       },
     ),
   );