UniApp 小程序支付功能全解析：从原理到实战

// 微信支付参数示例（需签名）
const payParams = {
  appId: 'wx1234567890abcdef', // 小程序 AppID
  timeStamp: Math.floor(Date.now() / 1000).toString(), // 时间戳（秒级，字符串）
  nonceStr: 'Wm3WZYTPz0wzccnW', // 随机字符串
  package: 'prepay_id=wx201410272009395522657a690389285100', // 格式固定为 prepay_id=xxx
  signType: 'HMAC-SHA256', // 签名类型（推荐 HMAC-SHA256）
  paySign: '' // 待生成的签名
};

{
  "out_trade_no": "20231001001", // 商户订单号
  "total_amount": "1.00", // 订单金额（单位：元）
  "subject": "测试商品", // 商品标题
  "product_code": "FAST_INSTANT_TRADE_PAY", // 固定值
  "notify_url": "https://api.example.com/notify" // 异步通知地址
}

// 支付宝支付参数示例（需签名）
const payParams = {
  appId: '2021000000000000', // 支付宝 AppID
  bizContent: JSON.stringify({
    outTradeNo: '20231001001',
    totalAmount: '1.00',
    subject: '测试商品',
    tradeNo: '2023100122001404150580001234' // 支付宝交易号
  }),
  charset: 'utf-8',
  signType: 'RSA2',
  sign: '' // 待生成的签名
};

// 前端支付按钮点击事件
async handlePay() {
  try {
    // 1. 向后端请求支付参数
    const { data } = await uni.request({
      url: 'https://api.example.com/getPayParams', // 后端接口
      method: 'POST',
      data: { orderId: '20231001001' } // 订单 ID
    });
 
    // 2. 调用支付接口
    const res = await uni.requestPayment({
      provider: 'wxpay', // 支付平台（wxpay/alipay/baidu/ttpay 等）
      ...data.payParams // 后端返回的支付参数
    });
 
    // 3. 同步通知：支付成功（仅作参考，需以后端异步通知为准）
    if (res.errMsg === 'requestPayment:ok') {
      uni.showToast({ title: '支付成功', icon: 'success' });
      // 跳转至订单详情页
      uni.navigateTo({ url: '/pages/order/detail?id=20231001001' });
    }
  } catch (err) {
    // 支付失败（如用户取消、网络错误等）
    uni.showToast({ title: '支付失败：' + err.errMsg, icon: 'none' });
  }
}

const xml2js = require('xml2js');
const parser = new xml2js.Parser({ explicitArray: false });
 
// 微信支付异步通知接口
app.post('/notify', (req, res) => {
  let xml = '';
  req.on('data', (chunk) => (xml += chunk));
  req.on('end', async () => {
    try {
      // 解析 XML 为 JSON
      const result = await parser.parseStringPromise(xml);
      const notifyData = result.xml;
 
      // 1. 验证签名（省略签名验证逻辑，需严格按微信文档实现）
      const isSignValid = verifyWechatSign(notifyData);
      if (!isSignValid) {
        return res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[签名失败]]></return_msg></xml>');
      }
 
      // 2. 校验订单状态
      if (notifyData.result_code === 'SUCCESS') {
        const orderId = notifyData.out_trade_no;
        const order = await OrderModel.findById(orderId);
        if (order && order.amount * 100 === Number(notifyData.total_fee)) { // 金额校验（单位：分）
          order.status = 'paid'; // 更新订单状态为“已支付”
          await order.save();
          return res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>');
        }
      }
 
      // 验证失败
      res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[订单验证失败]]></return_msg></xml>');
    } catch (err) {
      res.send('<xml><return_code><![CDATA[FAIL]]></return_code><return_msg><![CDATA[服务器错误]]></return_msg></xml>');
    }
  });
});

const express = require('express');
const crypto = require('crypto');
const xml2js = require('xml2js');
const request = require('request-promise');
 
const app = express();
app.use(express.raw({ type: 'application/xml' })); // 解析 XML 格式请求
 
// 配置
const config = {
  appid: 'wx1234567890abcdef', // 小程序 AppID
  mch_id: '1234567890', // 商户号
  apiKey: 'your_api_key', // 微信支付 API 密钥
  notifyUrl: 'https://api.example.com/notify' // 异步通知地址
};
 
