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

最新推荐文章于 2025-06-09 16:26:35 发布

他说_

最新推荐文章于 2025-06-09 16:26:35 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信网页

本文链接：https://blog.youkuaiyun.com/m0_45041148/article/details/93977367

本文介绍了微信网页端支付的实现过程，包括用户登录后调用统一下单接口，后台与微信支付系统交互生成预付单信息，并传递支付参数到前端。接着，用户确认支付，后台验证授权，返回支付状态，前端判断支付是否成功。虽然文字逻辑尚待完善，但希望能帮助读者理解和实现微信支付功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

下面详细解释一下各步骤
微信登录就不说了,我的另一篇文章有,可以点击观看(https://blog.youkuaiyun.com/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 == "und