微信开发小程序支付流程全解析

曼文 . 发布于 2025-06-04 16:48:10 91 浏览

在当今数字化时代，小程序凭借其便捷性和高效性，成为了众多企业和开发者拓展业务的重要渠道，而支付功能作为小程序实现商业价值的关键一环，微信支付以其庞大的用户基础和安全稳定的支付体系，成为了开发者的首选，本文将详细介绍微信开发小程序支付的流程,帮助开发者顺利实现小程序支付功能。

准备工作

（一）注册小程序并获取相关账号信息

开发者需要在微信公众平台注册小程序账号，注册成功后，获取小程序的 AppID 等重要信息,这些信息将在后续的支付流程中发挥关键作用。

（二）开通微信支付商户号

登录微信支付商户平台（pay.weixin.qq.com），点击“注册”按钮，按照提示填写相关信息，包括企业信息、联系人信息、经营类目等。
提交注册信息后，等待微信支付审核，审核通过后,即可获得微信支付商户号。

（三）配置小程序支付相关参数

在小程序管理后台，进入“开发 - 开发设置”，填写 AppID 等信息。
登录微信支付商户平台，在“产品中心 - 开发配置”中，填写小程序的 AppID,并设置支付相关的回调地址等参数。

小程序端实现

（一）引入微信支付 SDK

在小程序的项目目录中，找到 app.json 文件，在其中的 "usingComponents" 字段下引入微信支付组件：

{
  "usingComponents": {
    "wx-pay": "wx://component-pay"
  }
}

（二）发起支付请求

在需要调用支付功能的页面的 js 文件中，构建支付参数。

Page({
data: {
 orderId: '123456', // 订单号
 totalPrice: 100, // 支付金额，单位为分
 productName: '商品名称'
},
pay: function() {
 const that = this;
 wx.request({
   url: 'https://your-server.com/api/getPayInfo', // 获取支付信息的接口地址
   data: {
     orderId: that.data.orderId
   },
   success: function(res) {
     const payInfo = res.data;
     wx.requestPayment({
       timeStamp: payInfo.timeStamp,
       nonceStr: payInfo.nonceStr,
       package: payInfo.package,
       signType: payInfo.signType,
       paySign: payInfo.paySign,
       success: function(res) {
         console.log('支付成功', res);
         // 处理支付成功后的逻辑，如跳转到支付成功页面等
       },
       fail: function(res) {
         console.log('支付失败', res);
         // 处理支付失败后的逻辑，如提示用户重新支付等
       }
     });
   }
 });
}
});

上述代码中，通过 wx.request 获取服务器返回的支付信息，然后调用 wx.requestPayment 发起支付请求，timeStamp、nonceStr、package、signType、paySign 等参数均由服务器端根据微信支付的规则生成并返回。

服务器端实现

（一）生成支付签名

服务器端需要根据微信支付的要求,将支付相关参数按照一定的规则进行排序和拼接。
使用商户平台设置的 API 密钥，对拼接后的字符串进行签名计算，在 Node.js 中可以使用 crypto 模块进行签名：
```
const crypto = require('crypto');
```


### （二）调用微信支付统一下单接口
1. 服务器端组装统一下单所需的参数，包括小程序的 AppID、商户号、订单号、金额、支付回调地址等。
2. 使用商户平台提供的 API 密钥，对参数进行签名。
3. 将组装好的参数发送到微信支付统一下单接口（https://api.mch.weixin.qq.com/pay/unifiedorder）。

```javascript
const https = require('https');
const querystring = require('querystring');
function unifiedOrder(params, key) {
  const options = {
    hostname: 'api.mch.weixin.qq.com',
    port: 443,
    path: '/pay/unifiedorder',
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  };
  const req = https.request(options, res => {
    let data = '';
    res.on('data', chunk => {
      data += chunk;
    });
    res.on('end', () => {
      console.log('统一下单响应', data);
      // 解析统一下单响应结果，提取支付所需参数返回给小程序端
    });
  });
  req.write(querystring.stringify(params));
  req.end();
}

（三）处理支付回调

微信支付在支付成功或失败后,会向服务器端设置的回调地址发送通知。
服务器端需要在回调地址对应的接口中，验证签名的正确性,以确保回调的真实性。

根据回调通知中的信息，更新订单状态等业务逻辑。

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/pay/callback', (req, res) => { const xmlData = req.body; // 验证签名 const sign = xmlData.sign; delete xmlData.sign; const stringA = Object.keys(xmlData) .sort() .map(key => ${key}=${xmlData[key]}) .join('&'); const stringSignTemp = ${stringA}&key=${yourKey}; const localSign = crypto.createHash('md5').update(stringSignTemp).digest('hex').toUpperCase(); if (sign === localSign) { const returnCode = xmlData.return_code; const resultCode = xmlData.result_code; if (returnCode === 'SUCCESS' && resultCode === 'SUCCESS') { const outTradeNo = xmlData.out_trade_no; // 更新订单状态 console.log('支付成功，订单号:', outTradeNo); res.send('<![CDATA[SUCCESS]]><![CDATA[OK]]>'); } else { console.log('支付回调失败', xmlData); res.send('<![CDATA[FAIL]]><![CDATA[支付回调失败]]>'); } } else { console.log('签名验证失败', xmlData); res.send('<![CDATA[FAIL]]><![CDATA[签名验证失败]]>'); } });

const port = 3000; app.listen(port, () => { console.log(Server running on port ${port}); });


## 五、注意事项
### （一）支付参数安全
支付相关的参数，如 API 密钥、订单号、金额等，必须严格保密，防止泄露导致支付风险。
### （二）回调地址设置
确保支付回调地址的正确性和稳定性，避免因回调失败导致支付状态无法及时更新。
### （三）测试环境与生产环境
在开发和测试过程中，要注意区分测试环境和生产环境，避免在测试环境中使用生产环境的真实支付信息。
## 六、
微信开发小程序支付流程涉及小程序端、服务器端等多个环节，需要开发者仔细配置和实现，通过本文的介绍，希望开发者能够顺利完成小程序支付功能的开发，为用户提供便捷、安全的支付体验，推动小程序业务的蓬勃发展💪，在实际开发过程中，还需要不断测试和优化，确保支付流程的稳定性和可靠性，密切关注微信支付官方文档的更新，以适应不断变化的支付规则和要求。

微信开发小程序支付流程