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

编程汇总 • 2025-04-10 10:33 • 阅读 79

支付流程

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

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

前端拿到 prePay_id 调起支付

具体实现

一、前端调用登录获取code

wx.login({ 

   

    success: function(res){ 

   

        if(res.code){ 

   

            // 发起请求

            wx.request({ 

   

                url: 'http://test.com/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.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

三、前端点击去支付时

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

// 提交订单

commitOrder() { 

   

        let that = this

        if (!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.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

商户在小程序中先调用该接口（https://api.mch.weixin.qq.com/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) { 

   

        // success

        console.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回调判断支付成功
支付完不点完成不操作不进成功

文档 – 查询订单