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

支付宝

(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) => {
//该接口主要是为了拿到tradeNO,前端只需拿到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'});
}
});
});
}

微信

(1)首先安装下jssdk

1
npm i -S weixin-js-sdk

(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) => {
//获取后台返回的支付的数据,调用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

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

附加操作

支付宝支付完成后关闭窗口:

1
AlipayJSBridge.call('closeWebview');

微信支付完成后关闭窗口:

1
that.$wx.closeWindow();

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :