Flutter银联支付插件union_pay的使用

Flutter银联支付插件union_pay的使用

银联支付SDK Flutter版插件,支持iOS,Android平台。

开始

在使用前强烈建议阅读银联官方接入指南。例如,在iOS上你还需要设置URL Scheme。

Android

目前暂时关闭了混淆。

iOS

在工程info.plist设置中添加一个URL Types,否则无法返回你的app。

info.plist文件中添加白名单:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>uppaysdk</string>
    <string>uppaywallet</string>
    <string>uppayx1</string>
    <string>uppayx2</string>
    <string>uppayx3</string>
</array>

获取云闪付SDK版本号(iOS暂不支持)

var version = await UnionPay.uPayVersion();

检查云闪付App是否安装

var result = await UnionPay.isInstalled(mode: PaymentEnv.DEVELOPMENT, merchantInfo: "");

mode分为测试环境和生产环境,merchantInfo为商户标识。

支付

只需设置支付环境和交易流水号即可。

var result = await UnionPay.pay(
  mode: PaymentEnv.DEVELOPMENT,
  tn: "669802785406247611910", // 交易流水号
  scheme: "UnionPayTest", // 只对iOS有效
);

mode分为测试环境和生产环境,scheme只对iOS有效。

Flutter

支持Flutter空安全。

示例代码

import 'dart:convert';

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

import 'package:flutter/services.dart';
import 'package:union_pay/enum/union_pay_enum.dart';
import 'package:union_pay/union_pay.dart';

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  [@override](/user/override)
  State<StatefulWidget> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  String _platformVersion = 'Unknown';

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

  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> initPlatformState() async {
    String platformVersion;
    // Platform messages may fail, so we use a try/catch PlatformException.
    // We also handle the message potentially returning null.
    try {
      platformVersion = await UnionPay.uPayVersion();
      print("platformVersion===$platformVersion");
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });

    UnionPay.payListener((result) {
      showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('TEST'),
            content: Text(result.status.toString()),
          );
        },
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            Center(
              child: Text('Running on: $_platformVersion\n'),
            ),
            TextButton(
              onPressed: () {
                UnionPay.isInstalled(mode: PaymentEnv.DEVELOPMENT, merchantInfo: "").then((value) {
                  print("安装成功$value");
                });
              },
              child: Text('是否安装云支付App'),
            ),
            TextButton(
              onPressed: () {
                UnionPay.pay(
                  mode: PaymentEnv.DEVELOPMENT,
                  tn: "669802785406247611910",
                  scheme: "UnionPayTest",
                ).then((value) {
                  print("##########$value");
                });
              },
              child: Text('调起支付'),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter银联支付插件union_pay的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然,以下是一个关于如何在Flutter应用中使用union_pay插件进行银联支付的示例代码。这个示例假设你已经设置好了Flutter开发环境,并且已经添加了union_pay插件到你的pubspec.yaml文件中。

首先,确保你的pubspec.yaml文件中包含以下依赖:

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

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

接下来,在你的Flutter项目中,你需要进行以下步骤来集成银联支付功能:

  1. 初始化银联支付插件

在你的主应用文件(通常是main.dart)中,你需要导入union_pay插件并进行初始化。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter UnionPay Example'),
        ),
        body: Center(
          child: UnionPayPaymentButton(),
        ),
      ),
    );
  }
}

class UnionPayPaymentButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        // 调用银联支付插件进行支付
        await _startUnionPayPayment();
      },
      child: Text('Pay with UnionPay'),
    );
  }

  Future<void> _startUnionPayPayment() async {
    // 银联支付所需的参数,这里需要根据你的实际情况进行配置
    final Map<String, String> paymentParams = {
      'tn': '你的交易号', // 交易号,由你的后端生成
      'mode': '00',      // 交易模式,通常为'00'表示消费
      'merId': '你的商户号', // 商户号
      'orderId': '你的订单号', // 订单号,唯一标识一笔交易
      'timeStamp': DateTime.now().millisecondsSinceEpoch.toString(), // 时间戳
      'currencyCode': '156', // 货币代码,'156'表示人民币
      'encData': '你的加密数据', // 加密数据,由你的后端生成并加密
      'sign': '你的签名',        // 签名,由你的后端生成
    };

    try {
      // 调用插件的支付方法
      final UnionPayPaymentResult result = await UnionPayPlugin.startPayment(paymentParams);
      if (result.status == '00') {
        // 支付成功
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('支付成功')));
      } else {
        // 支付失败
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('支付失败: ${result.message}')));
      }
    } catch (e) {
      // 处理异常
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('支付过程中发生错误: $e')));
    }
  }
}

注意:上述代码中的paymentParams参数需要根据你的实际业务逻辑进行配置,特别是tn(交易号)、merId(商户号)、encData(加密数据)和sign(签名)等,这些通常由你的后端服务生成。

  1. 处理支付结果

在上面的代码中,UnionPayPaymentResult对象包含了支付的结果信息。你可以根据status字段来判断支付是否成功,并据此进行后续处理。

  1. 配置Android和iOS的银联支付环境

在实际应用中,你还需要在Android和iOS项目中配置银联支付所需的SDK和权限。这通常涉及到修改AndroidManifest.xmlInfo.plist以及添加银联支付的SDK库文件。具体配置步骤可以参考银联支付的官方文档或union_pay插件的README文件。

请确保你已经阅读并理解了银联支付的集成文档,因为实际集成过程中可能需要根据具体的业务需求和银联的要求进行更多的配置和调整。

回到顶部