Flutter中实现微信支付流程

越陌度阡

发布于 2021-03-02 10:53:03

3.8K0

发布于 2021-03-02 10:53:03

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

1. 微信支付流程

上面的流程图来自于官方，看起来比较复杂，其实大部分的流程都是由官方自己完成的，下面是一个简易的流程图示例：

简要的说明一下：

步骤1：用户在商户APP中选择商品，提交订单，选择微信支付；步骤2：商户后台收到用户支付单，调用微信支付统一下单接口；步骤3：微信统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。参与签名的字段名为appid，partnerid，prepayid，noncestr，timestamp，package；步骤4：商户APP结合收到的签名字段调起微信支付；步骤5：微信服务器响应商户APP的支付结果，同时异步通知商户后台，以便商户后台查询支付结果。

参考：

https://pay.weixin.qq.com/wiki/doc/api/app/app.php?chapter=8_3

2. IOS微信支付注意事项

1. 如下图所示，用Xcode打开 flutter 项目中的ios文件夹，勾选如下两个选项；

2. 如下图所示，用Xcode打开 flutter 项目中的ios文件夹，添加URL Schemes；

3. Xcode中的包名一定要和微信平台Bundle ID一致；

3. Android微信支付注意事项

微信支付没法直接连接调试工具测试，如果直接连接会返回-1，这个时候我们需要重新用我们以前的签名文件生成签名，然后发到手机测试。

注意：

1. 微信开放平台必须配置应用包名和应用签名；

2. Android 应用包名称必须和微信开放平台配置的一样；

3. 微信开放平台配置应用签名的时候使用的 keystore 文件必须和正式打包的 keystore 签名文件一致；

4. 代码中配置的 APP ID必须和开放平台一致；

5. 生成预支付信息的服务器 API 接口得提前准备好；

6. Android 必须正式打包后才能进行微信支付；

7. 每次打包之前记得执行一下项目清理，如下图所示；

4. IOS及Android微信支付的实现

1. 安装插件

dependencies:
  sy_flutter_wechat: ^0.2.2

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入插件

import 'package:sy_flutter_wechat/sy_flutter_wechat.dart';

3. 使用插件

import 'dart:convert';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

import 'package:sy_flutter_alipay/sy_flutter_alipay.dart';
import 'package:sy_flutter_wechat/sy_flutter_wechat.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: '支付演示'),
        );
    }
}

class MyHomePage extends StatefulWidget {
    MyHomePage({Key key, this.title}) : super(key: key);
    final String title;
    @override
    _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

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

    // 注册应用程序
    _register() async {
        // APPID根据实际项目而定
        bool result = await SyFlutterWechat.register('wx5881fa2638a2ca60');
    }
    // 微信支付
    _doWxPay() async {
        // 应用程序后台地址
        var apiUrl = 'http://agent.itying.com/wxpay/';
        var myPayInfo = await Dio().get(apiUrl);
        Map myInfo = json.decode(myPayInfo.data);
        // 签名的相关信息
        var payInfo = {
            "appid": myInfo["appid"].toString(),
            "partnerid": myInfo["partnerid"].toString(),
            "prepayid": myInfo["prepayid"].toString(),
            "package": myInfo["package"].toString(),
            "noncestr": myInfo["noncestr"].toString(),
            "timestamp": myInfo["timestamp"].toString(),
            "sign": myInfo["sign"].toString(),
        };

        SyPayResult payResult =await SyFlutterWechat.pay(SyPayInfo.fromJson(payInfo));
        print(payResult);

    }

    //  支付宝支付
    _doAliPay() async {
        // 应用程序后台地址
        var serverApi = "http://agent.itying.com/alipay/";
        var serverData = await Dio().get(serverApi);
        // 签名的相关信息
        var payInfo = serverData.data;
        var result = await SyFlutterAlipay.pay(
            payInfo,
            // 前面配置的urlScheme
            urlScheme: 'flutteralipay', 
            // 是否是沙箱环境，只对android有效
            // isSandbox: true 
        );
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(widget.title),
            ),
            body: Center(
                child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        RaisedButton(
                            child: Text('微信支付'),
                            onPressed: _doWxPay,
                        ),
                        RaisedButton(
                            child: Text('支付宝支付'),
                            onPressed: _doAliPay,
                        ),
                        RaisedButton(
                            child: Text('分享文字'),
                            onPressed: () async {
                                bool res = await SyFlutterWechat.shareText('
                                    hello world',
                                    shareType: SyShareType.session
                                );
                                print('分享文字：' + res.toString());
                            },
                        ),
                        RaisedButton(
                            child: Text('分享图片'),
                            onPressed: () async {
                                bool res = await SyFlutterWechat.shareImage(
                                    'https://avatars0.githubusercontent.com/u/10024776',
                                    shareType: SyShareType.timeline
                                );
                                print('分享图片：' + res.toString());
                            },
                        ),
                        RaisedButton(
                            child: Text('分享网页'),
                            onPressed: () async {
                                bool res = await SyFlutterWechat.shareWebPage(
                                    '标题',
                                    '描述',
                                    'https://avatars0.githubusercontent.com/u/10024776',
                                    'http://www.example.com',
                                    shareType: SyShareType.session
                                );
                                print('分享网页：' + res.toString());
                            },
                        )
                    ],
                ),
            ),
        );
    }
}

参考：

https://pub.dev/packages/sy_flutter_wechat