Flutter支付集成插件paytm_allinonesdk的使用

paytm_allinonesdk 是一个用于在Flutter应用程序中集成Paytm支付网关的插件。它简化了开发者将Paytm支付功能添加到其应用的过程。本文档将引导您完成如何在Flutter项目中使用 paytm_allinonesdk 插件来实现支付功能。

1. 使用此包作为库

1.1 依赖于它

首先，在您的项目的 pubspec.yaml 文件中添加对 paytm_allinonesdk 的依赖：

dependencies:
  paytm_allinonesdk: ^1.2.7

1.2 安装它

安装包可以通过命令行执行以下命令：

flutter pub get

或者，如果您的编辑器支持 flutter pub get，可以直接通过编辑器进行操作。请查阅您的编辑器文档以获取更多信息。

1.3 导入它

接下来，在Dart代码中导入 paytm_allinonesdk 包：

import 'package:paytm_allinonesdk/paytm_allinonesdk.dart';

2. 调用交易方法

为了发起支付请求，您可以使用 AllInOneSdk.startTransaction 方法。下面是一个完整的示例，展示了如何构建一个包含所有必要参数的支付界面，并处理支付结果。

import 'package:flutter/material.dart';
import 'package:paytm_allinonesdk/paytm_allinonesdk.dart';
import './edit_text.dart'; // 假设这是自定义文本输入组件

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(brightness: Brightness.dark),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Paytm Payment'),
        ),
        body: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String mid = "", orderId = "", amount = "", txnToken = "";
  String result = "";
  bool isStaging = false;
  bool isApiCallInProgress = false;
  String callbackUrl = "";
  bool restrictAppInvoke = false;
  bool enableAssist = true;

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

  @override
  Widget build(BuildContext context) {
    return Card(
      child: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.all(8),
          child: Column(
            children: <Widget>[
              EditText('Merchant ID', mid, onChange: (val) => mid = val),
              EditText('Order ID', orderId, onChange: (val) => orderId = val),
              EditText('Amount', amount, onChange: (val) => amount = val),
              EditText('Transaction Token', txnToken, onChange: (val) => txnToken = val),
              EditText('Callback URL', callbackUrl, onChange: (val) => callbackUrl = val),
              Row(
                children: <Widget>[
                  Checkbox(
                    activeColor: Colors.lightBlue,
                    value: isStaging,
                    onChanged: (bool? val) {
                      setState(() {
                        isStaging = val!;
                      });
                    },
                  ),
                  Text("Staging"),
                ],
              ),
              Row(
                children: <Widget>[
                  Checkbox(
                    activeColor: Colors.lightBlue,
                    value: restrictAppInvoke,
                    onChanged: (bool? val) {
                      setState(() {
                        restrictAppInvoke = val!;
                      });
                    },
                  ),
                  Text("Restrict AppInvoke"),
                ],
              ),
              Container(
                margin: EdgeInsets.all(16),
                child: ElevatedButton(
                  onPressed: isApiCallInProgress ? null : () {
                    _startTransaction();
                  },
                  child: Text('Start Transaction'),
                ),
              ),
              Container(
                alignment: Alignment.bottomLeft,
                child: Text("Message : "),
              ),
              Container(
                child: Text(result),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Future<void> _startTransaction() async {
    if (txnToken.isEmpty) {
      return;
    }
    var sendMap = <String, dynamic>{
      "mid": mid,
      "orderId": orderId,
      "amount": amount,
      "txnToken": txnToken,
      "callbackUrl": callbackUrl,
      "isStaging": isStaging,
      "restrictAppInvoke": restrictAppInvoke,
      "enableAssist": enableAssist
    };
    print(sendMap);
    try {
      setState(() {
        isApiCallInProgress = true;
      });

      var response = AllInOneSdk.startTransaction(
        mid, 
        orderId, 
        amount, 
        txnToken, 
        callbackUrl, 
        isStaging, 
        restrictAppInvoke, 
        enableAssist
      );

      response.then((value) {
        print(value);
        setState(() {
          result = value.toString();
          isApiCallInProgress = false;
        });
      }).catchError((onError) {
        if (onError is PlatformException) {
          setState(() {
            result = onError.message.toString() + " \n  " + onError.details.toString();
            isApiCallInProgress = false;
          });
        } else {
          setState(() {
            result = onError.toString();
            isApiCallInProgress = false;
          });
        }
      });
    } catch (err) {
      setState(() {
        result = err.toString();
        isApiCallInProgress = false;
      });
    }
  }
}

请注意：

• EditText 组件是假设存在的自定义文本输入框，请根据实际情况替换或创建。
• 在实际使用时，mid（商户ID）、orderId（订单ID）、amount（金额）、txnToken（交易令牌）和 callbackUrl（回调URL）需要从后端服务获取。
• isStaging 标志表示是否使用测试环境，默认为 false 表示生产环境；restrictAppInvoke 控制是否限制调起Paytm应用进行支付，默认为 false。
• enableAssist 参数用来决定是否启用辅助模式，默认为 true。

以上就是关于如何在Flutter中集成 paytm_allinonesdk 插件并实现支付功能的基本指南。希望这对您有所帮助！