微信内H5调起支付_jweixin

最近一个项目是在微信公众号内开发，涉及到微信公众号在网页中进行微信支付，根据文档要求想要支付就必须要获取到用户的openid。

这是微信官方文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

1. 我们首先要从微信开发者后台得到appid，这个appid是管理员在设置微信后台时获取的，而且是唯一的，而且还需要在微信后台设置回调域名。

2.设置网页授权域名

3.以上配置好后， 请求微信接口后去code值

    getOpen() {
                const appId = '微信开发者后台得到appid'
                const code = this.GetUrlParam("code")
                const local = '公众号后端配置网页回调地址'
                if (code == null || code == "") {
                    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                        appId +
                        '&redirect_uri=' +
                        encodeURIComponent(local) +
                        '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
                } else {
                   
                }
            }，

// 获取url地中code值

    GetUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                console.log(r)
                if (r != null) {
                    return unescape(r[2]);
                }
                return null;
            },

4.根据code获取微信用户的openid，下面中的一些参数可以在系统中进行配置，这里方便展示

  public async Task<IActionResult> GetOpenId(string code)
        {
            string appid = "微信开发者后台得到appid";
            string secret = "微信公众号的秘钥";
            string baseUrl = "https://api.weixin.qq.com/";
            string url = "sns/oauth2/access_token";
            string pragm = $"appid={appid}&secret={secret}&code={code}&grant_type=authorization_code";
            var res = HttpHelper.GetHttpApi(baseUrl, url, pragm);
            RootObject rb = JsonConvert.DeserializeObject<RootObject>(res);
            var datas = ResponseHelper.CreateJson(ErrorCode.Success, rb); // 返回的数据格式，（ResponseHelper这个类是构建返回参数，自己可以定义）
            return Ok(datas);
        }

HttpHelper类中的方法

public static string GetHttpApi(string baseUrl, string url, string pragm = "")
        {
            var client = new RestSharpClient(baseUrl);
            var result = client.Execute(string.IsNullOrEmpty(pragm)
                ? new RestRequest(url, Method.GET)
                : new RestRequest($"{url}?{pragm}", Method.GET));
            if (result.StatusCode == HttpStatusCode.OK)
            {
                return result.Content;
            }
            else
                return string.Empty;
        }

 

5..这样我们就可以获取到微信用户的openId，获取到openID之后我们下一步进行在网页调用微信支付，首先我们需要引入jweixin-module，因在网页中不能直接调用uniapp中封装微信支付的方法，故需引入jweixin-module

npm install jweixin-module --save

6.前端页面中进行调用

    var jweixin = require('jweixin-module');

let result =data // 请求后端接口返回的数据（下面会有说明）

jweixin.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: "公众号的唯一标识", // 必填，公众号的唯一标识
                            timestamp: result.timeStamp, // 必填，生成签名的时间戳
                            nonceStr: result.nonceStr, // 必填，生成签名的随机串
                            signature: result.signature, // 必填，签名，
                            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        });
                        jweixin.ready(function() {
                            jweixin.chooseWXPay({
                                timestamp: result.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                                nonceStr: result.nonceStr, // 支付签名随机串，不长于 32 位
                                package: result.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                                signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                                paySign: result.paySign, // 支付签名
                                success: function(res) {
                                    // 支付成功后的回调函数
                                      uni.showToast({
                                          icon: 'none',
                                         title: '支付成功',
                                        duration: 4000
                            });
                                },
                                cancel: function(r) {},
                                fail: function(res) {
                                    console.log('payfail')
                                }
                            });
                        });
                        jweixin.error(function(res) {
                            uni.showToast({
                                icon: 'none',
                                title: '支付失败了',
                                duration: 4000
                            });
                        });

7.后端接口返回签名

  Startu.cs 添加

using Senparc.Weixin.TenPay.V3;
using Senparc.Weixin.TenPay;

在方法中进行编码

               var price = Convert.ToInt32(input.UnitPrice); //单位：分
                var openId = member.OpenId;// 用户的openID
                var body = "租车金额支付";
                var appid = "小程序id";//小程序id
                var macid = "商户号";//商户号
                var orderNo = $"{macid}{SystemTime.Now.ToString("yyyyMMddHHmmss")}{TenPayV3Util.BuildRandomStr(6)}"; //生成订单号
                var ip = _user.GetClientIP();
                var notify_url = "支付成功后回调接口（接口不传入参数）";
                var mackey = "商户号秘钥";//商户号秘钥
                var timeStamp = TenPayV3Util.GetTimestamp(); // 生成签名的时间戳
                var nonceStr = TenPayV3Util.GetNoncestr();//生成签名的随机串
                var xmlDataInfo = new TenPayV3UnifiedorderRequestData(
                    appid, macid, body, orderNo,
                    price, ip, notify_url, TenPayV3Type.JSAPI, openId, mackey, nonceStr);

                // 调用统一订单接口
                var wexinResult = TenPayV3.Unifiedorder(xmlDataInfo);

               var packageStr = $"prepay_id={wexinResult.prepay_id}";// 统一支付接口返回的prepay_id参数值
                var result = new OnlinePayOutput()
                {
                    timeStamp = timeStamp,
                    nonceStr = nonceStr,
                    tradeId = orderNo,
                    package = packageStr,
                    signature = wexinResult.sign, // 对应页面中签名，
                    paySign = TenPayV3.GetJsPaySign(appid, timeStamp, nonceStr, packageStr, mackey) // 对应页面中支付签名，
                };

           return result // 返回数据给前端进行支付操作

 

微信支付遇到问题总结

https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=20_1 签名工具用谷歌打开。

1.提示签名错误

当提示签名错误时请参考几条进行排查

1）统一下单用的是A商户号，也必须是A商户号登陆商户平台设置key才对。
2）要注意统一下单请求参数中total_fee参数的类型是int类型。 单位是分
3） 编码问题，确保所有的都是utf-8的. 如果有中文, 可以先把中文改成英文重新签名，看是否签名错误，如果英文不会错中文才会错，基本肯定是编码问题
4）消息中字段大小写和文档中完全一致
5）统一下单和调起支付签名类型需要一致。
6）参数的类型和格式，长度限制需要完全符合文档的要求

7）https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6 参考接口中的必填参数是否都有

以上代码已使用在项目中，确认是可以在微信公众微内（H5）调起支付