在h5中调起微信支付

我爱画页面

已于 2022-08-17 11:01:54 修改

阅读量1.5k

点赞数

文章标签：微信

于 2021-04-24 11:25:23 首次发布

本文链接：https://blog.youkuaiyun.com/qdm13209211861/article/details/116084844

版权

具体支付流程需要后端和微信那边对接，前端只需要调起支付页面就行，函数里面的参数全部由后端返回。

官方文档：https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_6_2.shtml

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信支付</title>
</head>

<body>
    <div style="text-align:center;size:30px;">
        <input type="button" style="width:200px;height:80px;" value="微信支付" onclick="callpay()">
    </div>
</body>

</html>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
    function callpay() {
       //这里的参数全部由后端返回
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
                "appId": "wxecf3ae97bc826a07", //公众号ID，由商户传入     
                "timeStamp": "1617265039648", //时间戳  
                "nonceStr": "wxecf3ae97bc826a07", //随机串     
                "package": "prepay_id=wx20210401160153404751",
                "signType": "MD5", //微信签名方式：     
                "paySign": "7909D7FAC59AADE971B3D7757C7EB457" //微信签名 
            },
            function(res) {
                WeixinJSBridge.log(res.err_msg);
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    alert("微信支付成功!");
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    alert("用户取消支付!");
                } else {
                    alert("支付失败!");
                }
            })
    }
</script>