小程序接入微信支付流程
场景介绍
本篇文档主要介绍在云开发平台搭建的小程序应用,如何使用微信支付模板接入支付流程
实现流程
1 微信支付模板安装
在云开发平台模板中心找到小程序微信支付模板
安装模板
模板安装中
模板安装完成
查看模板详情
在模板参数配置中,需要配置支付商户信息,相关参数说明可参考支付商户配置
2 在编辑器中实现下单和发起支付
新建 js 方法,用来触发云函数中的微信支付下单方法以及拉起支付
js 方法代码展示
export default async function ({ event, data }) {
const orderInfo = event.detail;
const ordeResult = await $w.cloud.callFunction({
//云函数名称
name: "wxpayFunctions",
data: {
//调用云函数的下单方法
type: "wxpay_order",
//业务其它参数
...orderInfo,
},
});
const paymentData = ordeResult.result?.data;
//唤起微信支付组件,完成支付
return new Promise((resolve, reject) => {
wx.requestPayment({
timeStamp: paymentData?.timeStamp, // "1414561699",
nonceStr: paymentData?.nonceStr, // "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
package: paymentData?.packageVal, //"prepay_id=wx201410272009395522657a690389285100"
signType: paymentData?.signType, //"RSA",
paySign: paymentData?.paySign, //"oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==",
success: function (res) {
resolve(orderInfo._id);
},
fail: function (res) {
reject(orderInfo._id);
},
});
});
}注意事项支付场景需要在真机环境或者微搭开发者工具中预览效果,编辑器中无法模拟支付
3 支付回调处理
使用云函数接收微信支付通知
微信支付会异步发送支付通知,这里使用云函数接收微信支付发送的通知,判断是否支付成功,开发者可以根据云函数收到的微信支付通知,判断是否支付成功,然后处理订单支付状态
新建云函数,假设函数名为:
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;
};在参数设置中配置“接收支付通知的云函数”字段,值为:scf: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"
}
}
微信支付模板核心模块介绍
安装微信支付模板会自动生成云函数、工作流和 APIs,实现微信支付流程如下:
云函数
wxpayFunctions
,包含以下方法:- wxpay_order: 小程序下单
- wxpay_query_order_by_transaction_id: 微信支付订单号查询订单
- wxpay_query_order_by_out_trade_no: 商户订单号查询订单
- wxpay_refund: 申请退款
- wxpay_refund_query: 通过商户退款单号查询单笔退款
工作流:连接云函数和 APIs 方法,实现支付流程打通
APIs:将微信支付相关的接口进行封装,其中 JSAPI 下单方法为发起支付的关键前置流程