支付宝和微信的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('网络错误');});//传入tradeNOalipayPay: function (response) {this.tradePay(response);}//发起支付tradePay: function (tradeNO) {let that = this;this.alipayReady(function(){// 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)AlipayJSBridge.call("tradePay", {tradeNO: tradeNO}, function (data) {//支付成功后data.resultCode是900if ("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);}}}