小程序的支付功能实现一、引言支付功能是小程序开发中最重要的功能之一，尤其在电商、外卖、在线教育等场景中广泛应用。微信小程序提供了 微信支付（WeChat Pay） 作为官方支付方案，使开发者能够集成安全、便捷的支付能力。本文将详细讲解小程序支付的实现流程，包括 支付流程、服务器端接口、前端调用支付API，并结合示例代码进行分析。
二、小程序支付的实现流程微信支付在小程序中的实现一般涉及 小程序前端 和 服务器端 两部分：
用户在小程序端发起支付请求，获取 prepay_id（预支付订单）。服务器调用微信支付 API 生成支付订单，返回给小程序端。小程序调用 wx.requestPayment 进行支付。支付成功后，微信服务器通知服务器端，完成订单更新。三、申请微信支付权限在使用微信支付前，开发者需要：
注册微信支付商户号（MCH ID）： 登录 微信支付商户平台 进行注册，并完成实名认证。获取商户密钥（API Key）： 在商户平台 API安全 选项下，生成 API 密钥。在小程序后台配置支付权限： 登录 微信公众平台 → 开发管理 → 开发设置 → 服务器域名，配置支付相关域名。四、支付功能的实现4.1 后端生成预支付订单后端需要调用 统一下单 API (https://api.mch.weixin.qq.com/pay/unifiedorder)，生成 prepay_id，返回给小程序端。
示例（Node.js 后端）
代码语言：javascript复制const crypto = require('crypto');
const axios = require('axios');
const xml2js = require('xml2js');
const generateNonceStr = () => Math.random().toString(36).substr(2, 15);
const createSign = (params, key) => {
let stringA = Object.keys(params).sort().map(k => `${k}=${params[k]}`).join('&');
let stringSignTemp = `${stringA}&key=${key}`;
return crypto.createHash('md5').update(stringSignTemp, 'utf8').digest('hex').toUpperCase();
};
async function createOrder(openid, total_fee) {
const appid = '你的小程序AppID';
const mch_id = '你的商户号';
const key = '你的API密钥';
const notify_url = 'https://你的服务器地址/notify';
const nonce_str = generateNonceStr();
const orderParams = {
appid,
mch_id,
nonce_str,
body: '商品描述',
out_trade_no: '订单号' + Date.now(),
total_fee, // 单位：分
spbill_create_ip: '用户IP',
notify_url,
trade_type: 'JSAPI',
openid
};
orderParams.sign = createSign(orderParams, key);
const builder = new xml2js.Builder({ rootName: 'xml', headless: true });
const xmlData = builder.buildObject(orderParams);
const response = await axios.post('https://api.mch.weixin.qq.com/pay/unifiedorder', xmlData, {
headers: { 'Content-Type': 'text/xml' }
});
const parser = new xml2js.Parser({ explicitArray: false, ignoreAttrs: true });
const result = await parser.parseStringPromise(response.data);
return result.xml.prepay_id;
}
module.exports = createOrder;4.2 小程序端发起支付请求前端拿到 prepay_id 后，使用 wx.requestPayment 调用支付功能。
示例（小程序端支付请求）
代码语言：javascript复制wx.login({
success(loginRes) {
wx.request({
url: 'https://你的服务器地址/createOrder',
method: 'POST',
data: { openid: loginRes.code, total_fee: 100 }, // 金额单位：分
success(res) {
const prepay_id = res.data.prepay_id;
wx.requestPayment({
timeStamp: String(Date.now()),
nonceStr: res.data.nonce_str,
package: `prepay_id=${prepay_id}`,
signType: 'MD5',
paySign: res.data.sign,
success() {
wx.showToast({ title: '支付成功', icon: 'success' });
},
fail(err) {
console.error('支付失败:', err);
}
});
}
});
}
});4.3 处理支付成功回调（服务器端）微信支付成功后，会向后端 notify_url 发送支付结果通知。后端需要验证支付结果，并更新订单状态。
示例（Node.js 处理支付回调）
代码语言：javascript复制const express = require('express');
const xml2js = require('xml2js');
const app = express();
app.use(express.text({ type: 'text/xml' }));
app.post('/notify', async (req, res) => {
const parser = new xml2js.Parser({ explicitArray: false, ignoreAttrs: true });
const result = await parser.parseStringPromise(req.body);
if (result.xml.return_code === 'SUCCESS' && result.xml.result_code === 'SUCCESS') {
console.log('支付成功:', result.xml);
// 更新数据库订单状态
res.send(`
} else {
console.error('支付失败:', result.xml);
res.send(`
}
});
app.listen(3000, () => console.log('服务器运行中'));五、支付优化与最佳实践使用订单号确保支付唯一性：每次支付必须生成唯一的 out_trade_no，避免重复支付。做好超时处理：如果用户未完成支付，应提供重新支付或取消订单的功能。安全处理： 在后端校验 total_fee，避免前端篡改支付金额。使用 HTTPS 确保数据传输安全。六、推荐参考文章 微信官方支付文档
微信支付官方文档
详细介绍了小程序支付的各个 API 接口及参数说明。 Node.js + 小程序支付实践
小程序支付全流程解析
介绍如何使用 Node.js 进行支付处理，并包含完整代码示例。 支付成功回调处理
小程序支付成功后处理逻辑
讲解支付回调的处理细节，避免支付成功后订单状态未更新的问题。七、总结本文介绍了 微信小程序支付功能的完整流程，包括：
如何申请微信支付权限后端生成预支付订单前端调用支付 API后端处理支付回调支付优化与最佳实践