评论

使用云函数+云调用,四步实现微信支付

如何使用「云函数+云调用」来实现微信支付。

微信支付是云开发原生支持的微信生态能力之一,开发者只需要简单调用相应的函数即可完成整套支付流程,安全又高效。部分优势包括:

  • 无需关心证书、签名,支付流程简化;
  • 基于微信私有协议和私有链路,更加安全、高效;
  • 免运维,高可用性;
  • 按需扩容,弹性伸缩,按量计费,成本缩减;
  • 支持通过云函数接受支付回调,无需自建回调服务。

流程对比:传统流程 vs 云开发

代码示例

第 1 步:小程序调用云函数

C 端用户发起支付流程后,小程序端调用云函数(此处假设云函数名为 makeOrder):

// 小程序代码
wx.cloud.callFunction({
  name: "makeOrder",
  data: {
    /* 开发者自定义参数 */
  }
});

第 2 步:云函数生成订单,返回订单信息

云函数 makeOrder 收到调用之后,使用微信服务端 SDK 提供的 API,无需证书和签名,可直接生成订单。

生成订单之后,利用 CloudPay.unifiedOrder() 统一下单接口,将订单信息返回给小程序。

CloudPay.unifiedOrder() 接口文档:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html

// 云函数 makeOrder
const cloud = require("wx-server-sdk");
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
});

exports.main = async (event, context) => {
  const res = await cloud.cloudPay.unifiedOrder({
    body: "小秋TIT店-超市",
    outTradeNo: "1217752501201407033233368018",
    spbillCreateIp: "127.0.0.1",
    subMchId: "1900009231",
    totalFee: 1,
    envId: "test-f0b102",
    functionName: "payCallback" // 支付回调的函数名
  });
  return res;
};

第 3 步:小程序端发起支付

小程序端收到云函数返回的订单信息后,发起支付:

// 小程序代码
wx.cloud.callFunction({
  name: "makeOrder",
  data: {
    /* 开发者自定义参数 */
  },
  success: (res) => {
    // 取得云函数返回的订单信息
    const payment = res.result.payment;
    // 调起微信客户端支付
    wx.requestPayment({
      ...payment,
      success(res) {
        /* 成功回调 */
      },
      fail(res) {
        /* 失败回调 */
      }
    });
  }
});

第 4 步:使用云函数接收支付回调,完成支付流程

用户完成付款之后,微信后台将会调用指定的云函数(此处假设名为 payCallback),传入的参数中会带有订单信息。

开发者可以在此云函数中,实现自己的发货、完成订单的逻辑。

// 云函数 payCallback
exports.main = async (event, context) => {
  const {
    return_code, // 状态码
    appid, // 小程序 AppID
    mch_id, // 微信支付的商户号
    device_info, // 微信支付分配的终端设备号
    openid, // 用户在商户appid下的唯一标识
    trade_type, // 交易类型:JSAPI、NATIVE、APP
    bank_type // 银行类型
    // ......
    // 更多参数请参考:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7&index=8
  } = event;

  /*
    开发者自己的逻辑
  */

  // 向微信后台返回成功,否则微信后台将会重复调用此函数
  return { errcode: 0 };
};

相关文档:

云函数文档:

https://docs.cloudbase.net/cloud-function/introduce.html

云调用文档:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/openapi/openapi.html

wx-server-sdk 文档:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/Cloud.html

CloudPay.unifiedOrder() 接口文档:

https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/open/pay/CloudPay.unifiedOrder.html

最后一次编辑于  2021-07-08  
点赞 4
收藏
评论

4 个评论

  • Memory (私信不回复)
    Memory (私信不回复)
    2021-07-08

    虽然你发,但是他们还是不看

    2021-07-08
    赞同 2
    回复 3
    • 吴奕群
      吴奕群
      2021-07-28
      哈哈哈,给阿姨点赞
      2021-07-28
      1
      回复
    • 🔆
      🔆
      2021-11-29回复云开发小助手CloudBase
      你好,我调用云函数返回了payment,然后调用requestPayment就没反映了,不报success也不报fail,就一直等着,无响应。。。请问是啥原因啊,代码跟你一样,调不出支付的页面
      2021-11-29
      1
      回复
    • ʚwuspɞ
      ʚwuspɞ
      2023-03-22
      哈哈哈,给阿姨点赞,哈哈哈,给阿姨点赞
      2023-03-22
      回复
  • 大力力
    大力力
    2022-05-04

    楼主你好:

    用了你的代码,尝试支付时报错:缺少参数total_fee,看了下提交数据,发现“package: "prepay_id="”为空,不知道啥原因~

    2022-05-04
    赞同 1
    回复
  • 飞羽醉月
    飞羽醉月
    05-25

    为什么我这边总报错Error: errCode: -501007 invalid parameters | errMsg: unifiedOrder:fail missing wxCloudApiToken,是有什么要设置吗?

    05-25
    赞同
    回复 1
    • 飞羽醉月
      飞羽醉月
      05-25
      解决了,要发体验版或是正式版然后在手机上测试就可以了
      05-25
      回复
  • less
    less
    2022-01-12
     return { errcode: 0 };
    

    安排上了

    ----------------------------------------------------------------------------

    看文档竟然看懂了

      return {
        errcode0,
        errmsg: '我收到了',
      }
    
    2022-01-12
    赞同
    回复
登录 后发表内容