跳到主要内容

小程序接入微信支付流程

场景介绍

本篇文档主要介绍在云开发平台搭建的小程序应用,如何使用微信支付模板接入支付流程

实现流程

1 微信支付模板安装

  1. 在云开发平台模板中心找到小程序微信支付模板

  2. 安装模板

  3. 模板安装中

  4. 模板安装完成

  5. 查看模板详情

  6. 在模板参数配置中,需要配置支付商户信息,相关参数说明可参考支付商户配置

2 在编辑器中实现下单和发起支付

  1. 新建 js 方法,用来触发云函数中的微信支付下单方法以及拉起支付

  2. 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 支付回调处理

使用云函数接收微信支付通知

微信支付会异步发送支付通知,这里使用云函数接收微信支付发送的通知,判断是否支付成功,开发者可以根据云函数收到的微信支付通知,判断是否支付成功,然后处理订单支付状态

  1. 新建云函数,假设函数名为: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;
    };
  2. 在参数设置中配置“接收支付通知的云函数”字段,值为:scf:wxpayOrderCallback

  3. 微信支付发送过来的参数

    说明

    不同支付类型返回的参数结构有一定出入,以回调函数收到的实际参数为准

    {
    "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,实现微信支付流程如下:

  1. 云函数wxpayFunctions,包含以下方法:

    • wxpay_order: 小程序下单
    • wxpay_query_order_by_transaction_id: 微信支付订单号查询订单
    • wxpay_query_order_by_out_trade_no: 商户订单号查询订单
    • wxpay_refund: 申请退款
    • wxpay_refund_query: 通过商户退款单号查询单笔退款

  2. 工作流:连接云函数和 APIs 方法,实现支付流程打通

  3. APIs:将微信支付相关的接口进行封装,其中 JSAPI 下单方法为发起支付的关键前置流程