前端支付宝授权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,接口请求成功会跳转到支付宝自带的支付确认页面,确认支付即可。

没有更多推荐了,返回首页