本文介绍了一个Vue开发的H5页面如何实现支付宝授权支付的详细过程。项目难点在于作为H5页面需要获取支付宝授权并调用API。关键步骤包括：通过User-Agent判断是否在支付宝环境中打开，调用后端接口获取access_token，引入阿里原生API，以及使用支付宝API进行转账和唤起支付。支付流程涉及订单创建、接口调用和用户确认支付等环节。
项目背景：项目是vue写的一个h5页面，主要功能就是用支付宝扫码跳转到项目页面，选择信用支付或转账支付，输入金额，计算费率，完成付款。
项目难点：页面是h5网页，用支付宝支付必须得到支付宝授权，调用支付宝的api，本地开发无法模拟支付宝环境，接口请求结果查看不到，只能通过抓包，或者直接把接口返回结果打印在页面上。
必要准备：线上服务器，测试用收款店铺支付宝账号，需要支付宝认证，模拟环境无法完成支付。
1. 了解前端 navigator 对象，控制台打开 network 点击任何请求查看
navigator.userAgent 会以字符串形式打印 User-Agent中的内容，这是普通浏览器的截图，当用户通过支付宝扫码打开h5页面时，User-Agent对象中会多出 alipayclient 字符串，注意，会有字母会有大小写，可以用toLowerCase()，将整个字符串转化为小写，通过这个字符串，判定用户是否用支付宝打开，若不是支付宝打开，不能进行支付宝授权，支付功能也相应的不能完成，若是支付宝打开，则能进行支付宝授权，调用相关支付宝api。
代码截图
最低0.47元/天 解锁文章
扫一扫
3151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
