开篇前絮叨两句,也算是我个人的一个记录吧,整体实现了微信扫码支付,但还有很多细节和提升的点,为了简介明了,只将整体过程给大家串一下,如果有大佬看到也要多多指点,不懂的也可以私信我。如果想了解微信登陆的,在分栏微信相关也有文章,大家可以看一下
实现应用微信支付,你需要有微信商户平台:pay.weixin.qq.com。申请公众号(服务号)认证费300,才能开通微信支付。在微信支付中需要有公众号id和密钥还有商户id和密钥,如果你没有上线应用把整体流程明白就可以,当然,朋友公司之类有的话更好。
先将一些用到的链接地址放在这里,方便大家查看
微信支付申请流程:pay.weixin.qq.com/guide/qrcod…
常用支付方式文档:pay.weixin.qq.com/wiki/doc/ap…
案例演示:pay.weixin.qq.com/guide/webba…
扫码支付文档:pay.weixin.qq.com/wiki/doc/ap…
微信支付时序图:pay.weixin.qq.com/wiki/doc/ap…
统一下单文档:pay.weixin.qq.com/wiki/doc/ap…
签名算法规范:pay.weixin.qq.com/wiki/doc/ap…
签名校验工具:pay.weixin.qq.com/wiki/doc/ap…
NatAPP内网穿透:natapp.cn/
上代码之前需要给大家讲解一些必要知识,不然直接来代码你还是一头雾水,完成了功能但不明白这个过程也是白费
Step1:微信网站扫码支付介绍
Stpe1.1:名词理解
appid:公众号唯一表示
appsecret:公众号密钥
mch_id:商户号,申请微信支付的时候分配的
key:支付交易过程中生成签名的密钥, 设置路径: 微信商户平台(pay.wexin.qq.com)–>账户中心–>账户设置–>API安全–>密钥设置
Step1.2:微信支付交互方式
- POST方式提交
- XML格式的协议
- 签名算法MD5
- 交互业务规则 先判断协议字段返回,再判断业务返回,最后判断交易状态
接口交易单位 分
交易类型:JSAPI– 公众号支付、NATIVE–原生扫码支付、APP-app支付 - 商户订单号规则:商户支付的订单号由商户自定义生成,仅支持使用字母、数字、中划线-、下划线_、竖线|、星号*这些英文半角字符的组合,请勿使用汉字或全角等特殊字符,微信支付要求商户订单号保持唯一性
Step1.3:时序图讲解(重点!)
顶部有微信官方的时序图链接。这个图一定要明白,因为下面我上代码会告诉这是时序中的第几步,看的图就容易明白代码了
时序图说白了就是你一个操作的流程,这个过程中会经过哪个对象的方法,返回什么操作等的过程
顺序的时序图:就是交互流程图(把大象装进冰箱分几步)
对象(Object)、生命线(Lifeline)、激活(Activation)、消息(Message)
对象:时序图中的对象在交互中扮演的角色就是对象,使用矩形将对象名称包含起来, 名称下有下划线
生命线:生命线是一条垂直的虚线, 这条虚线表示对象的存在, 在时序图中, 每个对象都有生命线
激活:代表时序图中对象执行一项操作的时期, 表示该对象被占用以完成某个任务,当对象处于激活时期, 生命线可以拓宽为矩形
消息:对象之间的交互是通过相互发消息来实现的,箭头上面标出消息名,一个对象可以请求(要求)另一个对象做某件事件。消息从源对象指向目标对象,消息一旦发送便将控制从源对象转移到目标对象,息的阅读顺序是严格自上而下的
消息交互中的实线:请求消息
消息交互中的虚线:响应返回消息
自己调用自己的方法:反身消息
用我的白话给大家讲一下:
1.用户下单,进入购买页面,点击购买进入后台
2.后台收到请求,生成订单。大家肯定都用淘宝买过东西对吧,你购买东西但发现钱不够,这个订单在一段时间内都存在等待你支付,但这个订单在数据库中已经申城了,之后你支付后订单才会修改状态
3.后台调微信统一下单,不光你后台生成订单,微信也生成预订单号
4.微信返回code_url支付交易链接,通过这个值生成二维码图片
5.将这个二维码返回给前台用户,用户进行扫一扫支付。这里是直接和微信交互的
6.微信支付系统验证有效性,验证后返回用户是否确认支付
7.用户确认,输密码。返回给微信支付系统授权
8.验证授权,完成支付交易
9.返回支付结果,发送短信和微信消息提示。这里是并行处理,一个通知用户,一个通知后台
10.异步通知后台支付结果,会携带一些参数,订单号等。收到结果后告知接收情况
11.如果后台宕机,微信会定时发送通知,后台可以做定时任务,用户支付了但订单状态未修改,定时调微信的接口,调API有没有成功做操作
下面的一些流程都是看业务情况
Step2:统一下单
商户系统先调用该接口在微信支付服务后台生成预支付交易订单,返回正确的预支付交易会标识后再按扫码、JSAPI、APP等不同场景生成交易串调起支付。这里是时序图第二步
顶部链接文档:pay.weixin.qq.com/wiki/doc/ap…
这里上个统一下单的流程图
1.告诉微信支付你要下单
2.微信支付系统数据库生成一条订单,但未支付。你的后台也是生成一条未支付订单
3.用户支付后微信支付将订单更新为已支付
4.微信调后台告诉我们已经支付了
5.后台再返回确认信息等
时序图和统一下单的流程基本都在这了,一定要明白,一定要清楚!
Step2.1:统一下单请求
向微信支付系统发送http请求,我们需要组成一个xml格式的数据消息,里面包括一些必须的参数
官方例子
大部分人在做微信支付都是错在这里,签名方式不对,或者传输的一些信息不符合规范等,这里只是先给大家讲解一下,下面实战都会说清楚的。
Stpe2.2:统一下单返回消息
返回一些我们需要的参数,也就是code_url,如果你发送的xml不正确会返回错误提示
Step3:战前准备
Step3.1:数据库设计
1 | sql复制代码视频表 也可以认为是商品表 里面的一些字段是按照我项目需求来的,有一些你感觉用不到的可以不加,如果你有自己的数据库设计更好 |
1 | less复制代码订单表 用户表就不给大家上了 无非就是跟了个用户主键 自己创一个就可以了 |
Step3.2:实体类
自行加上get set方法
1 | swift复制代码/** |
1 | scss复制代码/** |
1 | scala复制代码/** |
Step3.3:配置文件
******代表用自己的微信配置
1 | ini复制代码server.port=8089 |
Step3.4:微信配置类
自行加上get、set方法
1 | kotlin复制代码/** |
Step3.5:封装http、get、post方法
相关依赖
1 | xml复制代码<!--HttpClient--> |
1 | scss复制代码/** |
Step3.6:微信支付工具类 xml转map mao转xml 生成签名
微信官方也有java相关的工具类,基本给大家的无差别,这里我就直接给大家上代码用
1 | ini复制代码public class WXPayUtil { |
Step3.7:返回工具类
1 | typescript复制代码/** |
1 | scss复制代码 |
Step4:生成订单
一些其它像查询用户信息和查询视频信息的操作就不给大家上了,就是简单查询,这里主要做订单的,避免大家看不懂下面代码的一些方法
Step4.1:Service层
1 | java复制代码public interface VideoOrderService { |
Step4.2:mapper文件
1 | xml复制代码<?xml version="1.0" encoding="UTF-8" ?> |
Step5:控制层
一切准备工作完成后重点要来了!
控制层先这么 稍后再更新
1 | less复制代码/** |
Step6:ServiceImpl实现
这里的操作是先保证下单成功,数据库能生成数据
注释的地方都是需要更新的
完成这一步可以先启动一下,调一下接口 看看数据能否添加成功
1 | scss复制代码@Service |
Step6.1:签名开发
orderserviceimpl下再写一个统一下单方法 生成签名
1 | csharp复制代码/** |
打断点调试一下
这里很重要,如果你签名生成的不对,下面是无法进行的
得到payXml值之后复制一下 去微信支付文档签名校验一下,如果能通过,那么恭喜你,重要的第一步完成了。链接在顶部!
Step6.2:发送请求
签名校验通过后给微信发送请求。这里都是时序图的第二步
orderStr就是微信返回给我们的信息,如果提示SUCCESS表示成功下单
Step6.3:拿取code_url
主要是说明一下,时序图第三步,微信生成订单后返回这样的值,里面包含code_url,就是二维码生成链接,我们需要这个值来生成二维码
Step7:更新控制层生成二维码
Step7.1:添加google二维码依赖
1 | xml复制代码 <dependency> |
Step7.2:更新控制层
现在就明白service为什么使用String的返回了吧 就是需要拿到code_url这个值
1 | ini复制代码@GetMapping("saveOrder") |
Step7.3:生成二维码
重新启动项目,使用postman测试,老版的不显示二维码,生成的是乱码,需要去浏览器访问,新版的可以显示二维码
出现下面的二维码你就可以打开手机扫码了!
之后的步骤大家都明白吧,就是用户和微信交互了,确认支付输密码之类的。直接到时序图的第八步
Step8:内网穿透接收消息
微信完成预支付信息后,给用户发消息的同时,还给我们后台发消息,告诉我们支付成功了,我们拿到这个信息后修改订单状态就完事了,但问题是我们是本地开发, 怎样接收发来的信息呢?
使用工具NatApp,顶部有链接,使用方法非常简单,使用免费隧道,但每次启动都是随机隧道,所以每次需要改配置文件
前面的域名: rrgdbr.natappfree.cc 就代理了本地 像我这样就能正常访问本地项目
rrgdbr.natappfree.cc/api/v1/pri/…
注意配置文件也要修改,可能有些懵,我这个值是在什么时候告诉微信支付系统的呢?就是在我们生成签名第一次给微信发统一下单微信那边就记录了
Step9:接收微信确认消息
路径一定要对啊,别你写回调地址和你控制层接收消息的路径不一致,不然怎么你也收不到消息,第一次我就脑瘫了,路径写错了,打断点试了半天也没进到控制层,浪费了好几毛钱。。。
下面的代码简单说几句,都有注释,流程就是收到请求后验证一下签名,有没有错误信息什么的,之后更新订单状态,完事再告诉微信,我这里OK了!就行了。如果不告诉微信它会一直给你发消息,直到你告诉他。
1 | scss复制代码@Controller |
序言:整体微信支付就是这样,但还有细节的地方,验证订单、或者某笔交易出现问题都没有做。还有小伙伴会问。那我前台支付成功后前台是怎么给用户显示支付OK了,你这里方法也没告诉前台的啊。其实这个操作是前台来发请求的,循环的向后台发请求,查询用户这笔订单状态,变成1就不发请求了,然后给用户显示支付OK了。如果有小伙伴需要源码的可以私信,感谢!
感觉不错的大佬点个赞呗~ 手敲截图演示不易
本文转载自: 掘金