小程序实现微信支付流程

346 阅读2分钟

image.png

微信支付的流程大致分为四步骤:

1.在小程序中获取用户的登录信息,成功后可以获取到用户的code值

2.在用户自己的服务端请求微信获取用户openid接口,成功后可以获取用户的openid值   

3.在用户自己的服务器上面请求微信的统一下单接口,下单成功后可以获取prepay_id值

微信官方api地址:点击打开链接

4.在微信小程序中支付订单,最终实现微信的支付功能

微信官方api地址:点击打开链接

申请微信支付接口权限

在使用微信支付之前,需要先在微信公众平台申请支付接口权限,并进行相应的设置和配置,包括添加支付功能的 AppID 及密钥等信息。具体的操作步骤可以参考微信公众平台的相关文档和教程。

获取openid

//app.js
App({
  onLaunch: function() {
    wx.login({
      success: function(res) {
        if (res.code) {
          // 使用你的在小程序登录得到得code发送给服务器端,服务器端通过这个code去微信得服务器去获取openId
         const data = await axios.post('https://test.com/getOpenid', { code: res.code });
         app.globalData.openid = data.openid;
        }
      }
    });
  }
})

请求支付

const app = getApp()

wx.request({
  url: 'https://test.com/pay', // 服务器会使用你的openid和你要支付的金额向微信服务器下一个支付订单,并把支付订单的信息返回给你,你用这些信息唤起你手机上的微信支付,你支付成功了,微信服务器会通知你们公司的服务器这个订单支付成功,你们的服务器人员就去设置客户购买成功。
  data: {
    openid: app.globalData.openid, // 你登录的时候服务器给你返回的openid
    total_fee: 100, // 注意这里的单位是分
  },
  success: res => {
    wx.requestPayment({ // 调用微信支付模块进行支付
      timeStamp: res.timeStamp, // 服务器返回的时间戳
      nonceStr: res.nonceStr, // 服务器返回的通知字符串
      package: res.package, // 服务器返回的包
      signType: res.signType, // 服务器返回的签名类型
      paySign: res.paySign, // 服务器返回的支付签名
      success: res => {
        console.log(res)
      },
      fail: res => {
        console.log(res)
      }
    })
  }
})