支付宝
(1)引入alipay的jsapi文件
1
| <script src="https://a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.min.js"></script>
|
(2)点击支付按钮调用的后台创建交易的接口,返回tradeNO
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| 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) => { this.alipayPay(response); }, (response) => { mui.toast('网络错误'); });
alipayPay: function (response) { this.tradePay(response); }
tradePay: function (tradeNO) { let that = this; this.alipayReady(function() { AlipayJSBridge.call("tradePay", { tradeNO: tradeNO }, function (data) { 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
(2)main.js引入
1 2
| import wx from 'weixin-js-sdk' Vue.prototype.$wx = wx;
|
(3)点击支付按钮发起支付
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
| this.API.toPay({ ordersn:this.orderdetail['pos_reference'], amount:this.orderdetail['amount_total'], user_id:localStorage.user_id, payment:'CODEPAY' }).then((response) => { 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| onBridgeReady: function (response) { this.initWeixinReady(response); }, initWeixinReady: function (response) { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":response['sdk_appid'], "timeStamp":response['sdk_timestamp'], "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); } } }
|
附加操作
支付宝支付完成后关闭窗口:
1
| AlipayJSBridge.call('closeWebview');
|
微信支付完成后关闭窗口: