iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于微信小程序实现云支付那些事儿
  • 547
分享到

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

2024-04-02 19:04:59 547人浏览 薄情痞子
摘要

目录一、前言二、思路分析三、云支付小案例1.云函数1-1.获取免鉴权参数云函数(wxPay)1-2.支付回调云函数(payCallBack)2.小程序端(js代码)3.支付结果4、代

一、前言

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

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

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

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

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

二、思路分析

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

1、获取免鉴权参数

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

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

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

3、用户支付

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

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

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

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

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

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

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

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

相关的官方文档链接:

  • 云支付文档
  • 云支付回调文档
  • 小程序端调起支付API文档

三、云支付小案例

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
}


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)
  },

  
  wxPay(payment) {
    return new Promise((resolve, rejects) => {
      wx.requestPayment({
        ...payment,
        success(res) {
          resolve({
            status: 'success',
            res: res
          })
        },
        fail(err) {
          resolve({
            status: 'fail',
            res: err
          })
        }
      })
    })
  },

  
  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: 在安卓端不会出现这个问题。有兴趣的同学可以自己去实践以下。

五、结语

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

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

--结束END--

本文标题: 关于微信小程序实现云支付那些事儿

本文链接: https://www.lsjlt.com/news/135054.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 关于微信小程序实现云支付那些事儿
    目录一、前言二、思路分析三、云支付小案例1.云函数1-1.获取免鉴权参数云函数(wxPay)1-2.支付回调云函数(payCallBack)2.小程序端(js代码)3.支付结果4、代...
    99+
    2024-04-02
  • 微信小程序中如何实现微信支付
    微信支付是微信公众平台提供的一种在线支付服务,可以为用户提供快速、方便、安全的支付体验。而在微信小程序中实现微信支付,则可以为应用程序提供更多的功能和服务,提高用户体验和商业价值。因此,在本文中,我们将介绍如何在微信小程序中实现微信支付。 ...
    99+
    2023-08-16
    微信小程序 微信 小程序 前端 javascript
  • Python3微信支付(小程序支付)V3接口的实现
    起因: 因公司项目需要网上充值功能,从而对接微信支付,目前也只对接了微信支付的小程序支付功能,在网上找到的都是对接微信支付V2版本接口,与我所对接的接口版本不一致,无法使用,特此记录...
    99+
    2023-01-17
    Python3 微信支付V3接口 Python3 微信支付
  • 小程序通过小程序云实现微信支付功能实例
    目录一、开通微信支付 1.1 关联商户号1.2 添加商户号1.3 管理员授权二、云函数开发2.1 新建云函数2.2 云函数代码2.3 云函数上传并部署三、小程序调用3.1 ...
    99+
    2024-04-02
  • 微信小程序接入微信支付实现过程详解
    目录一、基本介绍二、配置信息三、编码实现四、流程总结一、基本介绍 1、支付场景:点击支付按钮唤起微信支付弹窗,输入正确密码后完成支付。 2、基本流程:点击支付按钮首先生成一个订单,然...
    99+
    2022-12-26
    小程序接入微信支付 微信小程序微信支付
  • springboot整合IJPay实现微信支付-V3---微信小程序
    前言 微信支付适用于许多场合,如小程序、网页支付、但微信支付相对于其他支付方式略显麻烦,我们使用IJpay框架进行整合 一、IJpay是什么? JPay 让支付触手可及,封装了微信支付、支...
    99+
    2023-09-23
    微信小程序 微信 小程序 spring Powered by 金山文档
  • 微信小程序支付功能怎么实现
    实现微信小程序支付功能,需要以下步骤:1. 首先,在微信公众平台申请开通支付功能,并获取到支付相关的配置信息,包括 appID、商户...
    99+
    2023-08-16
    微信小程序
  • 微信小程序支付功能如何实现
    这篇文章主要介绍了微信小程序支付功能如何实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序支付功能如何实现文章都会有所收获,下面我们一起来看看吧。微信小程序支付功能开发文档如下:小程序端,保留大部分的...
    99+
    2023-06-26
  • PHP实现小程序微信支付(v3版本)
    PS:本篇文章是PHP对小程序进行微信支付v3版本的实现,仅用于对支付流程的了解,具体使用方面需要大家自行调整 小程序端JS代码: getPrepayID(){ var that = th...
    99+
    2023-09-17
    php 小程序 微信
  • 微信小程序如何实现支付及退款
    这篇文章将为大家详细讲解有关微信小程序如何实现支付及退款,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一. 支付支付主要分为几个步骤:前端携带支付需要的数据(商品id,购...
    99+
    2024-04-02
  • 微信小程序和支付宝小程序有哪些区别
    这篇文章主要为大家展示了“微信小程序和支付宝小程序有哪些区别”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序和支付宝小程序有哪些区别”这篇文章吧。1.生态差异 :从微信和支付宝的属性来看...
    99+
    2023-06-27
  • python实现微信小程序的多种支付方式
    目录多支付原理多支付接口代码支付方式代码Alipay支付YLpay支付方式Wxpay支付方式Creat下订单多支付 原理 1.利用鸭子类型。规定前台传过来支付方式。pay_metho...
    99+
    2024-04-02
  • 小程序发起微信支付功能怎么实现
    这篇文章主要讲解了“小程序发起微信支付功能怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序发起微信支付功能怎么实现”吧!wx.requestPayment(OBJECT)发起微信...
    99+
    2023-06-26
  • 微信小程序支付接口实例分析
    这篇文章主要介绍“微信小程序支付接口实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序支付接口实例分析”文章能帮助大家解决问题。  小程序调起支付API 小程序调起支付数据签名字段列表...
    99+
    2023-06-26
  • 微信小程序和支付宝小程序的区别有哪些
    这篇文章主要介绍了微信小程序和支付宝小程序的区别有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序微信小程序是存在于微信内的一种轻应用形态,为用户提供不需要下载即...
    99+
    2023-06-27
  • 微信小程序云开发实现微信支付功能业务逻辑可靠
    目录注册微信支付商户号小程序关联商户号业务逻辑代码实现今天打了几把永劫无间后,咱们来聊一聊用云开发来开发微信小程序时,如何实现微信支付,并且保证业务逻辑可靠。 注册微信支付商户号 ...
    99+
    2024-04-02
  • 微信小程序如何使用PHP实现支付功能
    小编给大家分享一下微信小程序如何使用PHP实现支付功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!本文实例为大家分享了微信小程序支付PHP具体代码,供大家参考,具体内容如下服务器端获取 ...
    99+
    2024-04-02
  • 微信小程序怎么实现输入支付密码demo
    这篇文章主要介绍了微信小程序怎么实现输入支付密码demo 的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序怎么实现输入支付密码demo 文章都会有所收获,下面我们一起来看看吧。微信小程序开发实现微信支付...
    99+
    2023-06-26
  • python怎么实现微信小程序的多种支付方式
    本篇内容主要讲解“python怎么实现微信小程序的多种支付方式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“python怎么实现微信小程序的多种支付方式”吧!多支付原理1.利用鸭子类型。规定前台...
    99+
    2023-06-30
  • 支付宝小程序与微信小程序开发的区别有哪些
    这篇文章主要介绍支付宝小程序与微信小程序开发的区别有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!浅谈支付宝小程序与微信小程序开发的区别一、app.json(1)设置小程序通用的的状态栏、导航条、标题、窗口背景色...
    99+
    2023-06-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作