1. 前言
- 之前写了篇单独的小程序支付
- 但是问这前端支付的挺多的,所以再来一遍吧
- 支付是确实用的挺多的 但也确实不难
- pc 端支付
2. 前后端的支付那些事
- 其实前端也就调下接口,其他的都是后端改的,
- 支付类的必须有营业执照,管控的严,你懂得
- 支付类功能前期要准备非常多的工作
- 微信支付流程
- 蚂蚁金服支付
- 支付流程可以自己看看,这个事情也无所谓前后端
3.demo是vue3+ H5应用
4.其他浏览器支付
- 其他浏览器支付
- 前端提交申请 判断是微信还是其他浏览器
- params支付参数 接口文档有
payApi
封装的支付请求,获取后端返回的支付信息- 判断是 哪种支付
支付宝
返回的是一个网页的html
,直接打开就行- 微信支付返回的是一个链接,直接打开链接就行
- 以上2种都会自动弹出支付相关的界面
- proxy是挂载的全局组件,因为vue3没有this了嘛
- useStore.userInfo
pinia
存储的用户信息
5. 微信内置浏览器支付
- 微信内置浏览器支付
- 接着上面的支付方式判断,进入这个微信内置浏览器支付
- 判断
WeixinJSBridge
是否识别,也就是判断当前是否是微信内置浏览器wxPayData
是发起支付请求,后端返回的支付信息- 第三方支付使用
WeixinJSBridge.invoke()
发起支付- 得到返回结果
- 注意这个支付的参数容易出问题,及时看文档
参考资料
小程序支付
微信支付流程
蚂蚁金服支付