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

支付宝：

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

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'});
}
});
});
}

微信：

npm i -S weixin-js-sdk

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

}

//拿到后台返回的支付信息，调用onBridgeReady
onBridg
4000
eReady: 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();