Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序如何实现支付功能?看官方文档头疼(使用云函数的方式操作)「建议收藏」

微信小程序如何实现支付功能?看官方文档头疼(使用云函数的方式操作)「建议收藏」

作者头像
全栈程序员站长
发布于 2022-08-02 03:38:18
发布于 2022-08-02 03:38:18
3.8K21
代码可运行
举报
运行总次数:1
代码可运行

大家好,又见面了,我是你们的朋友全栈君。

先来个效果图 ^_^

微信支付功能,个人公众号是没有办法进行开发支付功能的需要是使用非个人公众号进行注册(如:营业执照等,可以去淘宝购买一个也行 大概500左右)

公众平台的配置可以参考文档,这里主要是微信官网注册非个体公众号的否需代码操作。(也就是和我们码农相关的操作了)

支付的整个流程:当然和官方的操作 稍有不同

1. 先将订单信息交给后台存储,储存状态是未支付;

2. 通过云函数调用统一下单接口,返回支付前的必备数据;

3. 通过统一下单的接口返回的数据,打开微信的支付界面(支付界面的成功回调函数,不用和后台打交道,由回调函数操作,原因下面会讲到);

4. 用户输入完密码后,微信会将支付结果交给 回调地址 (该回调地址在统一下单接口中已经设置过了);

5. 在回调地址中将数据提交给后台服务器,后台将订单的支付状态更改为已支付即可。

耐心看下面操作,基本上就是复制下面的代码(整个操作也就一会,基础再差也就40分钟搞定支付)^_^

1. 创建微信小程序

2. 在微信小程中序创建云函数

1). 根目录下创建一个名为 cloud 的文件夹用于存放所有的云函数;

2). 对了 cloud 文件夹右击,选择 新建一个Node.js 云 的选项,命名为 pay ;

3). 此时还需要在小程序根目录中的 project.config.json 文件中添加如下代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    "cloudfunctionRoot": "cloud/",

效果图图下:

4). 接着上传云函数(云函数每次修改都需要上传)

5). 在app.js文件中添加环境名称

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
App({
  onLaunch:function(){
    wx.cloud.init({
      env:"yicai-p6gne"
    })
  },

...
...
...

env参数——>是指定环境名称;

如何查看环境名称:

3. 开发工具中在 微信支付配置 选项中,添加商户号

4. 确保前面的操作没有问题后,我们开始编写云函数pay的代码

编辑pay云函数中的index.js文件:(将如下代码替换掉原本的代码)记住重新上传云函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 云函数代码
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": event.goodName, //商品名称 或 商品描述
    "outTradeNo": event.outTradeNoTo, //订单号
    "spbillCreateIp": "127.0.0.1", //回调地址
    "subMchId": "*********", // 微信支付商户号 
    "totalFee": event.totalFee, //商品支付金额 单位(分) 100代表一块钱
    "envId": "yicai-p6gne", //云开发环境ID
    "functionName": "pay_cb" //回调的云函数
  })
  return res
}

效果图如下:

5. 那么这时候,我们就可以去通过调用云函数的方式 ,实现微信小程序的支付(流程是先获取支付需要的必备数据也就是通过pay这个云函数,然后在将获取的必备数据 通过使用 wx.requestPayment 实现支付 )

