微信小程序支付完整流程(前端)

news2025/7/17 6:57:47

 微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从0起步完整微信支付流程。

一,注册微信支付商户号(由上级或法人注册)

 

 接入微信支付 - 微信商户平台

此商户号,需要由主管及更上级领导进行注册,会成为公司收款账户(不是由前端程序员注册!!!不是由前端程序员注册!!!不是由前端程序员注册!!!)

注册非常简单,重点是需要提供企业资料,一般程序员没有权限获取这些材料,所以需要由上级注册

企业注册需要材料:营业执照对公银行账户信息法人身份证

二,注册小程序账号(由上级或者领导注册)

注册流程简单,企业一般注册为企业小程序,非个人,需要上传营业执照等。

小程序

三,登录商户号绑定小程序

登录之前注册好的商户账号,将当前小程序ID绑定至此商户,表明此小程序可以调用此商户支付相关接口。

微信支付 - 中国领先的第三方支付平台 | 微信支付提供安全快捷的支付方式

四,后端工程师书写接口

返回核心数据如下:

"appId""xxxx",

        "nonceStr""xxxx",

        "packageValue""prepay_id=xxxxx",

        "paySign""xxxxxx",

        "signType""MD5",

        "timeStamp""xxxxxx"

这个接口是你们公司后端程序员自己写的接口,由后端工程师书写,JAVA,PHP,C++,NODE,.NET等...不是前端写!不是前端写!不是前端写!如果没有此接口就与后端工程师沟通,让他书写。

五,前端工程师调用接口

1. 获取openid(当前用户真实id)

       openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,在通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。

原生小程序登录:

