微信公众号开发之微信支付代码记录

·  阅读 109
需求说明

这个需求说明是完全没有必要的,但是还是写一下吧,但凡是做公众号的,一般都是需要了解这个微信支付的,不然基本的业务都没办法走,所以今天简单的记录一下微信支付的一些问题以及流程是怎么样的。记录的是jsapi支付,别的支付方式暂时没有记录,也就是拉起来付款界面的支付。

微信支付产品

pay.weixin.qq.com/static/prod…

微信开发步骤

pay.weixin.qq.com/wiki/doc/ap…

这里简单的说一下,我们打开这哥链接以后其实是官方截图的配置,有一个支付配置和设置授权域名
首先是支付配置:最简单的办法是我们打开需要支付的公众号,右上角有三个点,直接复制url,这个url就是这里需要配置的url
至于下面的授权域名,我自己当时是没有进行配置的,这里可能是我疏忽了,但是我没有配置也没有影响我使用,所以这里我不确定要不要配置。

支付接口

pay.weixin.qq.com/wiki/doc/ap…

function onBridgeReady(){
   WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
         "appId":"wx2421b1c4370ec43b",     //公众号名称,由商户传入     
         "timeStamp":"1395712654",         //时间戳,自1970年以来的秒数     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信签名方式:     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
      },
      function(res){
      if(res.err_msg == "get_brand_wcpay_request:ok" ){
      // 使用以上方式判断前端返回,微信团队郑重提示:
            //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
      } 
   }); 
}
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();
}

这段是官方的源码,我们是可以直接拿来使用的,这里主要是展示一下腾讯的签名是怎么生成的:
pay.weixin.qq.com/wiki/doc/ap…

上面的五个参数其实appid是我们可以拿到的,时间戳是我们直接可以生成的,注意这里是秒数,不是毫秒,随机串这个可以直接自己写一个函数,生成一个32位以内的随机数,prepay_id这是后端提供接口,返回一个预付id,signType是md5加密,无可争议的,最后一个是签名,签名的规则是:

◆ 参数名ASCII码从小到大排序(字典序);

◆ 如果参数的值为空不参与签名;

◆ 参数名区分大小写;

◆ 验证调用返回或微信主动通知签名时,传送的sign参数不参与签名,将生成的签名与该sign值作校验。

◆ 微信接口可能增加字段,验证签名时必须支持增加的扩展字段

这个就比较有意思了,我做的时候直接用后端生成好的签名进行的,但是理论上我前端也是可以生成的,但是我失败了,可能是我顺序的问题或者是别的什么问题吧,这个不得而知了。

看源码

废话不说了,既然是记录,就直接贴源码:
步骤很简单:

根据js拿到code

根据code获取openid

根据openid获取到预付id

根据预付id加上一些必要参数拉起支付

判断支付的成功与否进行相应的操作

       /**
       * @_fun_jsapi 拉起微信付款的界面
       */
      _fun_jsapi(order_no) {
        let that = this
        let openid = sessionStorage.getItem('openid')
        if (openid && that.timestamp && that.nonceStr) {
          request({
            method: 'post',
            url: Constants.host_jsapi + api.jsapi,
            data: {
              out_trade_no: order_no, //商家订单号
              total_fee: that.account_price * 100,
              product_id: '8501',   //所含产品id
              body: '微信公众号订房-颐陆科技', //订单简述 128字符(中文32位)
              detail: '',       //订单详情 60000字符 (中文1500位)
              fee_type: '',     //币种 缺省值CNY
              attach: '',       //用户附加字串,原样返回
              limit_pay: '',    //限制字串 例:no_credit 不收信用卡
              goods_tag: '',    //订单优惠标记
              openid: openid, //仅在jsapi中会使用
            }
          }).then((res) => {
            //alert(JSON.stringify(res))
            if (res.data.result_code === 'SUCCESS') {
              that.prepay_id = res.data.prepay_id
              that.timestamp = res.data.time_stamp
              that.nonceStr = res.data.nonce_str
              that.paySign = res.data.pay_sign
              that.onBridgeReady()
            } else {
              instance('error')
            }
          }).catch((err) => {
            instance(err);
            //alert(err);
          })
          //instance(sessionStorage.getItem('openid'));
        } else {
          instance('参数获取失败')
        }
      },
      /**
       * @onBridgeReady
       */
      onBridgeReady() {
        let that = this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": "wx7eb8183de8a1311b",     //公众号名称,由商户传入
            "timeStamp": that.timestamp + "",   //时间戳,自1970年以来的秒数
            "nonceStr": that.nonceStr, //随机串
            "package": "prepay_id=" + that.prepay_id, //预定单id
            "signType": "MD5", //微信签名方式:
            "paySign": that.paySign//微信签名
          },
          function (res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              //instance('支付成功')
              that.$router.push({path: '/Pay_success'})
            } else if (res.err_msg == "get_brand_wcpay_request:ok") {
              //that.$router.push({path:'/Pay_success'}) 取消支付
              instance('取消支付')
            } else {
              //instance('支付失败')
            }
          })
      },

需要注意的是:微信支付的金额是分为单位的,也就是我们正常的钱需要进行*100的操作

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改