支付功能是小程序开发中最重要的功能之一,尤其在电商、外卖、在线教育等场景中广泛应用。微信小程序提供了 微信支付(WeChat Pay) 作为官方支付方案,使开发者能够集成安全、便捷的支付能力。本文将详细讲解小程序支付的实现流程,包括 支付流程、服务器端接口、前端调用支付API,并结合示例代码进行分析。
微信支付在小程序中的实现一般涉及 小程序前端 和 服务器端 两部分:
prepay_id
(预支付订单)。wx.requestPayment
进行支付。在使用微信支付前,开发者需要:
后端需要调用 统一下单 API (https://api.mch.weixin.qq.com/pay/unifiedorder
),生成 prepay_id
,返回给小程序端。
示例(Node.js 后端)
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;
前端拿到 prepay_id
后,使用 wx.requestPayment
调用支付功能。
示例(小程序端支付请求)
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);
}
});
}
});
}
});
微信支付成功后,会向后端 notify_url
发送支付结果通知。后端需要验证支付结果,并更新订单状态。
示例(Node.js 处理支付回调)
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(`<xml><return_code><![CDATA[SUCCESS]]></return_code></xml>`);
} else {
console.error('支付失败:', result.xml);
res.send(`<xml><return_code><![CDATA[FAIL]]></return_code></xml>`);
}
});
app.listen(3000, () => console.log('服务器运行中'));
out_trade_no
,避免重复支付。total_fee
,避免前端篡改支付金额。本文介绍了 微信小程序支付功能的完整流程,包括:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。