微信公众号前端支付实现

公众号支付需要获取公众号的appId

下面是公众号的文档说明如何获取token

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

5 附：检验授权凭证（access_token）是否有效

实现流程是

请求自己服务器，传订单id传openid

获取到数据以后使用下面方法

 callPay: function (response) {
                if (typeof WeixinJSBridge === "undefined") {
                    if (document.addEventListener) {
                        document.addEventListener('WeixinJSBridgeReady', $.app.order.onBridgeReady(response), false);
                    } else if (document.attachEvent) {
                        document.attachEvent('WeixinJSBridgeReady', $.app.order.onBridgeReady(response));
                        document.attachEvent('onWeixinJSBridgeReady', $.app.order.onBridgeReady(response));
                    }
                } else {
                    $.app.order.onBridgeReady(response);
                }
            }

onBridgeReady: function (response) {
                console.info("timestamp:" + response.timestamp + " appid" + response.appid + " nonce_str" + response.nonce_str + ";package " + response.package + " ,signType" + response.signType + ",paySign" + response.paySign);
                if (response.package === undefined) {
                    return;
                }
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId": response.appid,     //公众号名称，由商户传入
                        "timeStamp": response.timestamp,         //时间戳，自1970年以来的秒数
                        "nonceStr": response.nonce_str, //随机串
                        "package": response.package,
                        "signType": response.signType,         //微信签名方式：
                        "paySign": response.paySign //微信签名
                    },
                    function (res) {
                        if (res.err_msg === "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            $.app.connector.dialog("支付成功");
                            $.app.order.orderState($('#orderWhole'), true);
                        }
                        WeixinJSBridge.log(response.err_msg);
                    }
                );

            },

 

送上一波福利

微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取