博客站

在 UniApp 中，支付功能是许多应用的核心需求之一。UniApp 提供了 uni.requestPayment API 来实现支付功能，支持 微信支付、支付宝支付 和 Apple Pay 等支付方式。以下是 UniApp 处理支付功能的详细步骤：

一、微信支付

1. 开通微信支付

• 在微信公众平台或微信开放平台开通微信支付功能。
• 获取微信支付的 appid、mch_id 和 key。

2. 生成支付订单

• 在服务器端生成微信支付订单，返回支付参数。
• 示例（Node.js）：

  const wxpay = require('wechat-pay');
  const payment = wxpay.init({
    appid: '你的 AppID',
    mch_id: '你的商户号',
    partner_key: '你的商户密钥'
  });
  
  app.post('/createOrder', (req, res) => {
    const order = {
      body: '商品描述',
      out_trade_no: '订单号',
      total_fee: 100, // 金额（单位：分）
      spbill_create_ip: '用户 IP',
      notify_url: '支付回调地址',
      trade_type: 'JSAPI',
      openid: '用户 OpenID'
    };
  
    payment.getBrandWCPayRequestParams(order, (err, result) => {
      if (err) {
        res.status(500).send(err);
      } else {
        res.send(result);
      }
    });
  });
  

3. 发起支付

• 在 UniApp 中使用 uni.requestPayment 发起支付。
• 示例：

  uni.requestPayment({
    provider: 'wxpay',
    orderInfo: {
      timeStamp: '时间戳',
      nonceStr: '随机字符串',
      package: '预支付订单',
      signType: 'MD5',
      paySign: '签名'
    },
    success: (res) => {
      console.log('支付成功：', res);
    },
    fail: (err) => {
      console.log('支付失败：', err);
    }
  });
  

二、支付宝支付

1. 开通支付宝支付

• 在支付宝开放平台开通支付宝支付功能。
• 获取支付宝的 app_id 和 private_key。

2. 生成支付订单

• 在服务器端生成支付宝支付订单，返回支付参数。
• 示例（Node.js）：

  const Alipay = require('alipay-sdk').default;
  const alipay = new Alipay({
    appId: '你的 AppID',
    privateKey: '你的私钥',
    signType: 'RSA2'
  });
  
  app.post('/createOrder', (req, res) => {
    const order = {
      subject: '商品描述',
      out_trade_no: '订单号',
      total_amount: 1.00, // 金额（单位：元）
      product_code: 'QUICK_MSECURITY_PAY'
    };
  
    const result = alipay.pageExec('alipay.trade.page.pay', {
      method: 'GET',
      bizContent: order
    });
  
    res.send(result);
  });
  

3. 发起支付

• 在 UniApp 中使用 uni.requestPayment 发起支付。
• 示例：

  uni.requestPayment({
    provider: 'alipay',
    orderInfo: '支付参数',
    success: (res) => {
      console.log('支付成功：', res);
    },
    fail: (err) => {
      console.log('支付失败：', err);
    }
  });
  

三、Apple Pay

1. 开通 Apple Pay

• 在 Apple Developer 开通 Apple Pay 功能。
• 配置 Merchant ID 和 Payment Processing Certificate。

2. 生成支付订单

• 在服务器端生成 Apple Pay 支付订单，返回支付参数。
• 示例（Node.js）：

  app.post('/createOrder', (req, res) => {
    const order = {
      merchantIdentifier: '你的 Merchant ID',
      paymentToken: '支付 Token',
      amount: 1.00 // 金额（单位：元）
    };
  
    res.send(order);
  });
  

3. 发起支付

• 在 UniApp 中使用 uni.requestPayment 发起支付。
• 示例：

  uni.requestPayment({
    provider: 'applepay',
    orderInfo: '支付参数',
    success: (res) => {
      console.log('支付成功：', res);
    },
    fail: (err) => {
      console.log('支付失败：', err);
    }
  });
  

四、总结

UniApp 处理支付功能的步骤如下：

1. 开通支付功能：在微信、支付宝或 Apple 平台开通支付功能。
2. 生成支付订单：在服务器端生成支付订单，返回支付参数。
3. 发起支付：在 UniApp 中使用 uni.requestPayment 发起支付。

以下是一个完整的微信支付示例：

1. 服务器端生成订单

const wxpay = require('wechat-pay');
const payment = wxpay.init({
  appid: '你的 AppID',
  mch_id: '你的商户号',
  partner_key: '你的商户密钥'
});

app.post('/createOrder', (req, res) => {
  const order = {
    body: '商品描述',
    out_trade_no: '订单号',
    total_fee: 100, // 金额（单位：分）
    spbill_create_ip: '用户 IP',
    notify_url: '支付回调地址',
    trade_type: 'JSAPI',
    openid: '用户 OpenID'
  };

  payment.getBrandWCPayRequestParams(order, (err, result) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.send(result);
    }
  });
});

2. UniApp 发起支付

uni.requestPayment({
  provider: 'wxpay',
  orderInfo: {
    timeStamp: '时间戳',
    nonceStr: '随机字符串',
    package: '预支付订单',
    signType: 'MD5',
    paySign: '签名'
  },
  success: (res) => {
    console.log('支付成功：', res);
  },
  fail: (err) => {
    console.log('支付失败：', err);
  }
});

通过合理使用这些方法，可以轻松实现 UniApp 中的支付功能，满足应用的需求。