支付宝和微信的JSSDK发起支付

支付宝

（1）引入alipay的jsapi文件

<script src="https://a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.min.js"></script>

（2）点击支付按钮调用的后台创建交易的接口，返回tradeNO

this.API.trade_create({
  total_amount: 0.01,
  subject: localStorage.tablename+'点餐',
  buyer_id: localStorage.user_id,
  shop_id: localStorage.shop_id,
  seller_id: localStorage.seller_id,
  out_trade_no: this.orderdetail['pos_reference'],
  payment: 'CODEPAY'
}).then((response) => {
  //该接口主要是为了拿到tradeNO,前端只需拿到tradeNO即可
  this.alipayPay(response);
}, (response) => {
  mui.toast('网络错误');
});

//传入tradeNO
alipayPay: function (response) {
  this.tradePay(response);
}

//发起支付
tradePay: function (tradeNO) {
  let that = this;
  this.alipayReady(function() {
    // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
    AlipayJSBridge.call("tradePay", {
      tradeNO: tradeNO
    }, function (data) {
      //支付成功后data.resultCode是900
      if ("9000" == data.resultCode) {
        that.processActionLog(tradeNO);
        //这是扫码点餐的数据回流给支付宝的代码，没用到可以直接去掉
        that.$store.dispatch('user_record',{
          orderid: that.orderdetail['id'],
          shop_id: localStorage.shop_id,
          user_id: localStorage.user_id,
          merchant_pid: localStorage.seller_id,
          tablename:  localStorage.tablename,
          i: localStorage.i,
          status: 14,
          statusDesc: '已支付',
          action_type: 'order_dishes'
        });
        that.$router.push({path:'/orderinfo'});
      }
    });
  });
}

微信

（1）首先安装下jssdk

npm i -S weixin-js-sdk

（2）main.js引入

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx;

（3）点击支付按钮发起支付

this.API.toPay({
  //参数根据后台需要
  ordersn:this.orderdetail['pos_reference'],
  amount:this.orderdetail['amount_total'],
  user_id:localStorage.user_id,
  payment:'CODEPAY'
}).then((response) => {
  //获取后台返回的支付的数据，调用jssdk发起支付
  this.weixinPay(response);
}, (response) => {
  mui.toast('网络错误');
});

//发起支付的方法
weixinPay: function (response) {
  let that = this;

  this.$wx.config({
    debug: false, 
    appId: response['sdk_appid'],
    timestamp: response['sdk_timestamp'],
    nonceStr: response['sdk_noncestr'],
    signature: response['sign'],
    jsApiList: ['chooseWXPay']
  });

  this.$wx.ready(function(){
    that.$wx.chooseWXPay({
      timestamp: response['sdk_timestamp'],
      nonceStr: response['sdk_noncestr'],
      package: response['sdk_package'],
      signType: response['sdk_signtype'],
      paySign: response['sdk_paysign'],
      success: function(res) {
        that.$router.push({path:'/orderinfo'});
      },
      fail: function(res){
        console.log(JSON.stringify(res));
      }
    });
  });

  this.$wx.error(function(res) {
    console.log(JSON.stringify(res));
  });
}

另一种发起微信支付方式，不使用jssdk

//拿到后台返回的支付信息，调用onBridgeReady
onBridgeReady: function (response) {
  this.initWeixinReady(response);
},
initWeixinReady: function (response) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId":response['sdk_appid'],  //公众号名称，由商户传入
      "timeStamp":response['sdk_timestamp'],  //时间戳，自1970年以来的秒数
      "nonceStr":response['sdk_noncestr'],  //随机串
      "package":response['sdk_package'],
      "signType":response['sdk_signtype'],  //微信签名方式
      "paySign":response['sdk_paysign'] //微信签名
    },
    function(res) {
      if(res.err_msg == "get_brand_wcpay_request:ok" ) {
        mui.toast('支付成功');
      } else {
        mui.toast('支付失败');
      }
    });

  if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady);
      document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
    }
  }
}

附加操作

支付宝支付完成后关闭窗口：

AlipayJSBridge.call('closeWebview');

微信支付完成后关闭窗口：

that.$wx.closeWindow();