关于微信小程序实现云支付那些事儿

 更新时间:2021年09月08日 12:37:29   作者:super--Yang  
我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序实现云支付那些事儿,文中通过图文介绍的非常详细,需要的朋友可以参考下

一、前言

稍微玩过微信小程序云开发的同学都基本知道微信小程序云开发目前已经支持云支付这一能力。

那么在云支付的能力支持之下,整个支付的流程是怎样的呢?

例如:用户发起支付前、支付中、支付后的逻辑处理应该是怎样的,该如何设计会比较保险,降低出错的概率。

那么本文主要介绍云支付的使用以及在云支付下的订单系统、支付流程该如何设计。

顺便提一下:微信支付功能仅支持企业主体调用

二、思路分析

云支付的调用流程大致分为以下四步:

1、获取免鉴权参数

小程序端传入金额、商品信息等基本参数后,调用云函数获取免鉴权参数。

2、将免鉴权参数传入小程序端的支付API

云函数返回免鉴权参数,作为小程序端支付API的入参。

3、用户支付

调起微信支付,用户进行支付/取消支付操作

4、微信端回调指定的云函数

支付成功后回调此云函数。

如果用户取消支付,则不会回调此云函数。

那么,根据以上四个步骤就可以分析出,订单的创建、订单支付状态的改变应该是在什么时候了。

订单的创建应该是在第一步的获取免鉴权参数的时候,获取免鉴权参数后将订单号等信息插入数据库。

此时的订单支付状态应该是待支付状态。

同时也可以知道,订单支付状态的改变,应该是在第四步中去进行改变,如果支付成功,将订单的支付状态改为支付成功即可。

相关的官方文档链接:

三、云支付小案例

1.云函数

1-1.获取免鉴权参数云函数(wxPay)

此云函数主要是获取支付API所需的参数,以及创建订单插入数据库。

成功调用示例结果截图

实现代码

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

exports.main = async (event) => {

  const wxContent = cloud.getWXContext() // openid等信息
  const openid = wxContent.OPENID
  const appid = wxContent.APPID

  const totalFee = event.totalFee // 支付金额(单位:分)
  const body = event.body // 商品名

  const outTradeNo = createOutTradeNo() // 订单号

  // 获取免鉴权支付参数
  const payMent = await cloud.cloudPay.unifiedOrder({
    "body": body,
    "outTradeNo": outTradeNo,
    "spbillCreateIp": "127.0.0.1",
    "subMchId": "商户号", // 商户号
    "totalFee": totalFee,
    "envId": "对应的云环境id", // 云环境id
    "functionName": "payCallBack" // 支付回调云函数
  })

  // 创建订单
  const nowTime = new Date().getTime()
  const orderObj = {
    _openid: openid,
    appid: appid,
    outTradeNo: outTradeNo,
    totalFee: totalFee * 0.01,
    payStatus: 'wait',
    createTime: nowTime,
    updateTime: nowTime,
    deleteTime: null,
  }
  await addOrder(orderObj)

  return payMent
}

/** 创建随机的唯一订单号(32位) */
const createOutTradeNo = () => {
  let outTradeNo = new Date().getTime() // 获取当前13位时间戳
  let numStr = '0123456789';
  let randomStr = '';
  for (let i = (32 - 13); i > 0; --i) {
    randomStr += numStr[Math.floor(Math.random() * numStr.length)];
  }
  outTradeNo += randomStr
  return outTradeNo
}

/** 向数据库创建订单 */
const addOrder = async (orderObj) => {
  return await db.collection('order')
    .add({
      data: orderObj
    })
    .then(res => {
      console.log("创建订单成功 =====>", res, orderObj)
    })
    .catch(err => {
      console.log("创建订单异常 =====>", err, orderObj)
    })
}

1-2.支付回调云函数(payCallBack)

在用户支付成功后微信服务端将会调用此云函数,并携带支付方的订单号、openid、appid等信息。

开发者可以根据这个来判断当前回调的是哪个订单。

回调文档

成功回调结果示例截图

实现代码

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

const db = cloud.database()

// 云函数入口函数
exports.main = async (event) => {
  console.log("回调返回对象 =====>", event)
	// 判断条件
  if (event.returnCode == 'SUCCESS') {
    if (event.resultCode == 'SUCCESS') {
      // 查询条件
      const whereObj = {
        appid: event.subAppid, // 小程序的APPID
        _openid: event.subOpenid, // 小程序用户的openid
        outTradeNo: event.outTradeNo, // 商户号的订单号
      }
      // 更新对象
      const updateObj = {
        transactionId: event.transactionId, // 微信方的订单号
        totalFee: event.totalFee * 0.01, // 微信方收到的金额
        timeEnd: event.timeEnd, // 支付结束时间
        payStatus: 'success',
        updateTime: new Date().getTime()
      }
      // 更新订单
      await updateOrder(whereObj, updateObj)
    }
  }
  // 支付回调的返回协议和入参协议(必须返回此结构体,详见文档)
  return {
    errcode: 0,
    errmsg: event.resultCode
  }
}

/** 更新订单的支付状态 */
const updateOrder = async (whereObj, updateObj) => {
  return await db.collection('order')
    .where(whereObj)
    .update({
      data: updateObj
    })
}

2.小程序端(js代码)

