前端|微信公众号支付(JSAPI) html5|微信公众平台|java

六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，项目实战分享
关注博主不迷路~

【前端|微信公众号支付(JSAPI)】
文章目录

JSAPI支付简介
应用场景
支付的对接
- 准备工作
- 开发流程
- - 必填参数
  - 预支付统一下单
  - 公众号授权
  - 获取用户信息
  - 微信支付（JSAPI）

JSAPI支付简介 JSAPI支付是指商户通过调用微信支付提供的JSAPI接口，在支付场景中调起微信支付模块完成收款。
应用场景

线下场所：调用接口生成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付。
公众号场景：用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付。
PC网站场景：在网站中展示二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付。

支付的对接准备工作要想支持微信支付,必须拥有两个账号：

微信公众已认证的服务号,并且需要开通微信支付该能（必须是企业才有资格申请哦）
微信商户平台账号
*这两个账号一个都不能少

开发流程微信支付原理（说白了就是调用官方文档的“统一下单”接口,之后将微信服务器返回的参数做个加工后,返回到前台（JSP页面）,就OK了。咱们要做的就是想方设法的凑齐统一下单的所有参数。
必填参数
appid APPID
mch_id 商户ID
nonce_str 随机字符串
sign 签名
body 所支付的名称
out_trade_no 自己所提供的订单号,需要唯一
total_fee 支付金额
spbill_create_ip IP地址
notify_url 回调地址
trade_type 支付类型
openid 支付人的微信公众号对应的唯一标识
参数的获取呢主要是用其中的WXPayUtil工具类中的一些方法
好了开始咱们的取值之旅了~
预支付统一下单

文章图片

文章图片

公众号授权

文章图片

获取用户信息

文章图片

前台页面配置（主要为获取授权）在此处主要为打开首页跳转微信的授权地址然后微信回调到页面且携带参数code
如：
当前访问地址：http://aaa.com
微信回调地址：http://aaa.com?code=xxxxx
getAuth(code)为请求后台的auth方法来获取token和用户的openid 然后再调用getUserInfo()来请求后台info接口来获取用户信息，将用户的信息存入缓存