前端支付宝授权h5页面完成支付

项目背景：项目是vue写的一个h5页面，主要功能就是用支付宝扫码跳转到项目页面，选择信用支付或转账支付，输入金额，计算费率，完成付款。

项目难点：页面是h5网页，用支付宝支付必须得到支付宝授权，调用支付宝的api，本地开发无法模拟支付宝环境，接口请求结果查看不到，只能通过抓包，或者直接把接口返回结果打印在页面上。

必要准备：线上服务器，测试用收款店铺支付宝账号，需要支付宝认证，模拟环境无法完成支付。

1. 了解前端 navigator 对象，控制台打开 network 点击任何请求查看

navigator.userAgent 会以字符串形式打印 User-Agent中的内容，这是普通浏览器的截图，当用户通过支付宝扫码打开h5页面时，User-Agent对象中会多出 alipayclient 字符串，注意，会有字母会有大小写，可以用toLowerCase()，将整个字符串转化为小写，通过这个字符串，判定用户是否用支付宝打开，若不是支付宝打开，不能进行支付宝授权，支付功能也相应的不能完成，若是支付宝打开，则能进行支付宝授权，调用相关支付宝api。

代码截图

买一送一，window.isAliPay是判断是否支付宝打开，isWeixin是判断是否微信打开，判断成功后保存在全局window中，整个项目都能调用，这段代码可以放在index.html中。

2.判断是支付宝打开后，就可以调用后端接口了，接口怎么写可以参考官方文档https://docs.open.alipay.com/289/105656，主要功能就是拿到用户信息，后端返回accoss_token，后面调用接口的时候需要用户信息可以从token里面解析出来。

3.安装阿里原生api，原生api文档地址http://myjsapi.alipay.com/alipayjsapi/index.html，里面讲的挺详细的，安装方法就是在index.html里引入，PS我的是单页面开发，所以只有一个index.html，如果是原生开发，就在页面头部引入吧，如图

4.转账支付，转账支付类似平常的支付宝扫付款吗余额付钱一样，但是在网页上做这个功能，首先需要拿到收款人的支付宝链接地址，这个需要后端接口提供，拿到后，前端可以通过点击时间跳转到支付宝app的转账页面，前端代码如图

这里的AliWithdrawUrl就是前面说的请求接口获取收款人收款链接，成功触发这个函数后，h5会跳转到支付宝转账付款页面。

5.通过支付宝api唤起支付宝付款，这类支付可以使用信用卡花呗支付，调用支付宝api：ap.tradePay，这个操作相当于直接唤起了支付宝选择银行卡支付那个页面，官方文档写法

这里的tradeNO是订单号，所以正常开发需要先创建订单

第一个接口创建 create_order ，创建店铺收款的订单，第二个 create_pay_record ，创建这次支付单，拿到tradeNO，接口请求成功会跳转到支付宝自带的支付确认页面，确认支付即可。