uniapp 小程序支付如何实现

在uniapp中实现小程序支付的具体步骤是什么？需要调用哪些API？有没有完整的代码示例可以参考？支付过程中常见的问题有哪些，比如签名错误或支付失败该怎么解决？此外，uniapp的支付功能是否支持所有小程序平台，比如微信、支付宝等？

2 回复

uniapp小程序支付需调用uni.requestPayment API。需先获取订单信息，包括appId、timeStamp、nonceStr、package、signType、paySign等参数。这些参数由后端生成并返回前端。前端调用支付接口，用户确认支付后返回结果。注意参数格式和签名验证。


在 UniApp 中实现小程序支付（如微信小程序、支付宝小程序），主要分为以下步骤。以微信小程序为例：

1. 准备工作

  • 注册微信小程序，开通支付功能，获取 appid、mch_id（商户号）、API 密钥等。
  • 在 UniApp 项目中配置小程序 AppID（manifest.json 中设置）。

2. 支付流程

  • 前端发起请求：用户点击支付，前端向你的服务器发送支付请求（包括商品信息、金额等）。
  • 服务器生成支付参数：服务器调用微信支付统一下单 API，生成支付所需参数（如 timeStamp、nonceStr、package、signType、paySign）。
  • 前端调起支付：服务器返回参数后，前端调用 uni.requestPayment() 调起支付界面。

3. 代码示例

前端代码（UniApp）：

// 用户点击支付按钮
async function handlePayment() {
  try {
    // 1. 请求服务器生成支付参数（替换为你的接口）
    const res = await uni.request({
      url: 'https://your-server.com/create-order',
      method: 'POST',
      data: {
        amount: 100, // 金额（单位：分）
        product: '测试商品'
      }
    });

    // 2. 调起支付
    const paymentResult = await uni.requestPayment({
      provider: 'wxpay', // 支付提供商
      timeStamp: res.data.timeStamp, // 服务器返回的参数
      nonceStr: res.data.nonceStr,
      package: res.data.package,
      signType: res.data.signType,
      paySign: res.data.paySign
    });

    // 3. 支付成功处理
    console.log('支付成功', paymentResult);
    uni.showToast({ title: '支付成功' });
  } catch (err) {
    // 支付失败或用户取消
    console.error('支付失败', err);
    uni.showToast({ title: '支付取消或失败', icon: 'none' });
  }
}

服务器端示例（Node.js）：

const axios = require('axios');
const crypto = require('crypto');

// 统一下单 API
async function createOrder(amount, product) {
  const params = {
    appid: '你的小程序appid',
    mch_id: '你的商户号',
    nonce_str: Math.random().toString(36).substr(2),
    body: product,
    out_trade_no: '订单号' + Date.now(),
    total_fee: amount, // 单位：分
    spbill_create_ip: '服务器IP',
    notify_url: 'https://your-server.com/notify', // 支付结果回调地址
    trade_type: 'JSAPI',
    openid: '用户openid' // 从小程序登录获取
  };

  // 生成签名（需按微信规则排序并拼接密钥）
  params.sign = generateSignature(params, '你的API密钥');

  // 调用微信支付接口
  const result = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', 
    `<xml>${Object.keys(params).map(key => `<${key}>${params[key]}</${key}>`).join('')}</xml>`
  );

  // 解析返回数据，生成前端支付参数
  return generatePaymentParams(result.data);
}

// 生成前端支付参数（简化示例）
function generatePaymentParams(xmlResult) {
  // 解析 XML 获取 prepay_id
  const prepay_id = '解析到的prepay_id';
  const timeStamp = String(Math.floor(Date.now() / 1000));
  const nonceStr = Math.random().toString(36).substr(2);
  const package = `prepay_id=${prepay_id}`;
  const signType = 'MD5';

  // 计算 paySign
  const paySign = crypto.createHash('md5').update(
    `appId=你的appid&nonceStr=${nonceStr}&package=${package}&signType=${signType}&timeStamp=${timeStamp}&key=你的API密钥`
  ).digest('hex');

  return { timeStamp, nonceStr, package, signType, paySign };
}

4. 注意事项

  • 安全：签名和敏感操作必须在服务器完成，避免泄露 API 密钥。
  • 异步通知：支付结果以微信服务器异步通知（notify_url）为准，需处理重复通知和验签。
  • 金额单位：微信支付金额单位为分，需确保前后端一致。
  • 测试：使用微信开发者工具和沙箱环境测试支付流程。

对于支付宝小程序，流程类似，但需使用支付宝的 SDK 和参数（如 provider: 'alipay'）。具体参考官方文档调整参数和接口。

回到顶部