微信小程序支付V2版之JSAPI支付

article/2025/9/13 20:08:32

文章目录

  • 一、微信支付环境搭建
    • 1 企业微信小程序的开通
    • 2. 企业商户号的开通
    • 3 小程序号与商户号关联
  • 二、微信小程序的支付流程
    • 1 `JSAPI`支付流程
    • 2 微信小程序获取`openid`
    • 3 微信小程序下单
    • 4 后台服务程序对订单的处理
    • 5 微信小程序发起支付
    • 6 支付结果的通知
  • 三、微信支付API的使用
    • 1 导入微信官方提供的SDK
    • 2 控制器
  • 四、总结


一、微信支付环境搭建

  • 微信支付必须开通两个账号:微信小程序账号微信商户平台账号
  • 涉及到支付功能只能是公司,个人是不能玩支付功能,即个人的微信小程序号是不能开通微信支付功能的
  • 支付在线文档:https://pay.weixin.qq.com/wiki/doc/api/index.html

1 企业微信小程序的开通

  • 要认证:认证需要缴费
  • 获取appid:小程序的身份标识
  • 生成secret:生成后需要保存后
    在这里插入图片描述
  • 开通支付功能
    在这里插入图片描述
  • 关联商户号
    在这里插入图片描述

2. 企业商户号的开通

  • 要认证
  • 获取商户号:mch_id
  • 设置商户API秘钥:mch_key
  • APPID授权
  • 配置支付接口

3 小程序号与商户号关联

在这里插入图片描述


二、微信小程序的支付流程

1 JSAPI支付流程

  • 微信小程序JSAPI支付的在线文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4
    在这里插入图片描述

  • 一个简单的流程如下
    在这里插入图片描述

  • 在实际项目开发中分为小程序开发与后台服务器的开发

