前端微信支付demo实现代码

前端来说，要做的事情不多，在demo中也有示例

微信支付DEMO

在微信商务平台中配置JSAPI支付授权目录，不然无法进行支付

登录后->产品中心->开发配置->公众号支付授权目录

如果需要调用JSAPI的网站为https://xxx.xxx.com/Wxpay/index.html

则需要授权的地址为https://xxx.xxx.com/Wxpay/，就是把你网址最后一个/后面的内容去掉，注意最后一个/不能去掉

前端代码：

<script>
function jsApiCall(){
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        <?php echo $jsApiParameters; ?>,
        function(res){
            // 支付后，微信会返回支付的状态
            // https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
            if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                // 支付成功 注意这里不能直接返回到/Wxpay/notify，因为notify是由微信调用的，前端这里不能直接触发
                window.location.href = '/Wxpay/success';
            } else {
                // 支付失败
                window.location.href = '/WxJsAPI/fail'
            }
        }
    )
}
function callpay() {
    if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener){
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    }else{
        jsApiCall();
    }
}
// 支付时触发callpay就OK了
$("#pay").click(function() {
   callpay(); 
});
</script>