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

2023-10-27

 微信小程序中,常见付款给商家的场景,下面列出企业小程序中,从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个参数,获取支付结果(成功或失败)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序支付完整流程(前端) 的相关文章

  • cdn搭建原理_什么叫cdn服务器?怎么部署?

    在现今的网络系统时期 各类互连网手机app异军突起 而互联网出現浏览卡屏或延时的状况也越来越非常广泛 以便处理不一样的互联网情况 人们常常会构建到不一样的虚拟主机来浏览互联网 cdn服务器也是列举这种 什么叫cdn服务器 cdn服务器英语全
  • CentOS7.x安装VNC实录

    不知不觉 centos已经到7 6了 在服务器操作系统中 centos是用的比较多的 占很大的比例 由于7 x版本和6 x版本有区别 最近安装了7 6的VNC 特记之 VNC需要系统安装的有桌面 如果是生产环境服务器 安装时使用的最小化安装
  • 学妹问我:OpenJDK是什么?作为师哥,必须万字详解屁颠屁颠奉上

    上一篇是分享的是 JVM虚拟机 了解Java堆中对象分配 布局和访问的全过程 这篇给大家分享 OpenJDK 1 OpenJDK 概述 OpenJDK 是 Java 平台标准版 Java SE 的免费开源实现 这是 Sun Microsys
  • python爬虫安装Xpath插件时遇到的问题

    在安装Xpath时 出现拖拉压缩包 记住一定是压缩包 下载后的插件是 crx后缀的文件 需要改变为压缩包的形式 后 在添加文件时 一直找不到压缩包 最后发现是压缩包后缀的问题 如图 是我的winr 压缩包软件 自动生成的压缩包 默认是rar
  • 数据聚合与分组运算

    标注 我用的是jupyterNotebook 一 分组与聚合的原理 在Pandas中 分组是指使用特定的条件将原数据划分为多个组 聚合在这里指的是 对每个分组中的数据执行某些操作 最后将计算的结果进行整合 分组与聚合的过程大概分为以下三步
  • nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet

    问题描述 这个报错指的是结果无法映射 只需要把java实体与数据库表关系映射好就ok 一定要看清自己的配置文件 自己的数据库 处理思路整理 避免走弯路 1 首先验证是不是代码写出 String sql select count 1 from
  • Spring中@Autowired注解用法详解

    1 概述 Spring中IOC可以通过注解方式实现 只要在spring的配置文件applicationContext xml中配置开启了包扫描Spring会自动扫描指定包及其子孙包
  • 【Python三大结构练习2】

    目录 1 数字金额转换为中文大写金额 2 恺撒密码 3 大小写转换 1 数字金额转换为中文大写金额 描述 编写一函数 将数字金额转换为中文大写金额 设最高位考虑到亿 最低位考虑到分 如 数字金额为1023 445 转换为中文大写金额为 壹仟
  • tp6整合腾讯云cos上传

    1 创建一个名为 composer json的文件 内容如下 require qcloud cos sdk v5 gt 2 0 2 执行以下命令 使用 Composer 安装 php composer update 3 复制代码 我这里目录

