手把手教程，教你给小程序接入微信支付
原创
业务背景
开发者在小程序中通过几行代码即可调用微信支付的能力，实现下单、订单查询、申请退款、查询退款等功能，简化以下多种小程序的支付场景：
- 在线预订酒店、餐厅、场地，并支付定金或全款。
- 政务服务、教育、医疗等领域小程序用户缴纳费用
- 电商零售、虚拟产品、在线服务、会员服务等卖货、充值等小程序场景。
快速上手示例：微信支付下单
第 1 步：安装云模板
在详情页点击 安装模板按钮，等待安装完成。
第 2 步：配置商户信息
配置参数注意事项
- 参数前后不要引入额外空格。
- 密钥中的 ----- BEGIN PRIVATE KEY -----，----- END PRIVATE KEY -----，均需要带上。
- 回调函数填写格式：单个云函数填写scf:func1，多个回调函数填写scf:func1,scf:func2，用英文逗号分割。
- 不知道参数如何对应时，可点击输入框下方的连接，查看参数来源。
- 旧版微信支付没有微信支付公钥ID和微信支付公钥可不填，新版微信支付上述两个参数必填。
第 3 步：使用云函数调用云模板下单接口
模板已内置了云函数代码，可以直接在微信开发者工具中下载到本地修改后使用。 也可以手动创建云函数来完成，点击，可以查看云函数示例代码。
1.下载模板云函数代码到本地
打开微信开发者工具界面，在cloudfunctions目录点击右键，选择同步云函数列表，同步模板中的云函数wxpayFunctions到本地；然后在云函数wxpayFunctions目录右键，选择下载，即可下载模板内置的云函数代码到本地。如下图所示：
2.编辑下单云函数
为了便于测试微信支付流程，下单云函数中，订单号为随机字符串，支付金额固定为¥0.01，直接调用即可返回支付凭证，唤起手机微信支付。
在实际项目中，需要修改云函数wxpayFunctions下的wxpay_order/index.js代码，参数更新为业务实际参数。云函数编辑后，需要重新上传部署。
第 4 步：小程序端获取预付单信息并完成支付
小程序端调用云函数时，需要先在小程序端初始化云能力。修改app.js，在 App的 onLaunch 生命周期方法中添加云能力初始化代码，参数传入用户的云开发环境ID。
App({
onLaunch: function () {
wx.cloud.init({
// env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
env: '***',
// 是否在将用户访问记录到用户管理中，在控制台中可见，默认为false
traceUser: false,
});
},
});在小程序中调用第 3 步中的云函数，获取预付订单信息后，调用wx.requestPayment唤起微信支付组件完成支付。
wx.cloud.callFunction({
// 云函数名称
name: 'wxpayFunctions',
data: {
// 调用云函数中的下单方法
type: 'wxpay_order',
// 业务其他参数...
// 这里的参数会传入wxpayFunctions/wxpay_order/index.js下的函数，通过event获取
},
success: (res) => {
console.log('下单结果: ', res);
const paymentData = res.result?.data;
// 唤起微信支付组件，完成支付
wx.requestPayment({
timeStamp: paymentData?.timeStamp,
nonceStr: paymentData?.nonceStr,
package: paymentData?.packageVal,
paySign: paymentData?.paySign,
signType: 'RSA', // 该参数为固定值
success(res) {
// 支付成功回调，实现自定义的业务逻辑
console.log('唤起支付组件成功：', res);
},
fail(err) {
// 支付失败回调
console.error('唤起支付组件失败：', err);
},
});
},
});第 5 步：使用云函数接收微信支付通知
微信支付会异步发送支付通知，这里使用云函数接收微信支付发送的通知，判断是否支付成功，开发者可以根据云函数收到的微信支付通知，判断是否支付成功，然后处理订单支付状态。
新建云函数，假设函数名为：wxpayOrderCallback，在参数设置中配置“接收支付通知的云函数”字段，值为：scf:wxpayOrderCallback。
微信支付发送过来的参数和wxpayOrderCallback云函数示例代码如下
微信支付回调参数:
不同支付类型返回的参数结构有一定出入，以回调函数收到的实际参数为准
{
"id": "EV-2018022511223320873", // 回调通知的唯一编号
"create_time": "2015-05-20T13:29:35+08:00", // 本次回调通知创建的时间
"resource_type": "encrypt-resource", // 通知的资源数据类型，固定为encrypt-resource
"event_type": "TRANSACTION.SUCCESS", // 微信支付回调通知的类型。支付成功通知的类型为TRANSACTION.SUCCESS。
"summary": "支付成功", // 微信支付对回调内容的摘要备注。
"resource": {
"amount": {
"currency": "CNY",
"payerCurrency": "CNY",
"payerTotal": 1,
"payer_currency": "CNY",
"payer_total": 1,
"total": 1
},
"appid": "wx480c*****aa44a43",
"attach": "",
"bankType": "BOC_DEBIT",
"bank_type": "BOC_DEBIT",
"mchid": "1613752320",
"outTradeNo": "8206022981401",
"out_trade_no": "8206022981401",
"payer": {
"openid": "ou*********************3zM"
},
"promotionDetail": null,
"promotion_detail": null,
"successTime": "2025-03-21T17:27:37+08:00",
"success_time": "2025-03-21T17:27:37+08:00",
"tradeState": "SUCCESS",
"tradeStateDesc": "支付成功",
"tradeType": "JSAPI",
"trade_state": "SUCCESS",
"trade_state_desc": "支付成功",
"trade_type": "JSAPI",
"transactionId": "4200002********8510115762",
"transaction_id": "42000026********8510115762"
}
}wxpayOrderCallback云函数示例代码:
'use strict';
exports.main = async (event, context) => {
// event 中包含上面所有列出的json参数,按需取用
// 这里使用event_type==="TRANSACTION.SUCCESS"来判断支付成功
const {event_type}=event
if(event_type==="TRANSACTION.SUCCESS"){
// 处理支付成功相关的业务逻辑
}
return event
};接口说明
本模板提供了 5 个接口方法：
- wxpay_order: 小程序下单
- wxpay_query_order_by_transaction_id: 微信支付订单号查询订单
- wxpay_query_order_by_out_trade_no: 商户订单号查询订单
- wxpay_refund: 申请退款
- wxpay_refund_query: 通过商户退款单号查询单笔退款
具体调用方式可查看对应接口详情。
常见问题
如何查看云调用服务的监控日志
云模板的监控和日志功能正在开发中，目前可以在云开发的工作流中查看调用的日志和监控。
点击云模版链接，快速安装
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
