Flutter统一支付接口插件get_upi的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter统一支付接口插件get_upi的使用

标题

Flutter统一支付接口插件get_upi的使用

内容

  • Getting Started

    • 这个Flutter插件是Android和iOS原生SDK的包装。
  • Installation

    • pubspec.yaml文件中添加以下依赖:
      get_upi: ^0.0.4
      
  • Requirements

    • 添加以下内容到应用的manifest文件中:
      • 如果使用此包进行UPI授权,请将主机设置为mandate,否则设置为pay
  • Usage

    • 导入包:

      import 'package:get_upp/get_upp.dart';
      
    • 获取所有已安装的UPI应用程序(对于Android):

      List<UpiObject> upiAppsList = [];
      
      Future<void> getUpi() async {
        if (Platform.isAndroid) {
          var value = await GetUPI.apps();
          upiAppsListAndroid = value.data;
        } else if (Platform.isIOS) {
          var valueIos = await GetUPI.iosApps();
          upiAppsList.clear();
          upiAppsList = valueIos;
        }
        setState(() {});
      }
      
    • 使用native intent打开UPI应用程序:

      GetUPI.openNativeIntent(url: 'pass the upi string');
      
    • upiAppsList中打开UPI应用程序:

      GetUPI.launch(
        package: upiApp.packageName,
        url: 'pass the upi string',
      );
      

示例代码

import 'dart:io';

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

import 'package:get_upp/get_upp.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const MyApp(),
    ),
  );
}

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

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

class _MyAppState extends State<MyApp> {
  List upiAppsList = [];
  List<UpiObject> upiAppsListAndroid = [];

  MethodChannel methodChannel = const MethodChannel("get_upp");

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  Future<void> getUpp() async {
    if (Platform.isAndroid) {
      var value = await GetUPI.apps();
      uppAppsListAndroid = value.data;
    } else if (Platform.isIOS) {
      var valueIos = await GetUPI.iosApps();
      upiAppsList.clear();
      upiAppsList = valueIos;
    }
    setState(() {});
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example app'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            if (Platform.isAndroid) {
              GetUPI.openNativeIntent(
                url: 'your mandate url',
              );
            } else if (Platform.isIOS) {
              getUpp().then((_) {
                GetUPI.showUpiSheet(
                  context,
                  upiAppsList: upiAppsList,
                  mandateUrl: "your mandate url",
                );
              });
            }
          },
          child: const Text("Native Intent"),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用get_upi插件来实现统一支付接口(UPI)的示例代码。这个插件允许你启动UPI支付意图,让用户能够选择他们的银行应用并完成支付。

首先,确保你已经在你的Flutter项目中添加了get_upi依赖。打开你的pubspec.yaml文件,并添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  get_upi: ^最新版本号 # 请替换为实际的最新版本号

然后运行flutter pub get来安装依赖。

接下来,你可以在你的Flutter应用中实现UPI支付。以下是一个简单的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UPI Payment Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PaymentScreen(),
    );
  }
}

class PaymentScreen extends StatefulWidget {
  @override
  _PaymentScreenState createState() => _PaymentScreenState();
}

class _PaymentScreenState extends State<PaymentScreen> {
  final UpiPlugin _upiPlugin = UpiPlugin();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter UPI Payment Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 配置UPI支付参数
            final UpiPaymentDetails paymentDetails = UpiPaymentDetails(
              receiverUpiId: 'receiver@ybl', // 接收方的UPI ID
              amount: '10.00',               // 支付金额
              transactionNote: 'Demo Payment', // 交易备注
              transactionRef: 'txn12345',     // 交易参考ID
              currencyCode: 'INR',           // 货币代码
              appName: 'Your App Name',      // 你的应用名称(可选)
            );

            try {
              // 启动UPI支付
              final UpiPaymentResponse response = await _upiPlugin.startUpiPayment(
                paymentDetails: paymentDetails,
              );

              // 处理支付结果
              if (response.status == UpiPaymentStatus.success) {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Payment Successful'),
                      content: Text('Transaction ID: ${response.transactionId}'),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('OK'),
                        ),
                      ],
                    );
                  },
                );
              } else if (response.status == UpiPaymentStatus.failed) {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Payment Failed'),
                      content: Text(response.errorMessage ?? 'Unknown error'),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('OK'),
                        ),
                      ],
                    );
                  },
                );
              } else if (response.status == UpiPaymentStatus.cancelled) {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('Payment Cancelled'),
                      content: Text('User cancelled the payment'),
                      actions: <Widget>[
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('OK'),
                        ),
                      ],
                    );
                  },
                );
              }
            } catch (e) {
              // 处理异常
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('Error'),
                    content: Text('An error occurred: $e'),
                    actions: <Widget>[
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        child: Text('OK'),
                      ),
                    ],
                  );
                },
              );
            }
          },
          child: Text('Make Payment'),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的Flutter应用,其中包含一个按钮,用户可以点击该按钮来启动UPI支付流程。支付细节(如接收方的UPI ID、支付金额等)通过UpiPaymentDetails对象传递给startUpiPayment方法。支付完成后,根据返回的结果,我们显示相应的对话框来通知用户支付是否成功、失败或被取消。

请确保在实际应用中替换receiver@ybl为实际的接收方UPI ID,并根据需要调整其他支付参数。

回到顶部