微信公众号前端支付实现

曾经终败给现在 2022-04-23 05:38 271阅读 0赞

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

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

[https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421140842][https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140842]

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

[2 第二步：通过code换取网页授权access\_token][2 _code_access_token]

[3 第三步：刷新access\_token（如果需要）][3 _access_token]

[4 第四步：拉取用户信息(需scope为 snsapi\_userinfo)][4 _scope_ snsapi_userinfo]

[5 附：检验授权凭证（access\_token）是否有效][5 _access_token]

实现流程是

![ä¸å¡æµç¨][format_png]

请求自己服务器，传订单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等前端视频学习资料关注公众号【码兄】免费获取 ###

![20191014103439896.png][]

[https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140842]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
[1 _code]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.3638839504019358#0
[2 _code_access_token]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.3638839504019358#1
[3 _access_token]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.3638839504019358#2
[4 _scope_ snsapi_userinfo]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.3638839504019358#3
[5 _access_token]: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421140842&t=0.3638839504019358#4
[format_png]: /images/20220323/fab84111005c4092ab25fe47de52074c.png
[20191014103439896.png]: /images/20220323/4dc9687b25334fff99ffce7aa600cfbb.png