微信公众号支付(JSAPI)

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

---

JSAPI支付简介

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

应用场景

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

支付的对接

准备工作

要想支持微信支付,必须拥有两个账号：

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

开发流程

微信支付原理（说白了就是调用官方文档的“统一下单”接口,之后将微信服务器返回的参数做个加工后,返回到前台（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接口来获取用户信息，将用户的信息存入缓存

微信支付（JSAPI）

接下来才是重点，也就是支付的实现，下图的onPay()函数执行了两步操作

1. 调用wxPay()函数，带参为本地缓存的用户openid（也就是调用后台预支付的API接口）生成预支付订单
2. 然后调用微信内置浏览器的组件WeixinJSBridge.invoke()将刚才后台返回的数据参数带入来发起支付
   如图所示：
   
   发起支付

完成！

✨原 创 不 易 ， 还 希 望 各 位 支 持
👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！