微信网页端支付功能(前端)详解

微信支付功能其实与登录授权功能是有相通之处的,都是调用微信的JSAPI,直接搜索JSAPI就可以看见微信支付的文档。接下来我说一下支付功能我的思路。
首先 :
用户登录进入页面,支付调取统一下单接口,后台使用统一下单与微信支付系统换算,生成一个预付单信息并带有支付参数传给前端
其次 :
用户发起支付,确认支付,提交一个支付授权,后台为微信支付系统验证授权,返回前端参数,判断是否支付成功

下面详细解释一下各步骤
微信登录就不说了,我的另一篇文章有,可以点击观看(https://blog.csdn.net/m0_45041148/article/details/93722464)
登录授权之后,点击**支付**按钮,向后端调取统一下单接口,将价格、备注等你额外的信息传给后台,将商户号,时间戳,字符串,签名,签名方式等必须的元素,从后台获取,从而唤起支付。
function onBridgeReady(){
WeixinJSBridge.invoke(
		'getBrandWCPayRequest', {
        "appId": appId,         //公众号名称，由商户传入
        "timeStamp": timestamp, //时间戳，自1970年以来的秒数
        "nonceStr": nonceStr,   //随机串
        "package": packages,
        "signType": signType,   //微信签名方式：
        "paySign": paySign      //微信签名
    },
        function (res) {
           if (res.err_msg == "get_brand_wcpay_request:ok") {
           // 使用以上方式判断前端返回,微信团队郑重提示：
           //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠
        }
});
}
if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }

好了，支付功能的代码就在这里了,也是刚刚开始写博客,文字逻辑可能还不是很好,请多包涵,希望在写博客的过程中,让自己记忆持续更久,也可以为你们提供帮助。