// 生成随机字符串
function generateNonceStr() {
  return Math.random().toString(36).substr(2, 15);
}
 
// 生成签名
function generateSign(params) {
  const keys = Object.keys(params).sort();
  const str = keys.map(key => `${key}=${params[key]}`).join('&') + `&key=${config.apiKey}`;
  return crypto.createHash('md5').update(str).digest('hex').toUpperCase();
}
 
// 1. 获取支付参数接口
app.post('/getPayParams', async (req, res) => {
  const { orderId, openid } = req.body; // 前端传递订单 ID 和用户 openid
 
  // 调用微信统一下单接口
  const nonceStr = generateNonceStr();
  const params = {
    appid: config.appid,
    mch_id: config.mch_id,
    nonce_str: nonceStr,
    body: '测试商品',
    out_trade_no: orderId,
    total_fee: 100, // 1 元（单位：分）
    spbill_create_ip: req.ip.replace('::ffff:', ''),
    notify_url: config.notifyUrl,
    trade_type: 'JSAPI',
    openid: openid
  };
  params.sign = generateSign(params);
 
  // 转为 XML 格式
  const builder = new xml2js.Builder();
  const xmlParams = builder.buildObject({ xml: params });
 
  try {
    const xmlRes = await request({
      url: 'https://api.mch.weixin.qq.com/pay/unifiedorder',
      method: 'POST',
      body: xmlParams
    });
 
    // 解析 XML 响应
    const result = await xml2js.parseStringPromise(xmlRes, { explicitArray: false });
    const prepayId = result.xml.prepay_id;
 
    // 生成前端支付参数
    const payParams = {
      appId: config.appid,
      timeStamp: Math.floor(Date.now() / 1000).toString(),
      nonceStr: nonceStr,
      package: `prepay_id=${prepayId}`,
      signType: 'MD5'
    };
    payParams.paySign = generateSign(payParams);
 
    res.json({ code: 0, payParams });
  } catch (err) {
    res.json({ code: -1, msg: '生成支付参数失败' });
  }
});
 
// 2. 支付结果异步通知接口
app.post('/notify', (req, res) => {
  // 省略签名验证和订单更新逻辑（见 3.3.1 节）
  res.send('<xml><return_code><![CDATA[SUCCESS]]></return_code></xml>');
});
 
app.listen(3000, () => console.log('Server running on port 3000'));

<template>
  <view class="pay-container">
    <button @click="handlePay">立即支付</button>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      orderId: '20231001001' // 订单 ID（实际项目中从页面参数获取）
    };
  },
  methods: {
    async handlePay() {
      uni.showLoading({ title: '发起支付中...' });
 
      try {
        // 1. 获取用户 openid（需提前通过 wx.login 获取 code，再调用后端接口换 openid）
        const { code } = await uni.login();
        const { data: openidRes } = await uni.request({
          url: 'https://api.example.com/getOpenid',
          method: 'POST',
          data: { code }
        });
        const openid = openidRes.openid;
 
        // 2. 获取支付参数
        const { data: payRes } = await uni.request({
          url: 'https://api.example.com/getPayParams',
          method: 'POST',
          data: { orderId: this.orderId, openid }
        });
 
        if (payRes.code !== 0) {
          throw new Error(payRes.msg);
        }
 
        // 3. 调用支付接口
        const payResult = await uni.requestPayment({
          provider: 'wxpay',
          ...payRes.payParams
        });
 
        if (payResult.errMsg === 'requestPayment:ok') {
          uni.showToast({ title: '支付成功', icon: 'success' });
          // 轮询后端确认订单状态
          this.checkOrderStatus();
        }
      } catch (err) {
        uni.showToast({ title: '支付失败：' + (err.errMsg || err.message), icon: 'none' });
      } finally {
        uni.hideLoading();
      }
    },
    // 轮询确认订单状态
    checkOrderStatus() {
      const timer = setInterval(async () => {
        const { data } = await uni.request({
          url: `https://api.example.com/checkOrderStatus?orderId=${this.orderId}`
        });
        if (data.status === 'paid') {
          clearInterval(timer);
          uni.navigateTo({ url: `/pages/order/detail?id=${this.orderId}` });
        }
      }, 2000);
    }
  }
};
</script>