2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 微信小程序下订单支付代码实现

微信小程序下订单支付代码实现

时间:2023-03-21 06:36:52

相关推荐

微信小程序下订单支付代码实现

目录

支付流程具体实现一、前端调用登录获取code二、服务端接收code,服务端调用微信api获取openId三、前端点击去支付时四、服务端请求微信统一下单接口五、前端获取到prePay_id 调起支付六、注意

支付流程

点击去结算时,,前端判断是否登录【未登录跳转到登录页】,登录发送code到服务端,服务端使用code发送请求去获取openId;并返回userId/openId存储在storage;

点击去支付时,前端发送请求【订单详细,openId】,服务器用openId去统一下单,下单成功后,获取prePay_id,返回前端

前端拿到 prePay_id 调起支付

具体实现

一、前端调用登录获取code

wx.login({success: function(res){if(res.code){// 发起请求wx.request({url: '/login',data: {code: res.code},success(result) {console.log(result.openId)wx.setStorage('openId', result.openId)}})} else {// 登录失败}}})

二、服务端接收code,服务端调用微信api获取openId

文档 - auth.code2Session

GET https://api./sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

三、前端点击去支付时

前端点击去支付时,提交【openId,订单明细】到服务端进行下单

// 提交订单commitOrder() {let that = thisif (!this.isLogin) {this.toLogin()} else if (!this.currentAddress.addressId) {wx.showToast({title: '请先选择地址',icon: 'none',duration: 1500,success() {// 选择地址}})} else if(this.isLogin && this.currentAddress.addressId) let details = [];(this.shopCartList).map(g => {details.push({goodsId: g.goodsId,goodsNum: g.cartGoodNum,goodsPrice: g.goodsPrice})})let openId = wx.getStorageSync('openId')Api.creatOrder({query: {addressId: this.currentAddress.addressId,openId: openId,appId: '',details: details,goodsMoney: this.totalMoney,orderNote: this.orderNote}}).then(res => {if (res.data.code == '0') {this.toPay({timeStamp: res.data.data.timeStamp.toString(),nonceStr: res.data.data.nonceStr,package: res.data.data.package,signType: res.data.data.signType,paySign: res.data.data.sign,orderId: res.data.data.orderId,})}})} else {}},

四、服务端请求微信统一下单接口

服务端请求微信统一下单接口,下单成功获取到prePay_id值,返回前端

文档-https://pay./wiki/doc/api/wxa/wxa_api.php?chapter=9_1

商户在小程序中先调用该接口(https://api.mch./pay/unifiedorder)在微信支付服务后台生成预支付交易单,返回正确的预支付交易后,前端调起支付。

五、前端获取到prePay_id 调起支付

pay: function (param) {wx.requestPayment({timeStamp: param.timeStamp,nonceStr: param.nonceStr,package: param.package,signType: param.signType,paySign: param.paySign,success: function (res) {// successconsole.log(res)wx.navigateBack({delta: 1, // 回退前 delta(默认为1) 页面success: function (res) {console.log(res)},fail: function () {// fail},complete: function () {// complete// 不论成功失败都跳转到订单页面,后台去查询支付结果wx.switchTab({url: 'order',success: function (res) {}})}})}})}

六、注意

不能通过 wx.requestPayment 的success回调判断支付成功

支付完不点完成不操作不进成功

文档 - 查询订单

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。