js代码如下:(具体参数 根据自己的需求改动,注释很齐全都有说明)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//此处可以是点击事件
  paydata: function (e) {
    var that = this;
    var outTradeNo = "";  //订单号
    var jiaqian = 1;  // 开发阶段先设置交易金额为0.01元

    // var jiaqian = parseInt(that.data.filesM * 100);  //获取真实付款金额
    outTradeNo = Math.floor((Math.random() * 1000) + 1) + "1371" + new Date().getTime(); //生成订单号
    that.setData({
      outTradeNo: outTradeNo
    })
    
    //准备支付(先获取必要参数)
    wx.cloud.callFunction({
      name: 'pay',   //调用微信得pay云函数
      data: {
        goodName: "农夫山泉",   // 商品名称 或 商品描述
        totalFee: jiaqian,                   // 需要支付的金额
        outTradeNoTo: outTradeNo             // 生成的订单号
      },
      success: res => {
        console.log("获取字符参数成功", res);   // 此处是通过pay微信云函数,有微信给我们生成支付前的必要参数
        const payment = res.result.payment    // 微信会返回支付需要的必备数据
        wx.hideLoading()

        //调起支付(获取必要参数后,开始真实调用微信支付窗口)
        wx.requestPayment({
          ...payment,
          success(res) {   //如果支付成功了,进入success函数回调(成功后具体操作看实际业务需求)
            console.log('支付成功', res)
            wx.showLoading({
              title: "付款成功"
            })
            setTimeout(function () {
              wx.hideLoading()
              that.upload(e);  //将用户购买的数据 交给 后台
            }, 700)

          },
          fail(res) {
            console.error('支付失败', res)
            wx.showLoading({
              title: "支付失败"
            })
            setTimeout(function () {
              wx.hideLoading()
            }, 1600)
          }
        })

      },
      fail(res) {
        console.log("获取支付参数失败", res);
      }
    })
  },

js代码效果图:

注意在微信小程序开发工具中调起支付的界面如下:

注意在真实手机的小程序中进行支付的效果图如下:

但是还没有结束????

这种情况基本上可以使用,但是如何用户在手机上支付的时候,由于使用wx.requestPayment 的方法打开支付界面,需要用户手动点击确认按钮才会进入success 回调函数,如下图

只有用户点击完成的时候才会触发 wx.requestPayment 的成功回调函数,解决方法如下

上面是官网提供的流程图,(云函数的代码其实就是放在服务器上的代码)

在图中的最后一步,微信会将用户支付的信息回调给商户系统也就是回调给自己的后台服务器(而此时的微信回调事件是在用户输入完密码付款成功后,不需要用户点击完成按钮)。

也就是说我们在实际开发的时候 wx.requestPayment 的成功回调函数,我们基本不需要做任何和服务器有关的操作,微信服务器会监听到支付的结果给我们的回调云函数。所以特别注意 我们需要在支付前将订单信息提交给后台,进行存储到数据库,由微信回调地址到云函数,云函数再将数据交给后台。

所以在云函数 pay 中有一个参数是回调函数,

所以我们需要创建对应的回调函数,

我们可以在云函数中等待微信给我们的回调数据,数据中有包含支付的结果信息。在下图代码11行中

此时我们要将响应的数据,获取订单号给后台,让后台更改数据库订单的状态为已支付状态即可。

但是此处需要安装node环境本机安装,需要使用nodejs发送get请求或者post请求 将订单号提交给后台,所以需要安装npm,上图的pay_modules文件夹,大家可以无视。

上图的16行即描述将订单号发送给服务器的地址

上述pay_cb云函数代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 云函数入口文件
const rp = require('request-promise');
const cloud = require('wx-server-sdk')

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

// 云函数入口函数
exports.main = async (event, context) => {
  console.log('payment callback!', event)

  if(event.resultCode == 'SUCCESS'){  //根据result_code查看业务结果成功进行提交数据告诉服务器
    // const urlTmp = getApp().data.baseUrl ;
    const urlTmp = "http://yczb.canurcster.xyz"
    rp(urlTmp + '/home/supplier/notify?outTradeNo='+event.outTradeNo).then(function (e) {
      console.log("响应数据:" + e)
    })
  }
  
}

基本上已经完成了,但是记住回调函数里面 需要加上return返回值(就是告诉微信后台,再回调函数中已经确认了收到了);如果不返回会造成DDS攻击。

支付结果回调的云函数必须返回如下一个对象,否则会视为回调不成功,云函数会收到重复的支付回调:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//更新云数据库数据
const res = {errcode:0,errmsg:''}//需要返回的字段,不返回该字段则一直回调
return res