wx.login({
  success (res) {
    if (res.code) {
     // code: 用户登录凭证(有效期五分钟)
     // 使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

uniapp登录:

uni.login({
  provider: 'weixin',
  success (res) {
    if (res.code) {
     //code: 用户登录凭证(有效期五分钟)
     //使用 code 可以换取 openid、unionid、session_key 等核心信息
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})

发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)

原生小程序:wx.request     uniapp: uni.request, 流程无差别

uni.request({
  url: `https://api.weixin.qq.com/sns/jscode2session`, //微信官方接口
  data: {
    appid: '小程序appId',
    secret: '小程序密钥,在小程序appId下一行,放一块在',
    js_code: '刚才获取的code', 
    grant_type: 'authorization_code' //固定值
  },
  success: (res) => {
    //获取openid:用户真实唯一id
    console.log(res.data.openid);
  }
})

3. 调用公司后端接口,获取支付核心数据

// 调用后端接口
uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    console.log(obj)
  }
})

此接口必须返回以下6个核心数据,都是由后台计算生成。

"appId""xxxx",

        "nonceStr""xxxx",

        "packageValue""prepay_id=xxxxx",

        "paySign""xxxxxx",

        "signType""MD5",

        "timeStamp""xxxxxx"

3. 调用微信官方支付接口,弹出支付界面

uni.request({
  url: '你们公司的后端接口地址,获取支付核心数据',
  method: 'POST',
  data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 },
  success(obj) {
    

    //调用微信官方支付接口弹出付款界面,输入密码扣款
    wx.requestPayment({
      timeStamp: obj.xxxx.timeStamp,  //后端返回的时间戳
      nonceStr:  obj.xxxx.nonceStr,   //后端返回的随机字符串
      package:  obj.xxxx.packageValue, //后端返回的prepay_id
      signType: 'MD5', //后端签名算法,根据后端来,后端MD5这里即为MD5
      paySign:  obj.xxxx.paySign,  //后端返回的签名
      success (res) {
        console.log('用户支付扣款成功', res)
      },
      fail (res) { 
        console.log('用户支付扣款失败', res)
      }
     })

  }
})

调用后,弹出付款界面,模拟器需要扫码支付。

点击真机调试会直接弹出微信付款界面。

六,总结

  • 前端调用uni.login/wx.login调用微信接口,获取code,code相当于临时身份证

  • 前端调公司后台获取openid的接口,获取openid

  • 前端调公司后台预支付接口,传递openid、商品id、商品单价、商品数量,获取那5个参数。【时间戳timeStamp,随机字符串nonceStr,预支付id package,签名算法signType,签名paySign】

  • 前端调用uni/wx.requestPayment调用微信支付方法,传递5个参数,获取支付结果(成功或失败)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/405008.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

快速上手vue的登录界面(最新版)

文章目录一、创建vue项目二、引入依赖三、改造下项目四、写入Login视图总结这是一个非常非常适合新手的vue登录界面,总体来说美观大气,axios那部分没有发,有需要的大家可以自己进行二次开发,继续编写。 用到了技术栈有 vue/cli 5.…

vue3 | 数据可视化实现数字滚动特效

前言 vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: Cannot read properties of undefined (reading _c) 的错误信息。这个时…

idea如何导入jar包

通过添加Libraries的方式引入: 1、首先在根目录下创建一个 libs 的目录 2、打开 File -> Project Structure 3、单击 Libraries -> "" -> "Java" -> 选择我们导入的项目主目录,点击OK 4、注意:在弹出的方框…

Vite 完整版详解

目录 序论: vite架子分析 1、 打包构建: 2、环境变量 3、模式 4、兼容老浏览器 5、typescript相关 6、基本配置 核心配置全集 推荐两个插件插件Volar 、 Vue 3 Snippets 序论: 开发环境:ESMHMR:来实现模块的热更新;类…

前端项目性能优化方案有哪些

目录 一、 加载优化(减少http请求数) 二、图片优化 三、使用CDN 四、开启Gzip(代码压缩) 六、减少不必要的Cookie 七、脚本优化 八、前端代码结构的优化 九、SEO优化 一、 加载优化(减少http请求数&#xff09…

vue中axios的二次封装——vue 封装axios详细步骤

一、为什么要封装axios api统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护。 通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面…

vue3的setup的使用和原理解析

1.前言 最近在做vue3相关的项目,用到了组合式api,对于vue3的语法的改进也是大为赞赏,用起来十分方便。对于已经熟悉vue2写法的同学也说,上手还是需要一定的学习成本,有可能目前停留在会写会用的阶段,但是s…

Swagger-的使用(详细教程)

文章目录前言一、简介二、基本使用1. 导入相关依赖2. 编写配置文件2.1 配置基本信息2.2 配置接口信息2.3 配置分组信息3. 控制 Swagger 的开启4. 常用注解使用ApiModelApiModelPropertyApiOperationApiParam5. 接口调用三、进阶使用1. 添加请求头四、项目下载前言 作为后端开放…

37.JavaScript对象与JSON格式的转换,JSON.stringify、JSON.parse方法的使用方法和注意事项

文章目录JSON处理JSON.stringifystringify的限制排除和替换映射函数格式化使用的空格数量自定义toJSON方法JSON.parse使用reviver总结JSON处理 JSON(JavaScript Object Notation)是JavaScript表达值和对象的通用数据格式,其本质就是符合一定…

2023前端面试题及答案整理(JavaScript)

JS类型 string,number,boolean,undefined,null,symbol(es6),BigInt(es10),object 值类型和引用类型的区别 两种类型的区别是:存储位…

Js各种时间转换问题(YYYY-MM-DD 时间戳 中国标准时间)

1. 类型总结 指定格式 YYYY-MM-DD HH:MM:SS时间戳中国标准时间 Sat Jan 30 2022 08:26:26 GMT0800 (中国标准时间) new Date()获得系统当前时间就会是这种形式 2. 类型之间的转换 时间戳转换为 yyyy-mm-dd或yyyy-MM-dd HH-mm-ss function timestampToTime(timestamp) {var …

【vue】 配置代理

文章目录参考文档跨域问题引入配置代理解决跨域问题:方法一:方法二:使用方法二最终的文件:总结参考文档 尚硅谷视频:https://www.bilibili.com/video/BV1Zy4y1K7SH?p95 axios官网教程:https://axios-htt…

uniapp分包,小程序分包处理,详解(图解),手把手从0开始

一、为什么要分包 因小程序有体积和资源加载限制,优化小程序的下载和启动速度。 二、主包和分包 所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划…

微信小程序详细教程(建议收藏)

一.小程序的开发准备 1. 小程序的安装与创建 第一步 打开小程序官网第二步 找到开发管理,找到开发设置,下面有一个AppID,复制即可,后面开发小程序需要用 新建项目 ,需要先下载微信开发工具下载网址,安装完…

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪

九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪 九个前端神奇库 文章目录九个前端神奇库,让你的前端项目瞬间美化,甲方看了都落泪1. Lottie-web/Bodymovin2. Parallax.js3. Magic Grid4. webslides5. SVG.js6. rellax7. …

【Vue面试专题】50+道经典Vue面试题详解!

目录前言相关学习资源01-Vue组件之间通信方式有哪些02-v-if和v-for哪个优先级更高?03-能说一说双向绑定使用和原理吗?04-Vue中如何扩展一个组件05-子组件可以直接改变父组件的数据么,说明原因06-Vue要做权限管理该怎么做?控制到按…

hexo主题应用

可以在hexo主题官网自己选择,官网网址:主题,选择哪个全凭自己的喜好。 我选择的一个主题是stun,官网效果图 安装主题stun git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun安装依赖 git clone -b dist https://github.com/liuyib/hexo-theme-stun…

前端常见面试八股文

HTML篇 1、H5新增标签有哪些? 一、语义化标签 header、footer、nav、aside、section、article 语义化的意义? 1、更适合搜索引擎的爬虫爬取有效的信息,利于SEO。 2、对开发团队很友好,增加了标签的可读性,结构更…

VScode 看这一篇就够了

VScode 小白入门教程 VScode 小白入门教程 VScode简介VScode的下载与安装VScode的常用设置 基础设置禁用自动更新自动保存设置Vscode更换主题 VScode的常用快捷键开发人员常用的VScode插件使用VScode开始你的第一行C/C代码 VScode简介 VScode全称是Visual Studio Code&…

一文吃透JavaScript程序控制流与函数

文章目录思维导图💖程序控制流⛳️顺序结构⛳️分支结构💫比较运算符💫逻辑运算符💫if语句💫switch语句⛳️循环结构💫while语句💫do...while语句💫for语句💫break和cont…