2 微信小程序获取openid

  • 微信小程序的支付需要使用到openid,获取openid有两种方式
    • 微信小程序携带code登录开发者服务器开发者服务器请求微信服务器获取到openid,再将openid响应给微信小程序
    • 直接使用微信小程序的云开发功能获取到openid
  • 使用上述的第一种方式拿到openid,流程如下:
    在这里插入图片描述
  • 微信小程序的登录代码
    wx.login({ // 1. 微信小程序 → 微信服务器: 拿到临时凭证 codesuccess: res => { // 2. 微信服务器 → 微信小程序: 返回结果if(res.code) {wx.request({ // 3. 微信小程序 → 开发者服务器: 目的: 使用code换取openidurl: 'http://ycom.free.idcfengye.com/wechat/requestOpenId',data: { // 请求参数code:res.code},success: res=>{ // 4. 开发者服务器 → 微信小程序: 返回结果if(res.data.openid) {wx.setStorage({ // 5. 将开发者服务器返回的opneid存储起来, 之后的支付需要用到openidkey: 'openid',data: res.data.openid})}}})} }});
  • 开发者服务器后代代码
    /*** 小程序请求openid* 获取 openid 微信小程序的身份标识* 1. 小程序发送请求给开发者服务器* 2. 开发者服务器发送请求给微信服务器* 3. 微信服务器响应开发者服务器的请求* 4. 开发者服务器响应微信小程序的请求* 5. 微信小程序拿到了openid** @param code 临时code, 小程序传过来的* @return 给小程序返回openid*/@GetMapping("/requestOpenId")@ResponseBodyprivate Object requestOpenId(String code) {CloseableHttpClient httpclient = null;CloseableHttpResponse response = null;try {httpclient = HttpClients.createDefault();URI uri = new URIBuilder("https://api.weixin.qq.com/sns/jscode2session").addParameter("appid", Constants.appid).addParameter("secret", Constants.appSecret).addParameter("js_code", code).addParameter("grant_type", "authorization_code").build();HttpGet httpGet = new HttpGet(uri);// 执行请求: 开发者服务器给微信服务器发送GET请求response = httpclient.execute(httpGet);// 判断返回状态是否为200if (response.getStatusLine().getStatusCode() == 200) {// 解析响应数据String content = EntityUtils.toString(response.getEntity(), "UTF-8");JSONObject obj = (JSONObject) JSONObject.parse(content);obj.put("session_key", null); // session_key不需要暴露给微信小程序, 所以置nullreturn obj;}} catch (Exception e) {e.printStackTrace();} finally {if (response != null) {try {response.close();} catch (IOException e) {e.printStackTrace();}}if (httpclient != null) {try {httpclient.close();} catch (IOException e) {e.printStackTrace();}}}return null;}

3 微信小程序下单

  • 微信小程序下单的意思就是微信小程序请求开发者服务器:我有一笔款需要付给微信
    在这里插入图片描述

4 后台服务程序对订单的处理

    /*** 微信小程序下单请求* 1. 微信小程序发送请求给开发者服务器: 下单*      |- openid是必须的参数*      |- 金额: 微信小程序可以传进来也可以不传, 在这里金额是由服务端计算得到的* 2. 开发者服务器经过一顿操作后, 按照要求响应对应的数据给微信小程序* 3. 然后微信小程序拿着这一堆数据去请求微信服务器进行真正的付款操作** @param request* @param openid* @return* @throws Exception*/@GetMapping("/placeOrder")@ResponseBodypublic Object placeOrder(HttpServletRequest request, String openid) throws Exception {// 获取请求的IP地址String ip = request.getHeader("x-forwarded-for");if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getHeader("Proxy-Client-IP");}if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getHeader("WL-Proxy-Client-IP");}if (ip == null || ip.length() == 0 || "unknown".equalsIgnoreCase(ip)) {ip = request.getRemoteAddr();}if (ip.indexOf(",") != -1) {String[] ips = ip.split(",");ip = ips[0].trim();}// 核心在这里return wxPayService.wxPay(openid, ip);}
  • 开发者服务器对微信小程序订单的处理代码
    public Map<String, String> wxPay(String openid, String ip) throws Exception {// 1. 拼接统一下单地址参数Map<String, String> paraMap = new HashMap<>();paraMap.put("body", "车库试验塔收费测试"); // 商家名称-销售商品类目 String(128)paraMap.put("openid", openid); // 用户登录的openidparaMap.put("out_trade_no", UUID.randomUUID().toString().replaceAll("-", ""));// 订单号, 每次都不同paraMap.put("spbill_create_ip", ip); // ip地址paraMap.put("total_fee", "1"); // 支付金额paraMap.put("trade_type", "JSAPI"); // 支付类型// 2. 通过MyWXPayConfig创建WxPay对象, 用于支付请求final String SUCCESS_NOTIFY = "http://ycom.free.idcfengye.com/wechat/notify"; // 微信小程序支付成功后的回调接口WXPayConfig wxPayConfig = new MyWXPayConfig();WXPay wxPay = new WXPay(wxPayConfig, SUCCESS_NOTIFY, false, false);// 3. 开发者服务器请求微信服务器: 统一下单// wxPay.fillRequestData(paraMap)是将上述的参数用key=value的形式和MCH_KEY一起加密为sign: 第一次加密Map<String, String> map = wxPay.unifiedOrder(wxPay.fillRequestData(paraMap), 15000, 15000);// 4. 向微信服务器发送统一下单请求后,得到响应, 从响应的结果中获取 预支付id, 即prepay_id// 将微信服务器返回的结果进行第二次加密String prepayId = map.get("prepay_id");Map<String, String> payMap = new HashMap<>();payMap.put("appId", WechatConstants.APPID);payMap.put("timeStamp", WXPayUtil.getCurrentTimestamp() + "");payMap.put("nonceStr", WXPayUtil.generateNonceStr());payMap.put("signType", WXPayConstants.HMACSHA256);payMap.put("package", "prepay_id=" + prepayId);String paySign = WXPayUtil.generateSignature(payMap, WechatConstants.MCH_KEY, WXPayConstants.SignType.HMACSHA256);payMap.put("paySign", paySign);// 5. 返回最终的结果: 这个结果最终返回给微信小程序return payMap;}

5 微信小程序发起支付

在这里插入图片描述

6 支付结果的通知

在这里插入图片描述

  • 开发者服务器支付通知回调的接口:

三、微信支付API的使用

1 导入微信官方提供的SDK

  • 微信支付V2版的API其实很简单,因为微信官方提供了相关的API:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1
    在这里插入图片描述
    在这里插入图片描述
  • 使用微信官方提供的SDK有两种方式:
    • 使用Maven引入SDK的依赖
    • 下载SDK与DEMO,将里面的源码拷贝到自己的工程中:com.github.wxpay.sdk,同时还需要在pom.xml文件中配置<license>
在这里插入图片描述在这里插入图片描述
  • 我们需要实现WXPayConfig类,因为在统一下单中需要使用到该类的实现类对象,那我们就必须提供一个该接口的实现类:实现如下
public class WechatPayConfig extends WXPayConfig {/*** 获取微信小程序的appid** @return*/@Overridepublic String getAppID() {return WechatConstants.APPID;}/*** 获取商户id** @return*/@Overridepublic String getMchID() {return WechatConstants.MCH_ID;}/*** 获取商户的秘钥** @return*/@Overridepublic String getKey() {return WechatConstants.MCH_KEY;}/*** 不需要证书** @return*/@Overridepublic InputStream getCertStream() {return null;}/*** 域名配置** @return*/@Overridepublic IWXPayDomain getWXPayDomain() {return new IWXPayDomain() {@Overridepublic void report(String domain, long elapsedTimeMillis, Exception ex) {}@Overridepublic DomainInfo getDomain(WXPayConfig config) {return new IWXPayDomain.DomainInfo(WXPayConstants.DOMAIN_API, true);}};}
}

2 控制器


四、总结

提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。


http://chatgpt.dhexx.cn/article/b5SVQgVB.shtml

相关文章

Java实现微信支付(微信公众号JSAPI支付)

Java实现微信支付&#xff08;微信公众号JSAPI支付&#xff09; 第一步 开发环境准备 在接入微信支付之前&#xff0c;需要现在微信支付商户平台入驻&#xff0c;成为商家&#xff0c;才能继续后续的开发。 微信支付商户平台网址&#xff1a;https://pay.weixin.qq.com不过&…

微信 JSAPI 支付流程

微信支付分为5种&#xff1a; Jsapi支付&#xff0c;二维码支付&#xff0c;H5支付&#xff0c;小程序支付&#xff0c;App支付 Jsapi支付流程&#xff1a; (1) 通过oauth协议获取open_id a.第一步&#xff1a;用户同意授权&#xff0c;获取code 在确保微信公众账号拥有授权…

微信小程序微信支付《JSAPI支付》APIV3详细教程

文章目录 前提整体介绍我的maven依赖1、整体流程2、openid 的获取3、统一下单Controller&#xff08;预支付订单&#xff09;4、配置类和配置文件5、工具类6、前端接收到必要的参数&#xff0c;进行调起支付页面7、微信支付通知&#xff0c;notify_url的回调Controller8、前端小…

java对接微信支付:JSAPI支付(微信公众号支付)

本文是【微信JSAPI支付】文章&#xff0c;主要讲解商户对接微信支付&#xff0c;简洁版测试 文章目录 一、JSAPI支付接入前准备 二、代码片段 1.引入Maven依赖 2.后端业务请求接口 3.前端调起支付请求方法 总结 一、JSAPI支付接入前准备 1、JSAPI支付首先需要注册、认证一个公…

微信 JSAPI 支付流程

微信支付&#xff0c;开发文档地址&#xff1a; https://pay.weixin.qq.com/wiki/doc/api/index.html JSAPI支付文档地址&#xff1a; https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter9_2 微信支付分为5种&#xff1a; Jsapi支付&#xff0c;二维码支付&#xf…

微信公众号支付(JSAPI)

六年代码两茫茫&#xff0c;不思量&#xff0c;自难忘 6年资深前端主管一枚&#xff0c;只分享技术干货&#xff0c;项目实战分享 关注博主不迷路~ 文章目录 JSAPI支付简介应用场景支付的对接准备工作开发流程必填参数预支付统一下单公众号授权获取用户信息微信支付&#xff08…

微信支付之JSAPI支付

首先看一下&#xff0c;微信支付关于jsapi的官方文档&#xff0c;相关接口&#xff0c;一共有下单&#xff0c;查询订单&#xff0c;关闭订单&#xff0c;调起jsapi支付&#xff0c;支付结果通知&#xff0c;申请退款&#xff0c;查询单笔退款&#xff0c;退款结果通知&#xf…

微信支付JSAPI

一、什么是JSAPI支付 JSAPI支付是指商户通过调用微信支付提供的JSAPI接口&#xff0c;在支付场景中调起微信支付模块完成收款。 应用场景有&#xff1a; 线下场所&#xff1a;调用接口生成二维码&#xff0c;用户扫描二维码后在微信浏览器中打开页面后完成支付 公众号场景&…

微信支付之JSAPI支付开发流程

JSAPI支付 前言准备开发1.流程说明2.下单&#xff08;预支付&#xff09;3.前端调起支付4.支付结果异步通知5.退款申请6.退款结果异步通知 结语 前言 最近项目涉及到微信支付的功能&#xff0c;在这里简单分享下整体的开发流程,这里要介绍的是JSAPI支付。 JSAPI网页支付&#…

FME是一个好东东

FME产品分为三个层次&#xff1a; 一、入门级 1、特点&#xff1a;支持常见的GIS软件的数据交换&#xff0c;如 MapInfo TAB, DGN, DXF, DWG, SDTS, SHP, and TIGER&#xff1b;可以运行大部分函数&#xff08;Funtion和Factory&#xff09;&#xff1b;不支持由Plug-in开发的第…

黑马程序员Maven学习笔记

前言 这里是黑马程序员Maven学习笔记分享&#xff0c;这是视频链接。 我还有其它前端内容的笔记&#xff0c;有需要可以查看。 文章目录 前言基础Maven简介Maven是什么Maven的作用 Maven的下载Maven的基础概念仓库坐标本地仓库配置远程仓库的配置 第一个Maven项目Maven的项目…

MAEKDOWN

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

谷粒商城前端笔记

前端笔记 JavaScript ES6 ECMAScript6.0&#xff08;以下简称ES6&#xff0c;ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本&#xff09;&#xff0c;是JavaScript语言的下一代标准&#xff0c;2015年6月正式发布&#xff0c;从ES6开始的版本号采用年号&#xff0c;如…

谷粒商城-分布式基础【业务编写】

谷粒商城-分布式基础篇【环境准备】谷粒商城-分布式基础【业务编写】谷粒商城-分布式高级篇【业务编写】持续更新谷粒商城-分布式高级篇-ElasticSearch谷粒商城-分布式高级篇-分布式锁与缓存项目托管于gitee 一、三级分类 此处三级分类最起码得启动renren-fast、nacos、gate…

1. 谷粒商城架构

架构图 解析 客户通过任意客户端&#xff08;app/Web&#xff09;向服务器发送请求&#xff0c; 请求首先来到Nginx集群&#xff0c;Nginx将请求转交给Api网关&#xff08;SpringCloud Gateway&#xff09;, Api网关&#xff1a; 可以根据当前请求&#xff0c;动态路由到指…

谷粒商城详细笔记

前言 mysql安装在腾讯云 redis安装在本地虚拟机master上 运行时&#xff0c;renren-fast这个项目要到单独开个idea窗口打开。 一、项目简介 1、项目微服务架构图 微服务&#xff1a;拒绝大型单体应用&#xff0c;基于业务边界进行服务微化拆分&#xff0c;各个服务独立部…

谷粒商城之分布式基础(二)

6 商品服务 6.1 三级分类 商城的商品页面展示是一个三级分类的。有一级分类、二级分类、三级分类。这就是我们接下来要进行的操作。 6.1.1 数据库 首先我们在gulimall_pms这个数据库中的pms_category这个表下插入数据 商品三级分类SQL代码 6.1.2 查出所有分类及其子分类 1…

麦克

品牌&#xff1a;InvenSense Kingstate RS PRO 灵敏度&#xff1a;-27到-44db之间 方向性&#xff1a;全方位、单向性、噪声消除 标准操作电压&#xff1a;1.5V到3.3V均有 安装方式&#xff1a;导线、表面贴装、通孔 输出阻抗大小&#xff1a;1.8K、2.2K、200欧、350欧…

Kubeedge Beehive 模块源码分析

文章目录 概述结构Model --- 消息模型Header --- 消息头Router --- 消息路由资源操作资源类型 Context --- 上下文ModuleContext --- 模块上下文MessageContext --- 消息上下文GlobalContext --- 全局上下文方法 Channel Context数据结构方法ModuleContext 接口实现AddModuleAd…

谷粒商城简介(1~5集)

谷粒商城简介&#xff08;1~5集&#xff09; 一、项目简介 1、项目背景 1&#xff09;、电商模式 市面上有 5 种常见的电商模式 B2B、B2C、C2B、C2C、O2O&#xff1b; 1、B2B 模式 B2B (Business to Business)&#xff0c; 是指商家与商家建立的商业关系。 如&#xff1a;阿…