上述操作基本上就搞定的差不多了,可以根据自己的业务需求进行响应的操作,凡事都有第一次,只要肯磨基本上花点事件都可以搞出来,重点是下面这个图很重要 一定要看懂

微信官网支付API手册:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3

微信官方文档手册(可以进入上面的连接):https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.html

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/125422.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
2 条评论
热度
最新
第2步--“2. 在微信小程中序创建云函数”,要把第 3)小步放到第 2)小步前面。
第2步--“2. 在微信小程中序创建云函数”,要把第 3)小步放到第 2)小步前面。
回复回复点赞举报
说白了,就下面这两行没看懂啥意思,也没有详细解释。如果只是确认支付成功,根本没必要等这个pay_cb,不需要这个云函数,一样可以在小程序端success哪里看到结果,同时更新给数据库。const urlTmp = "http://yczb.canurcster.xyz" rp(urlTmp + '/home/supplier/notify?outTradeNo='+event.outTradeNo).then(function (e) { console.log("响应数据:" + e) })
说白了,就下面这两行没看懂啥意思,也没有详细解释。如果只是确认支付成功,根本没必要等这个pay_cb,不需要这个云函数,一样可以在小程序端success哪里看到结果,同时更新给数据库。const urlTmp = "http://yczb.canurcster.xyz" rp(urlTmp + '/home/supplier/notify?outTradeNo='+event.outTradeNo).then(function (e) { console.log("响应数据:" + e) })
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
2024年11月最新版微信小程序支付功能,使用小程序云开发10行代码实现小程序支付功能(含源码和步骤)
我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。
编程小石头
2024/11/14
2060
微信小程序--使用云开发完成支付闭环
根据回调函数携带的订单号,修改对应订单号的waiting状态为success,并且返回对应格式的返回信息
Kindear
2021/02/04
1.1K0
最佳实践丨使用云函数+云调用,四步搞定微信支付
微信支付是云开发原生支持的微信生态能力之一,开发者只需要简单调用相应的函数即可完成整套支付流程,安全又高效。部分优势包括:
腾讯云开发TCB
2021/07/07
2.9K0
最佳实践丨使用云函数+云调用,四步搞定微信支付
小程序-云开发-实现微信云支付功能
对于支付下单在小程序当中是一个非常重要的功能,在未接入云支付之前,想要实现一个支付下单的功能,借助微信官方提供的wx.requestPayment()这个接口,发起微信支付
itclanCoder
2020/10/28
10.9K1
小程序-云开发-实现微信云支付功能
小程序webview组件,小程序内联h5页面,webview实现微信支付
先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。
编程小石头
2019/08/15
4.9K1
小程序webview组件,小程序内联h5页面,webview实现微信支付
微信小程序--云开发支付闭环
云开发支付流程闭环 extends 微信小程序--使用云开发完成支付闭环 在上述文章中,我们对支付结果的处理更多依赖于小程序端的操作 订单号存储在小程序端 支付结果采用小程序端定时触发器轮询
Kindear
2021/06/10
4.3K0
微信小程序--云开发支付闭环
10行代码实现微信小程序支付功能,使用小程序云开发实现小程序支付功能(含源码)
我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。
编程小石头
2019/08/13
2.4K1
10行代码实现微信小程序支付功能,使用小程序云开发实现小程序支付功能(含源码)
实战丨如何制作一个完整的外卖微信小程序开发项目(已开源)
一开始项目并非基于云开发而开发的,目前考虑用云开发,因此,需要在项目中开启云开发的相关选项。
腾讯云开发TCB
2020/07/29
4.4K0
实战丨如何制作一个完整的外卖微信小程序开发项目(已开源)
10行代码实现小程序支付功能!丨实战
我们实现这个支付功能完全是借助小程序云开发实现的,不用搭建自己的服务器,不用买域名,不用备案域名,不用支持https。只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。
腾讯云开发TCB
2019/08/15
11.7K3
几行代码解决云开发微信支付
新版二手书小程序的进程每天都在更新了,中午抽时间赶到了支付阶段,第一次使用云开发进行小程序支付,体验了下,真的方便。
许坏
2019/09/09
2.8K0
几行代码解决云开发微信支付
小程序云开发调用微信支付
此处为语雀视频卡片,点击链接查看:Screenrecorder-2020-05-18-21-56-55-682.mp4
4O4
2022/04/25
4.8K0
微信小程序支付功能全流程实践
微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑!
胡哥有话说
2019/07/25
3.4K0
微信小程序支付功能全流程实践
深度剖析!小程序支付功能开发的关键要点
嘿,各位开发小伙伴们👩‍💻👨‍💻!在这个数字化支付横行的时代,支付宝小程序支付功能简直就是电商类小程序的 “命根子” 呀😜。想象一下,你辛苦开发了一个超酷炫的小程序,用户逛得那叫一个开心,可到了付款环节,要是支付功能掉链子,那可就尴尬啦😅。所以,今天小编就带着大家一起深入支付宝小程序支付功能开发的神秘世界,把那些关键要点都给揪出来🧐。
小白的大数据之旅
2025/05/03
1460
深度剖析!小程序支付功能开发的关键要点
【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现(node版)
微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全、便捷、专业的在线支付服务。以“微信支付,不止支付”为核心理念,为个人用户创造了多种便民服务和应用场景。微信支付为各类企业以及小微商户提供专业的收款能力,运营能力,资金结算解决方案,以及安全保障。用户可以使用微信支付来购物、吃饭、旅游、就医、交水电费等。企业、商品、门店、用户已经通过微信连在了一起,让智慧生活,变成了现实。
愚公搬代码
2022/10/31
9620
【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现(node版)
新能力|云调用支持微信支付啦!
小程序·云开发的云调用能力,让用户可以免鉴权快速调用微信的开放能力,极大节约了开发成本。现在,云调用已支持微信支付,用户在云开发控制台可直接绑定微信支付商户,在绑定完成后可在云开发中原生接入微信支付。
腾讯云开发TCB
2020/06/03
3K1
节省80%代码量?对接微信支付,云开发推出两大新能力
微信支付作为国内最大的支付服务之一,多年以来一直是各类APP、小程序、Web应用必须对接的公共服务之一。当然,对接微信支付也并非那么简单,除了官方文档、代码示例、SDK以外,依然会有一些较为复杂、繁重的开发工作量,例如:
腾讯云开发TCB
2023/09/13
5150
节省80%代码量?对接微信支付,云开发推出两大新能力
从前端的角度来梳理微信支付(小程序、H5、JSAPI)的流程
使用微信支付的前提必开通微信商户号,要使用到那种的支付方式要前需在商户平台开通(要审核)。
九旬
2020/12/01
7.6K1
从前端的角度来梳理微信支付(小程序、H5、JSAPI)的流程
实习生妹子问我怎么对接微信支付(H5、JSAPI、小程序)
开通微信商户号、微信公众号然后按照步骤准备一堆资料审核,然后设置相关配置。所以最好提前准备资料审核以免耽误开发进度。配置的步骤:官方文档,直接按照官方文档配置就行了。需要特别注意的是配置商户号的支付授权目录和公众号的授权域名必须一致,不然会调起支付失败的!
andyhu
2022/12/14
1.2K0
干货:如何借助小程序云开发实现小程序支付功能(含源码)
本节就来教大家如何使用小程序云开发实现小程序支付功能的开发,不用搭建自己的服务器,不用有自己的备案域名,只需要简简单单的使用小程序云开发。
腾讯云开发TCB
2019/07/05
11.6K10
微信小程序知识云开发
小程序界面设计、交互、功能与他人的手机应用软件或在先发布的小程序构成实质性相似,构成小程序抄袭
达达前端
2019/08/18
5.8K0
推荐阅读
相关推荐
2024年11月最新版微信小程序支付功能,使用小程序云开发10行代码实现小程序支付功能(含源码和步骤)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验