微信支付前端开发指南

使用场景

  1. 微信公众号内嵌H5网页调用微信支付
  2. 在微信浏览器中的网页唤起微信支付界面

详情可以查阅微信支付官方文档 链接地址

功能思路

  1. 后台整合微信官方的相关下单接口,编写预下单接口提供前台调用,并返回订单相关参数
  2. 前台按照下方示例代码,传递相关订单参数后唤起微信支付界面
  3. 后台整合微信官方订单状态查询接口,编写订单状态查询接口提供前台调用,并返回订单支付状态
  4. 用户支付完后,通过微信返回的参数以及步骤3的订单状态接口来判断订单是否支付成功,完成后续业务逻辑操作

前端代码

1. 设置判断是否可以调用微信支付的变量

let can_pay;

2. 判断WeixinJSBridge对象是否存在当前浏览器中,该对象只在微信浏览器中有效,并在回调函数中通过设置判断变量来确认微信支付可用,调用微信相关API

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();
}

onBridgeReady() {
    can_pay = true;
    WeixinJSBridge.call('hideOptionMenu'); // 微信API,用于隐藏右上角按钮,与之对应的是显示右上角按钮(showOptionMenu),还有显示隐藏底部导航栏的API(showToolbar/hideToolbar)
}

3. 如果判断变量为真则开始通过对象唤起支付界面,并在回调函数中完成其他业务逻辑操作,注意查看注释内容不要直接复制全部代码不做修改

if (can_pay) {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
            // res.data对象为后台返回参数对象
            appId: res.data.appId, // 公众号id,为当前服务商号绑定的appid
            timeStamp: res.data.timeStamp, // 时间戳,自1970年以来的秒数
            nonceStr: res.data.nonceStr, // 随机字符串,不长于32位
            package: res.data.payInfo, // 订单详情扩展字符串,统一下单接口返回的prepay_id参数值
            signType: res.data.signType, // 签名方式,默认为MD5,支持HMAC-SHA256和MD5
            paySign: res.data.sign // 签名
        },
        // 微信支付官方接口的返回函数
        function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
                console.log('这里调用后台的订单状态查询函数,如果后台查询成功则微信支付成功,反之失败')
            } else {
                console.log('支付异常')
            }
        }
    );
}

我是 fx67ll.com,如果您发现本文有什么错误,欢迎在评论区讨论指正,感谢您的阅读!
如果您喜欢这篇文章,欢迎访问我的 本文github仓库地址,为我点一颗Star,Thanks~ :)
转发请注明参考文章地址,非常感谢!!!

你可能感兴趣的:(微信支付前端开发指南)