// pages/wxPay/wxPay.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /** 支付点击监听 */
  async payTap() {
    const totalFee = 2
    const body = '支付测试'
    wx.showLoading({
      title: '调起微信支付中',
      mask: true
    })

    // 获取支付免鉴权参数
    const payMentRes = await this.getPayMent(totalFee, body)
    wx.hideLoading({
      success: (res) => {},
    })
    // 小程序支付API
    const payRes = await this.wxPay(payMentRes.result.payment)
    // 支付API返回结果打印
    console.log(payRes)
  },

  /**
   * 小程序支付API
   * @param {object} payment 支付免鉴权参数
   */
  wxPay(payment) {
    return new Promise((resolve, rejects) => {
      wx.requestPayment({
        ...payment,
        success(res) {
          resolve({
            status: 'success',
            res: res
          })
        },
        fail(err) {
          resolve({
            status: 'fail',
            res: err
          })
        }
      })
    })
  },

  /**
   * 获取支付免鉴权参数
   * @param {number} totalFee 支付金额, 单位:分
   * @param {string} body 商品名称
   */
  getPayMent(totalFee, body) {
    return new Promise((resolve, rejects) => {
      wx.cloud.callFunction({
        name: 'wxPay',
        data: {
          totalFee,
          body
        },
        success(res) {
          resolve(res)
        },
        fail(err) {
          resolve(err)
        }
      })
    })
  },

})

3.支付结果

用户端

商家端

4、代码目录结构

四、为什么这样写

或许有的同学也使用过微信云支付的能力,但是不曾使用到上面说到的支付回调云函数。

但是也可以做到获取用户的支付结果。

如下图

事实上,小程序端的支付API(wx.requestPayment())也可以返回当前的支付结果。也确实可以使用这个回调的结果来判断支付是否成功。

那既然这样,为什么还要多此一举写个支付回调云函数来获取支付的结果呢?

看到这里也说明你看完了整个实现过程了,如果你有为什么要用这种方式实现的疑问,也应该多少能够自己给自己找到一些答案。

除去开发规范、优化相关的小问题,我这里说一个很致命的原因。

微信小程序支付API(wx.requestPayment())在IOS端有一个致命的问题,

当用户支付后会进入下面这个页面

当用户不点击完成按钮,微信小程序的支付API(wx.requestPayment())回调是不会触发的。

也就说,小程序自身拿不到用户的支付结果了。

假设用户直接退出了微信,小程序也就销毁了。这时,订单状态该如何改变呢?

tips: 在安卓端不会出现这个问题。有兴趣的同学可以自己去实践以下。

五、结语

思路是这样的,但是一些异常处理,需要开发者在开发过程中自行处理,例如订单插入失败、更新失败等异常问题。虽然概率不大,而且也有打印调用记录,如果出现问题,也是可以查到调用记录以及相关信息。

到此这篇关于关于微信小程序实现云支付那些事儿的文章就介绍到这了,更多相关微信小程序云支付内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Stop SQL Server

    Stop SQL Server

    Stop SQL Server...
    2007-06-06
  • 你不知道的JS ES6字符串标签函数分享

    你不知道的JS ES6字符串标签函数分享

    字符串标签函数是一种特殊的函数调用语法,本文将深入探讨ES6中字符串标签函数的工作原理,并结合具体的代码展示它的威力,快跟随小编一起学习起来吧
    2023-06-06
  • JS浏览器导航栏navigator的一些冷知识

    JS浏览器导航栏navigator的一些冷知识

    这篇文章主要为大家介绍了JS导航栏navigator的一些冷知识使用方法实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • JS使用插件cryptojs进行加密解密数据实例

    JS使用插件cryptojs进行加密解密数据实例

    这篇文章主要介绍了JS使用插件cryptojs进行加密解密数据,结合完整实例形式分析了javascript基于加密插件实现加密解密功能的相关操作技巧,需要的朋友可以参考下
    2017-05-05
  • js弹出层(jQuery插件形式附带reLoad功能)

    js弹出层(jQuery插件形式附带reLoad功能)

    之前的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改为jQuery的插件形式,感觉还不错,有兴趣的朋友可以参考下,希望可以帮助到你
    2013-04-04
  • js密码强度校验

    js密码强度校验

    这篇文章主要介绍了javascript密码强度校验的实现方法,并给出了详细代码,需要的朋友可以参考下
    2015-11-11
  • boostrap模态框二次弹出清空原有内容的方法

    boostrap模态框二次弹出清空原有内容的方法

    今天小编就为大家分享一篇boostrap模态框二次弹出清空原有内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • js倒计时小程序

    js倒计时小程序

    js倒计时代码,可以精确到天和精确到秒
    2013-11-11
  • JS实现的样式切换功能tableCSS实例

    JS实现的样式切换功能tableCSS实例

    这篇文章主要介绍了JS实现的样式切换功能tableCSS,结合实例形式分析了js页面元素遍历与样式动态操作相关技巧,需要的朋友可以参考下
    2016-12-12
  • JS实现不规则TAB选项卡效果代码

    JS实现不规则TAB选项卡效果代码

    这篇文章主要介绍了JS实现不规则TAB选项卡效果代码,通过简单的JavaScript响应鼠标事件动态变换元素样式实现不规则选项卡效果,非常具有实用价值,需要的朋友可以参考下
    2015-09-09

最新评论