微信公众号支付，iframe跨域

最新推荐文章于 2023-08-05 16:23:25 发布

cxscode

最新推荐文章于 2023-08-05 16:23:25 发布

阅读量583

点赞数

CC 4.0 BY-SA版权

文章标签： javascript js 小程序 dom ajax

本文链接：https://blog.csdn.net/cxs812760493/article/details/118098465

官方文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6，即可看到h5调起支付需要的参数。

获取后台调用微信生成的支付签名，

$scope.onBridgeReady = function () {
    $http.post("/wechat/createSign", $scope.payOrder).then(function (data) {
        var order = data.data.data;
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": order.appid,     //公众号名称，由商户传入
                "timeStamp": order.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": order.nonce_str, //随机串
                "package": "prepay_id=" + order.prepay_id,
                "signType": "MD5",         //微信签名方式
                "paySign": order.sign   //微信签名
            }, function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    //alert("微信支付成功!");
                    $http.post("/wechat/toPaySuccessUrl").then(function (data) {
                        window.location.href = data.data.data + "?orderNo=" + order.out_trade_no;
                    })
                    // window.location.href = "http://qiansheng.imwork.net/paydone.html?orderNo=" + order.out_trade_no;
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    //alert("用户取消支付!");

                } else {
                    alert("支付失败!");
                }
            });
    })
}

签名算法：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3

参考：微信公众号支付(二)H5调起支付 https://blog.csdn.net/zsm15623544116/article/details/79392263

通用demo： https://gitee.com/1600875665/weixinPay

然后需要实现iframe内调起支付

在iframe内发起

top.postMessage(data,'*');

外部做业务处理，可以做支付调起等

window.addEventListener("message", function (e) {
     wxPay(JSON.parse(e.data))
})

　微信支付方法封装

function wxPay(wxParams) {
        // 微信支付API
        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', wxParams,
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        console.log(res)
                        alert("成功")
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        console.log(res)
                        alert("失败")
                        // window.history.go(-1)
                    }
                });
        }
        if (typeof WeixinJSBridge == "undefined") {
            if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
            } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
            }
        } else {
            onBridgeReady();
        }

    }

注：想在iframe调起window.WeixinJSBridge是不行的，会返回undefined

1.设置监听

window.addEventListener('message', function (msg) {
console.log(msg.data);
})

2.发送 message

window.postMessage(”message“, '*');

实现多页面通讯；

使用postMessage 需要精确的目标origin，不要用 *。

iframe： https://www.w3school.com.cn/tags/tag_iframe.asp

跨域iframe实例： https://www.jb51.net/article/123740.htm https://www.cnblogs.com/qidian10/p/3316714.html

调用parent页面的方法： https://blog.csdn.net/shuaidao_wupengyou/article/details/73497528?locationNum=10&fps=1

window.addeventlistener使用方法：https://www.cnblogs.com/ConfidentLiu/p/7815624.html