这篇说下前端部分，流程上一篇已经介绍了，第3部是调用微信端的支付方法

这里再把详细的步骤通俗一下：
1、首先前端选择商品下单 调用自己服务器的接口
2、服务端收到后，生成自己订单id并保存， 在服务端请求 微信的下单接口，
3、微信下单接口返回之后 再通知到前端，package字段，调用微信的支付方法
4、微信支付成功或失败进入各自业务流程
5、成功之后会通知的自己的服务接口，携带自己的订单id 用语更新状态。

WeixinJSBridge.invoke(
   'getBrandWCPayRequest', {
       "appId" : json["appId"],   //公众号名称，由商户传入     
       "timeStamp": json["timeStamp"], //时间戳，自1970年以来的秒数     
       "nonceStr" : json["nonceStr"], //随机串     
       "package" : json["package"], // 下单接口返回的"prepay_id="+rst["prepay_id"][0]
       "signType" :json["signType"], //微信签名方式：     
       "paySign" : json["paySign"] //微信签名 
   }, callback)

callback

function callback(res) {
    if(res.err_msg == "get_brand_wcpay_request：ok" ) {
        支付成功
    } else {
        支付失败
    }
}

整体代码

$.ajax({
    url: "/epay/pay",
    contentType: "application/json",
    data: JSON.stringify({
        openid: openid,
        classname: classname,
        schoolid: schoolid,
        username: username,
        grade: grade,
        subjects: subjects.join(",")
    }),
    type: "POST",
    error: error_method,
    success: function(data) {
        if (data.code == 0) {
            var json = data["data"]
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": json["appId"], //公众号名称，由商户传入     
                    "timeStamp": json["timeStamp"], //时间戳，自1970年以来的秒数     
                    "nonceStr": json["nonceStr"], //随机串     
                    "package": json["package"],
                    "signType": json["signType"], //微信签名方式：     
                    "paySign": json["paySign"] //微信签名 
                },
                function(res) {
                    if (res.err_msg == "get_brand_wcpay_request：ok") {
                        var $loadingToast = $('#toast');
                        $loadingToast.fadeIn(100);
                        setTimeout(function() {
                            $loadingToast.fadeOut(100);
                        }, 1500);
                    } else {
                        location.href = "跳转";
                    }
                }
            );
        } else {
            $("#iosDialog2").show();
            $("#dacon").html("支付失败，请稍候重试！");
            location.reload();
        }
    }
})

• h5发起支付
  签名注意
  1、时间戳记得转换成字符串 ios会提示有问题
  2、记得加上key

文章来源: 微信支付前端开发整理