随机推荐

  • Qt编写并且调用外部动态库(dll)

    一 利用Qt编写一个简单的动态库 利用Qt编写一个简单的动态库 里面含有加 减 乘 除四个函数接口 1 打开Qt 新建一个项目 选择Library C 库 然后点击确认 2 选择共享库 写入项目名称 我这里命名为 QtMathDLL 选择项
  • Java 多线程批量操作中如何做事务控制?

    老汉聊技术 2023 04 11 12 43 发表于四川 收录于合集 java42个 编程63个 上方蓝色 老汉聊技术 选择 设为星标 前言 公司业务中遇到一个需求 需要同时修改最多约5万条数据 而且还不支持批量或异步修改操作 于是只能写个
  • 启动Redis报错:Could not create Server TCP listening socket *:6379: bind: Address already in use–解决办法

    最后一句提示 6379地址已经在使用 6379是redis默认的端口 如图我自己输入指令 redis server 显示Redis已经开启服务 1 正常解决方法三部 通过指令找到redis进程 查看所有关于它的进程详情 ps ef grep
  • Harbor-私有docker仓库离线安装配置

    因为工作需要 有时候是需要完全断网环境 此时需要在内网环境中离线安装Harbor私有仓库 1 系统环境描述 主机 X86 64架构 8G内存 期待啥时候等有机会找一台国产化机器安装一个其他架构的版本 操作系统 CentOS 7 9 2009
  • Python爬虫进阶:实战案例与技巧详解

    导言 Python作为一种强大的编程语言 在网络爬虫开发中发挥着重要作用 除了基本的爬虫技巧外 还有许多高级的爬虫技术可以帮助我们更好地获取和处理数据 本篇文章将结合实际案例 介绍Python爬虫的进阶技巧 并提供相应的代码示例 帮助读者深
  • 练习一、用JS语言计算两点之间距离功能

    功能描述 在界面建立4个数字输入框分别代表两点的横坐标 纵坐标 点击按钮并计算出相应的距离 主要考点 熟悉math对象中开根号math sqrt 数值 与平方math pow 数值 次幂 框架 elementui 相关代码
  • Netty学习——整体架构

    Netty 整体结构 Netty 是一个设计非常用心的网络基础组件 Netty 官网给出了有关 Netty 的整体功能模块结构 却没有其他更多的解释 从图中 我们可以清晰地看出 Netty 结构一共分为三个模块 Core 核心层 Core
  • Coverity介绍以及典型缺陷说明

    Coverity概述 Coverity公司是由一流的斯坦福大学的科学家于2002年成立的 产品核心技术是1998年至2002年在斯坦福大学计算机系统实验室开发的 用于解决一个计算机科学领域最困难的问题 在2003年发布了第一个能够帮助Lin
  • 一元多项式相加可实现代码数据结构(C语言)

    一元多项式相加可实现代码 c语言 数据结构 C语言版 书上是伪代码 经过不断修改调试 写下可实现的C语言源代码 创建文件 分为两部分 头文件 Poly h 和源文件 Poly c 一 实验目的 1 了解一元多项式的表示 2 实现一元多项式的
  • python使用influxdb-client管理InfluxDB的bucket

    bucket的概念类似数据库的 库 同时每个库中的数据都因为存在 时间戳 每个数据都会有一个对应的时间点 influxdb client python官方github页面 https github com influxdata influx
  • termux基本使用教程[通俗易懂]

    初始化 下载并初始化termux 安装vim 安装编辑器vim pkg install vim 解决中文乱码问题 在home目录下 新建 vimrc文件 vim vimrc 添加内容如下 set fileencodings utf 8 gb
  • 华为机试题67-24点游戏算法

    描述 给出4个1 10的数字 通过加减乘除运算 得到数字为24就算胜利 除法指实数除法运算 运算符仅允许出现在两个数字之间 本题对数字选取顺序无要求 但每个数字仅允许使用一次 且需考虑括号运算 此题允许数字重复 如3 3 4 4为合法输入
  • flex实现简单计算机程序,Macromedia Flex 制作计算器源码和制作步骤

    这个计算器是由两个部分组成 一个前台界面的MXML文件 一个后台控制器的AS文件 mxml文件负责显示计算器的界面 as文件负责处理用户发送的信息并计算结果 在这个教程中我们主要学习 list The Application class T
  • 音乐小程序项目

    目录 一 开放前的准备 1 项目展示 2 项目分析 1 音乐小程序项目页面结构图 2 音乐小程序项目目录结构 3 音乐小程序项目目录结构 3 项目初始化 二 标签页切换 1 任务分析 2 前导知识 1 swiper组件编写滑动页面结构 2
  • 字符检测:C语言ispunct()函数--判断字符是否为标点符号或特殊字符

    ispunct 函数用来检测一个字符是否为标点符号或特殊字符 其原型为 int ispunct int c 参数 c 为需要检测的字符 返回值 若 c 为标点符号或特殊符号 非空格 非数字和非英文字母 返回非 0 值 否则返回 0 注意 此
  • 第二次 的面试题目 (自闭!!)

    1 qt 调试时遇见过的报错信息 1 遇到过 最常见的是 没有加头文件 2 未定义错误 2 在linux上使用过gdb吗 怎么使用 什么是GDB 能干啥 gdb是GNU开源组织发布的一个强大的Linux下的程序调试工具 一般来说 GDB主要
  • 云函数(go)部署-腾讯云

    目录 1 云函数入口 2 上传本地函数代码 2 1 进入创建云函数 2 2 定义函数名称 选择运行环境 2 3 上传本地云函数 2 3 配置高级属性 可选填 2 4 点击完成 云函数代码没有问题 则可正常部署 2 5 函数管理 重新上传部署
  • Antv L7 + mapbox 实现简单地图场景

    实现场景 1 创建地图场景 2 自定义marker样式 3 mapbox 实现3D地图 代码实现 1 创建地图场景 div div
  • postman接口测试工具,实现Jmeter+Ant+Jenkins持续集成

    一 中小型公司 中小型项目 jmeter Ant Git jmx Jenkins持续集成 Postman Newman Git Jenkins持续集成 大中型公司 接口自动化框架 接口自动化平台 二 Jmeter常用组件 执行顺序 测试计划
  • 微信小程序支付完整流程(前端)

    微信小程序中 常见付款给商家的场景 下面列出企业小程序中 从0起步完整微信支付流程 一 注册微信支付商户号 由上级或法人注册 接入微信支付 微信商户平台 此商户号 需要由主管及更上级领导进行注册 会成为公司收款账户 不是由前端程序员注册 不