【原创】微信支付前端相关,微信商城开发

发布日期:2019-03-17

最近在开发一个微信的商城项目,给大家分享一下关于微信支付的相关的把,先说说商城开发的流程,商城不管是否用微信登录,都应该可以浏览,一直到支付之前才会调用微信登录。微信登录可以参考我之前的一片博客,里面写了纯前端的微信登录(特殊需求,正常应该走后台),

先说说完整的微信支付的流程把:

首先,应该调用后台的一个接口,达到创建订单,接口要返回订单号,订单需要支付的金额。

第二步,调用后台的接口实现微信支付,返回微信jsapi所需要的appid,timestamp,noncestrpackagesigntypepaysign

第三步调用微信jsapi唤起微信支付。回调函数来判断支付成功、失败、取消

第四步根据不同状态进行不同操作,成功前往成功页面,失败和取消调用取消订单,将支付中改为代付款

流程就是这样,当然每个项目都要根据具体情况来实现,比如我们就是通过用户的userId后台在数据库检索appid 分享一下我们的流程把

$.ajax({ type: "POST" url: "http://ip:port/order/create" crossDomain: true data: JSON.stringify({ userCode: this.userId shopCode: this.$route.query.shopId distributionType: pstype addressProvince: arr[0] addressCity: arr[1] addressBlock: arr[2] addressStreet: this.AddressObj.address contactPhone: this.AddressObj.phone contactName: this.AddressObj.name isFreightInsurance: 0 expressAmount: 0 description: this.liuyan orderCargoList: [ { cargoCode: this.$route.query.cargoId cargoCount: this.num presentPrice: 1 originalPrice: 1 cargoSpec: this.pug cargoTitle: this.goodtitle cargoPicture: this.checkimgUrl } ] }) contentType: "application/json" success: res => { let data = JSON.stringify({ userCode: this.userId orderNumber: res.data.orderNumber paymentAmount: res.data.paymentAmount paymentMode: 2 paymentSource: "JSAPI" }) $.ajax({ type: "POST" url: "http://ip:port/order/payment"

crossDomain: true data: data contentType: "application/json" success: result => { console.log(result) WeixinJSBridge.invoke( "getBrandWCPayRequest" { appId: result.data.appId timeStamp: result.data.timeStamp nonceStr: result.data.nonceStr package: result.data.package signType: result.data.signType paySign: result.data.paySign } function(wxres) { alert(wxres.err_msg) if (wxres.err_msg == "get_brand_wcpay_request:ok") { // 支付成功 } else if (wxres.err_msg == "get_brand_wcpay_request:cancel") { // 支付取消 alert(JSON.stringify(wxres)) alert("已经取消 准备发送ajax") alert(res.data.orderNumber) $.ajax({ url:"http://ip:port/order/payment/cancel" type : "post" data:JSON.stringify({ paymentMode:2 orderNumber:res.data.orderNumber message:"用户取消支付" }) contentType: "application/json" success:res=>{ alert("ajax成功") this.tipText = "支付取消" this.tip = true setTimeout(()=>{ this.tip = false }1000) } error:err=>{ alert("ajax失败") console.log(err) } }) } else { alert("失败") $.ajax({ url:"http://ip:port/order/payment/cancel"

data:JSON.stringify({ paymentMode:2 orderNumber:res.data.orderNumber message:"用户取消支付" }) type : "post" success:res=>{ this.tipText = "支付取消" this.tip = true setTimeout(()=>{ this.tip = false }1000) } error:err=>{ console.log(err) } }) } } ) } error: err => { alert("支付出现问题了") console.log(err) } dataType: "json" }) } error: err => { alert("创建订单出现问题了") console.log(err) } dataType: "json" })

这个就是微信支付的流程,每一步都需要异步去操作,当然可以把ajax封装好,直接调用即可。

ps:本文仅作为我们当前项目的需要,所传参数不一定所有都是如此调用,重点看流程。

1 0 9)