支付寶：

引入alipay的jsapi文件：

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

點擊支付按鈕調(diào)用的后臺創(chuàng)建交易的接口，返回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('網(wǎng)絡(luò)錯誤');});//傳入tradeNOalipayPay: function (response) {this.tradePay(response);}//發(fā)起支付tradePay: function (tradeNO) {let that = this;this.alipayReady(function(){// 通過傳入交易號喚起快捷調(diào)用方式(注意tradeNO大小寫嚴(yán)格)AlipayJSBridge.call("tradePay", {tradeNO: tradeNO}, function (data) {//支付成功后data.resultCode是900if ("9000" == data.resultCode) {that.processActionLog(tradeNO);//這是我做掃碼點餐的數(shù)據(jù)回流給支付寶的代碼，沒用到可以直接去掉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;

點擊支付按鈕發(fā)起支付

this.API.toPay({//參數(shù)根據(jù)后臺需要ordersn:this.orderdetail['pos_reference'],amount:this.orderdetail['amount_total'],user_id:localStorage.user_id,payment:'CODEPAY'}).then((response) => {//獲取后臺返回的支付的數(shù)據(jù)，調(diào)用jssdk發(fā)起支付this.weixinPay(response);}, (response) => {mui.toast('網(wǎng)絡(luò)錯誤');});//發(fā)起支付的方法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));});}

另一種發(fā)起微信支付方式，不使用jssdk

//拿到后臺返回的支付信息，調(diào)用onBridgeReady onBridgeReady: function (response) {this.initWeixinReady(response);},initWeixinReady: function (response) {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":response['sdk_appid'], //公眾號名稱，由商戶傳入 "timeStamp":response['sdk_timestamp'], //時間戳，自1970年以來的秒數(shù) "nonceStr":response['sdk_noncestr'], //隨機(jī)串 "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);}}}

支付寶支付完成后關(guān)閉窗口：

AlipayJSBridge.call('closeWebview');

微信支付完成后關(guān)閉窗口：

that.$wx.closeWindow();

總結(jié)

以上是生活随笔為你收集整理的支付宝和微信的JSSDK发起支付的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。