小程序微信支付-点击安装模板

开发者在小程序中通过几行代码即可调用微信支付的能力，例如下单、订单查询、申请退款、查询退款等。

功能特性

• 免服务器免运维
• 支持实物商品交易

快速上手示例：微信支付下单

第 1 步：安装云模板

在详情页点击 安装模板 按钮，等待安装完成。

第 2 步：配置商户信息

微信支付云模板需要配置商户信息后才能使用。点击参数设置，打开配置表单，填写微信支付必须的商户信息，保存后后模板初始化完成。

如果需要自行处理支付和退款通知，可通过接收支付通知的回调函数和接收退款通知的回调函数配置项来设置。

第 3 步：使用云函数调用云模板下单接口

模板已内置了云函数代码，可以直接在微信开发者工具中下载到本地修改后使用。 也可以手动创建云函数来完成，点击在线代码示例，可以查看云函数示例代码。

1. 下载模板云函数代码到本地

打开微信开发者工具界面，在cloudfunctions目录点击右键，选择同步云函数列表，同步模板中的云函数wxpayFunctions到本地；然后在云函数wxpayFunctions目录右键，选择下载，即可下载模板内置的云函数代码到本地。如下图所示：

1. 编辑下单云函数

修改云函数wxpayFunctions下的wxpay_order/index.js代码，参数更新为业务实际参数。云函数编辑后，需要重新部署。

第 4 步：小程序端获取预付单信息并完成支付

小程序端调用云函数时，需要先在小程序端初始化云能力。修改app.js，在 App的 onLaunch 生命周期方法中添加云能力初始化代码，参数传入用户的云开发环境ID。

App({
  onLaunch: function () {
    wx.cloud.init({
      // env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
      env: '{%TCB_ENV_ID%}',
      // 是否在将用户访问记录到用户管理中，在控制台中可见，默认为false
      traceUser: false,
    });
  },
});

在小程序中调用第 3 步中的云函数，获取预付订单信息后，调用wx.requestPayment唤起微信支付组件完成支付。

wx.cloud.callFunction({
  // 云函数名称
  name: 'wxpayFunctions',
  data: {
    // 调用云函数中的下单方法
    type: 'wxpay_order',
    // 业务其他参数...
  },
  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 个接口方法：

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

具体调用方式可查看对应接口详情。

常见问题

如何查看云调用服务的监控日志

云模板的监控和日志功能正在开发中，目前可以在云开发的工作流中查看调用的日志和监控。