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

支付宝：

引入alipay的jsapi文件：

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

点击支付按钮调用的后台创建交易的接口，返回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,前端只需拿到这个就可以了
                  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'});
                 }
             });
        });
    }

微信：

首先安装下jssdk

npm i -S weixin-js-sdk

main.js引入

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

点击支付按钮发起支付

            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();