今天做微信支付,记录一下
微信支付,对于我们前端来说还是比较简单的,知道大致流程之后,调用api,进行相应提示即可
使用微信支付,首先得是企业级用户,也就是有营业执照的,有两种注册方式:
①公众号注册(每年认证一次,300元/年) 可扩展10个微信小程序,与公众号是同一个主体,同一个营业执照 ,一般选用这种方式,比较划算
②直接注册成小程序,也是300元/年详情请看官方介绍 微信支付官方
下面介绍下前端流程的大致步骤:
用户点击下单,将订单信息传给后台,由后台调用微信立即下单接口,生成预支付订单,并将参数返回给客户端,客户端使用request.payment 吊起微信支付,用户输入密码支付,支付成功客户端收到通知,提示用户支付成功并跳转到指定页面
当然,我们不能过度依赖接口返回的,如果想要更安全的情况下,可以再次向后台发送请求是否成功,更严谨一点
api相关用法请看官方链接小程序官方api文档
//创建订单
var that = this;
wx.request({
url: app.d.ceshiUrl + '/Api/Payment/payment',
method:'post',
data: {
uid: that.data.userId,
cart_id: that.data.cartId,
type:that.data.paytype,
aid: that.data.addrId,//地址的id
remark: that.data.remark,//用户备注
price: that.data.total,//总价
vid: that.data.vid,//优惠券ID
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function (res) {
//--init data
var data = res.data;
if(data.status == 1){
//创建订单成功
if(data.arr.pay_type == 'cash'){//支付类型
wx.showToast({
title:"请自行联系商家进行发货!",
duration:3000
});
return false;
}
if(data.arr.pay_type == 'weixin'){
//调用微信支付
that.wxpay(data.arr);
}
}else{
wx.showToast({
title:"下单失败!",
duration:2500
});
}
},
fail: function (e) {
wx.showToast({
title: '网络异常!err:createProductOrder',
duration: 2000
});
}
});
},
这里,微信支付我封装成了一个函数
//调起微信支付
wxpay: function(order){
wx.request({
url: app.d.ceshiUrl + '/Api/Wxpay/wxpay',//后台url 后端去调用立即下单接口
data: {
order_id:order.order_id,//订单id
order_sn:order.order_sn,//订单号
uid:this.data.userId,
},
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}, // 设置请求的 header
success: function(res){
if(res.data.status==1){
var order=res.data.arr;
wx.requestPayment({
timeStamp: order.timeStamp,//时间戳
nonceStr: order.nonceStr,//随机字符串
package: order.package,//统一下单接口返回的 prepay_id 参数值
signType: 'MD5',//签名算法
paySign: order.paySign,//签名
success: function(res){
wx.showToast({
title:"支付成功!",
duration:2000,
});
setTimeout(function(){
wx.navigateTo({
url: '../user/dingdan?currentTab=1&otype=deliver',
});
},2500);
},
fail: function(res) {
wx.showToast({
title:res,
duration:3000
})
}
})
}else{
wx.showToast({
title: res.data.err,
duration: 2000
});
}
},
fail: function() {
// fail
wx.showToast({
title: '网络异常!err:wxpay',
duration: 2000
});
}
})
},
以上方法仅供参考,大家可以根据的自己的需求进行相应的调整