支付宝和微信的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();