微信公众号支付(JSAPI)
六年代码两茫茫,不思量,自难忘
6年资深前端主管一枚,只分享技术干货,项目实战分享
关注博主不迷路~
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接口来获取用户信息,将用户的信息存入缓存
微信支付(JSAPI)
接下来才是重点,也就是支付的实现,下图的onPay()函数执行了两步操作
- 调用wxPay()函数,带参为本地缓存的用户openid(也就是调用后台预支付的API接口)生成预支付订单
- 然后调用微信内置浏览器的组件WeixinJSBridge.invoke()将刚才后台返回的数据参数带入来发起支付
如图所示:
发起支付
完成!
✨原 创 不 易 , 还 希 望 各 位 支 持
👍 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 !
⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 !
✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 !
相关文章
- 后端解决 微信H5支付 商户参数格式错误 方法
- php 一个文件搞定支付宝支付,微信支付
- 微信小程序加密数据(encryptedData)解密中的PHP代码,php7.1报错
- 微信小程序答题,怎么设计页面渲染,答完一题,跳到下一题
- 坑爹的微信支付v3,其实没有那么坑
- JS微信分享不好写?来封装一下
- Android调用微信登陆、分享、支付
- WeMall 3.5 更新,集成微信支付 bae上直接创建
- java微信公众号JSAPI支付以及所遇到的坑
- 亲历H5移动端游戏微信支付接入及那些坑(四)——参考文档
- iOS中 最新微信支付/最全的微信支付教程详解
- 转-Android微信支付
- 微信 h5页面 跳转微信小程序 wx-open-launch-weapp注意事项
- 微信小程序思维导图
- 微信支付官方SDK V3 .NET版的坑
- android app 集成 支付宝支付 微信支付
- 微信支付(转载二)
- 微信小程序----实现YDUI的ScrollNav组件(滚动导航)
- [FAQ] FastAdmin epay 微信公众号支付 JSAPI 支付必须传 openid ?
- 前端面试题:商城项目中有写到调用微信,支付宝支付,简单讲述一下这个支付与后台对接的过程,微信支付的原理
- 进行微信小程序开发前的准备工作
- Atitit 微信支付 支付结果通用通知
- SAP系统和微信集成的系列教程之七:使用Redis存储微信用户和公众号的对话记录
- 微信公众号支付/微信内置浏览器微信h5支付报错:当前页面的URL未注册:https:∥xxxxxx!解决方法一看就会
- uni——微信支付
- Python微信公众号教程基础篇——收发文本消息
- 微信公众号支付报文示例