前言
微信支付比支付宝或者其它方式要来的更复杂一些,但在我这个项目中,大部分的工作量后台都帮我处理好了,实际上只需要调用两个接口,weChatPaymentFirst
和WeChatPaymentSecond(这是后台封装好的接口)
微信支付步骤介绍
微信支付分为三步:
- 根据用户信息调weChatPaymentFirst接口,返回url(中间页面),根据url跳转去中间页面。这个url中有一部分信息是rediect_url,这个url是通过微信内部认证过的域名(这里要引入一个重定向的概念,最终目的我们要跳转去中间页面,但实际上我们要从微信内部转一圈再去中间页面),后面还会返回两个重要的参数code和state
- 根据上一步返回数据中的url,直接跳转至中间页面,在这个页面上将code和state获取下来(正则),然后用这个两个参数调第二个接口WeChatPaymentSecond,该接口的返回值是微信支付的六大参数
- 根据这六大参数,取调用微信的API实现支付
ps:后台帮我做的事情:
a. 获取跳转中间页面的url
b. 获取微信支付六大参数
具体代码
点击确认支付按钮,执行toPay()完成支付第一步
toPay() {
//跳转到微信支付
//window.location.href = 'weixin://';
this.freight = this.$route.query.freight
//TODO:获取真实数据
let data = {
"customerId": this.customerId,
"freight": 0,
"orderActivityDetailVMList": [],
"orderId": 290,
"orderNumber": "",
"partnerId": 201,
"supplierId": 8,
"tradeMoney": 0.3
}
let token = JSON.parse(localStorage.getItem("cat"));
WeChatPaymentFirst(data,token).then(res=>{
if(res.code == CODE_SUCCESS){
this.url = res.data
//alert(this.url)
window.location.href = this.url//跳转至中间页面
}
})
}
中间页面,完成支付后两步
methods:{
WeChatPaymentSecondCall(verifyParams){
return ajax('pay/weChatPaymentSecond', 'post',{params:verifyParams})
},
getParams(){
var reg1 = new RegExp("(\\?|&)code([^&]*)(?=(&|$))");
var reg2 = new RegExp("(\\?|&)state([^&]*)(?=(#|&))");
this.url = window.location.toString()
alert(this.url)
this.code = this.url.match(reg1)[0].split("=")[1]
this.state = this.url.match(reg2)[0].split("=")[1]
alert(this.code)
let verifyParams = {
"code" :this.code,
"state" :this.state
}
this.WeChatPaymentSecondCall(verifyParams).then(res => {
if(res.code ==CODE_SUCCESS){
let appId = res.data.appId
let timeStamp = res.data.timeStamp
let nonceStr = res.data.nonceStr
let packages = res.data.packages
let signType = res.data.signType
let paySign = res.data.paySign
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest',{
"appId": appId, //公众号名称,由商户传入
"timeStamp": timeStamp, //时间戳,自1970年以来的秒数
"nonceStr": nonceStr, //随机串
"package": packages,
"signType": signType, //微信签名方式:
"paySign": paySign //微信签名
},
function (res) {
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
// TODO: 支付订单
if (!this.finished) {
this.$router.replace('status')
}
}
}
);
}
if(typeof WeixinJSBridge == "undefined"){
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
}else {
onBridgeReady();
}
}
})
}
}