小程序接入微信支付流程

场景介绍

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

实现流程

1 微信支付模板安装

在云开发平台模板中心找到小程序微信支付模板
安装模板
模板安装中
模板安装完成
查看模板详情
在模板参数配置中，需要配置支付商户信息，相关参数说明可参考支付商户配置

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

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

2.2. js 方法代码展示

export default async function ({ event, data }) {
  const orderInfo = event.detail;
  const ordeResult = await $w.cloud.callFunction({
    //云函数名称
    name: "wxpayFunctions",
    data: {
      //调用云函数的下单方法
      type: "wxpay_order",

      // 小程序全托管授权方式，在编辑器中请使用下面方法传递用户openid,需要预先开启openid登录或手机号授权登录方式
      // openid:$w.auth.currentUser.openId,

      //业务其它参数
      ...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);
      },
    });
  });
}

2.3. 小程序全托管授权方式，云函数中接收 openid 方法改造

说明

如果小程序和云开发平台是扫码授权的方式，该步骤可以忽略

云函数中需要使用event.openid的方式接收前端 js 方法中传递的用户 openid

 payer: {
       // 扫码授权方式服务端云函数中直接获取当前用户openId，全托管方式需要使用event.openid来接收
       openid: wxContext.OPENID? wxContext.OPENID:event.openid,
     },

注意事项

支付场景需要在真机环境或者微搭开发者工具中预览效果，编辑器中无法模拟支付

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 下单方法为发起支付的关键前置流程

小程序接入微信支付流程

场景介绍​

实现流程​

1 微信支付模板安装​

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

3 支付回调处理​

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

微信支付模板核心模块介绍​