微信公众号 支付（JSAPI）流程

今天来说说,微信公众号支付。本人刚做完微信公众号支付项目，所以想趁热打铁赶紧温习一下，若有觉得不对的地方，大家可以指出，我们共同学习。

前言：公众号支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。前期准备要想在微信公众号上完成支付就要有着两个账号：（1）已认证微信公众的服务号,而且开通微信支付功能（2）微信商户平台账号。两个账号可能都需要是企业版，因为有不少信息需要备案之类的。（要把两个账号密码记好哦 !）

参考链接 ： 微信开发文档

一、微信公众号支付参数

    公众号的APPID： 例 wxeq*********09

    APPSECEPT : c241***************769c2

    商户ID (MchID) ：15******01

    API密钥：test************2019(API密钥在商户平台的账户中心下:需要用户自行下载证书及安装)。

二、基本配置

请确保实际支付时的请求目录与后台配置的目录一致

在微信商户平台（pay.weixin.qq.com）设置您的JSAPI支付支付目录，设置路径：商户平台-->产品中心-->开发配置，如图7.7所示。JSAPI支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。

设置授权域名

开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败 

三、流程

  点击支付按钮  =>

1、发起后台请求(请求参数 例:支付金额、支付类型、说明等 )  => 

2、后台生成商户订单、调用微信统一下单API()   并返回前端支付所需参数 params =>

3、前端收到后台给的参数 params 包含appId、timeStamp、nonceStr等。调用JSAPI接口请求支付（此过程是前端与微信交            互） => 

4、前端根据微信返回的支付结果做出提示，微信会将支付结果通知后台

5、前端向后台发起请求 判断是否支付成功

 下面的代码  是我收到 params 参数开始的  

params 参数 (appId、timeStamp、nonceStr、package、signType，参数区分大小写。）

if (typeof window.WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(params) 
     }, false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(params) })
      document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(params) })
    }
  } else {
    onBridgeReady(params)
  }


onBridgeReady(obj) {
      let that = this
      let parmas = obj
      window.WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: parmas.appId, // 公众号名称，由商户传入
          timeStamp: parmas.timeStamp, // 时间戳，自1970年以来的秒数
          nonceStr: parmas.nonceStr, // 随机串
          package: parmas.package,
          signType: parmas.signType, // 微信签名方式：
          paySign: parmas.paySign // 微信签名
        },
        function(res) {
          if(res.err_msg=="get_brand_wcpay_request:fail"){
               that.$weui.dialog({
                title: "提示",
                content: "支付失败",
                buttons: [
                  {
                    label: "确定",
                    type: "primary"
                  }
                ]
                }); 
                //支付失败 通知服务器端 
                ajaxSubmit(that.$http,payFail,"POST",                            
                   {dealRecordId:that.dealRecordId},resData => {
                });    
            }else if(res.err_msg=="get_brand_wcpay_request:cancel"){
                that.$weui.dialog({
                  title: "提示",
                  content: "取消支付",
                  buttons: [
                    {
                      label: "确定",
                      type: "primary"
                    }
                  ]
                  });
                   //支付取消 通知服务器端 
                  ajaxSubmit(that.$http,payFail,"POST",        
                     {dealRecordId:that.dealRecordId},resData => {
                  });    
                   
              }else if(res.err_msg == "get_brand_wcpay_request:ok") { 
                  //支付成功 
                  //查看服务端该订单是否支付成功 支付结果以后台为准
                  ajaxSubmit(that.$http,payInquire,"get", 
                     {dealRecordId:that.dealRecordId},resData => {
                    let user = JSON.parse(localStorage.getItem("userInfo"));
                    if(resData.result== 0){
                          user.userInfo.memberStartTime = resData.data.memberStartTime
                          user.userInfo.memberEndTime = resData.data.memberEndTime
                          user.userInfo.memberGrade = that.goodsName
                          user.isPayFlag = true
                          localStorage.setItem('userInfo',JSON.stringify(user))
                          that.$router.push({ path: "/mine"})
                        }else if(resData.result== 1){
                          that.$weui.dialog({
                            title: "提示",
                            content: "支付失败,请稍后重试",
                            buttons: [
                              {
                                label: "确定",
                                type: "primary"
                              }
                            ]
                          });
                        }else{
                          that.$weui.dialog({
                            title: "提示",
                            content: "程序异常",
                            buttons: [
                              {
                                label: "确定",
                                type: "primary"
                              }
                            ]
                          });
                        }
                      
                  });
              }else{
                that.$weui.dialog({
                  title: "提示",
                  content: "支付失败",
                  buttons: [
                    {
                      label: "确定",
                      type: "primary"
                    }
                  ]
                  });
                  ajaxSubmit(that.$http,payFail,"POST",                                                            
                     {dealRecordId:that.dealRecordId},resData => {
                  });   
          }
      );
    },

四、总结可能会遇到的坑

 （1)、当前页面的 url 未注册

         解决方法： 如果你的支付地址是： http://xxx.com/Wechat/Pay/Index/pay.html

                            那么你的支付授权目录应该添加为 http://xxx.com/Wechat/Pay/Index/（要以 / 结尾）

    (2)、chooseWXPay:fail, the permission value is offline verifying

             原因：这是因为微信开发者工具里面没有钱包的功能，需要真机测试支付。

     （3)、下单账户与支付账户不一致

               需要后台查看 openId 配置