微信小程序订单支付流程(前端)-优快云博客

创建平台订单

调用后端接口创建订单，生成唯一的订单号并返回必要信息（如订单金额、商品描述等）。需确保订单数据已持久化到数据库。

interface CreateOrderParams {
  productId: string;
  quantity: number;
}

const createOrder = async (params: CreateOrderParams): Promise<{ orderId: string; totalFee: number }> => {
  const res = await wx.request({
    url: 'https://your-api.com/orders',
    method: 'POST',
    data: params
  });
  return res.data;
};

获取预付单信息

通过后端请求微信支付统一下单接口，获取支付所需的 prepay_id 和其他参数。

interface PrepayOrderParams {
  orderId: string;
}

const getPrepayInfo = async (params: PrepayOrderParams): Promise<WechatMiniprogram.RequestPaymentOption> => {
  const res = await wx.request({
    url: 'https://your-api.com/orders/prepay',
    method: 'POST',
    data: params
  });
  return res.data; // 包含 timeStamp, nonceStr, package, signType, paySign
};

发起微信支付

调用微信小程序 wx.requestPayment 接口发起支付。需处理支付成功/失败的回调。

const handlePayment = async (prepayParams: WechatMiniprogram.RequestPaymentOption) => {
  wx.requestPayment({
    ...prepayParams,
    success: (res) => {
      console.log('支付成功', res);
      checkPaymentStatus(prepayParams.orderId); // 支付状态查询
    },
    fail: (err) => {
      console.error('支付失败', err);
    }
  });
};

支付状态查询

轮询或后端通知支付结果，更新订单状态。

const checkPaymentStatus = async (orderId: string) => {
  const res = await wx.request({
    url: `https://your-api.com/orders/${orderId}/status`,
    method: 'GET'
  });
  if (res.data.status === 'paid') {
    wx.showToast({ title: '支付成功' });
  }
};

完整页面示例

以下是一个整合上述逻辑的页面代码：

Page({
  data: {
    productId: '123',
    loading: false
  },

  handlePay: async function() {
    this.setData({ loading: true });
    try {
      // 1. 创建订单
      const order = await createOrder({
        productId: this.data.productId,
        quantity: 1
      });

      // 2. 获取预付单
      const prepayParams = await getPrepayInfo({
        orderId: order.orderId
      });

      // 3. 发起支付
      await handlePayment(prepayParams);
    } catch (error) {
      wx.showToast({ title: '支付异常', icon: 'error' });
    } finally {
      this.setData({ loading: false });
    }
  }
});

<!-- WXML 页面结构 -->
<view class="container">
  <button 
    type="primary" 
    bindtap="handlePay" 
    loading="{{loading}}"
  >立即支付</button>
</view>