微信支付流程

  1. 创建订单
  • 请求创建订单的 API 接口:把 订单金额、收货地址、订单中包含的商品信息 发送到服务器
  • 服务器响应的结果:订单编号

2.订单预支付

  • 请求订单预支付的 API 接口:把步骤1得到的 订单编号 发送到服务器
  • 服务器响应的结果:订单预支付的参数对象,里面包含了订单支付相关的必要参数

3.发起微信支付

  • 调用 wx.requestPayment() 这个 API,发起微信支付;把步骤2得到的 订单预支付对象 作为参数传递给 wx.requestPayment() 方法
  • 监听 wx.requestPayment() 这个API 的 success,fail,complete 回调函数

示例代码如下(注意:以下代码仅作为示例,实际使用时需要根据业务需求进行调整):

javascript 复制代码
// 1. 用户触发支付
async function onOrderClick() {
  const orderInfo = {
    // 这里填入你的订单信息
  };

  // 2. 调用后端提供的创建订单的 API 向服务端发起请求,将订单信息参数 orderInfo 传给服务端,服务端创建订单,并将订单编号返回给前端
  const orderNumber = await getOrderNumber(orderInfo)

  // 3.调用后端提供的预支付订单的 API 向服务端发起请求,将拿到的订单编号传给服务端,来获取订单预支付参数
  const prepayData= await getOrderPrepayData({orderNumber})

  // 订单预支付参数具体如下:
  prepayData={
    "timeStamp": "xxx", // 时间戳,精确到毫秒级
    "nonceStr": "xxxx", // 随机字符串,长度为32位字符
    "package": "prepay_id=xxxx", // 微信生成的预支付交易会话标识
    "signType": "RSA", // 签名方式,默认为RSA
    "paySign": "xxxx", // 签名值,用于验证签名的正确性
  }

  // 4. 调用支付API
  wx.requestPayment({
    ...prepayData, 
    success: function (res) { // 支付成功后的回调函数
      // 更新订单状态和页面提示信息
      updateOrderStatus(orderInfo);
      showToast({title:'支付成功'});
    },
    fail: function (res) { // 支付失败后的回调函数
      // 显示错误信息或重试逻辑
      wx.showToast({title:'支付失败,请重试'});
    }
  });
}
相关推荐
换日线°1 天前
NFC标签打开微信小程序
前端·微信小程序
菜鸟una1 天前
【微信小程序+Taro 3+NutUI 3】input (nut-input) 、 textarea (nut-texteare)类型使用避坑
前端·vue.js·微信小程序·小程序·taro
计算机毕设指导61 天前
基于微信小程序的校园二手交易系统【源码文末联系】
java·spring boot·spring·微信小程序·小程序·tomcat·maven
Java.慈祥2 天前
速通-微信小程序 2Day
微信小程序·小程序·前端框架
2501_933907212 天前
宁波小程序公司是什么?主要提供宁波微信小程序制作与服务吗?
科技·微信小程序·小程序
码云数智-大飞2 天前
微信商城小程序怎么弄?2026年主流小程序商城平台对比
微信小程序
计算机毕设指导62 天前
基于微信小程序的非物质文化遗产推广管理系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·maven
软件聚导航3 天前
马年、我用AI写了个“打工了马” 小程序
人工智能·ui·微信小程序
大黄说说3 天前
微信商城小程序怎么弄?微信购物小程序怎么开通
微信小程序
你的眼睛會笑3 天前
微信小程序 SpeechSynthesizer 实战指南
微信小程序·小程序·notepad++