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

前端支付宝授权h5页面完成支付相关推荐

前端如何在H5页面调起微信支付
在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...
微信支付总结--小程序与H5页面微信支付
项目开发过程中,涉及到了微信支付功能,这里做一个详细的记录. 小程序和H5的后端代码是通用的,前端调用不同的代码实现,这里不是重点,会简单的给出相关的代码. 微信支付,官方给了开发文档,但是其中还是有 ...
前端开发：H5页面判断是否在微信、原生iOS、原生Android中打开的使用
前言在前端开发的时候,关于和原生端或者微信端等交互的时候,会涉及到页面判断在不同的客户端打开不同的效果,这就是关于H5页面中判断在哪种客户端打开的范畴.主要是通过获取当前打开的客户端类型在进行处理的 ...
前端——》手机H5页面九宫格抽奖（含概率及奖品配置）
页面效果 :页面有6次抽奖机会,每次抽完奖会弹出领奖小弹窗(可选择不要),并在下方的已获列表中展示已获得的奖品列表第一步,核心js:注释都在代码上核心代码一:lottery.js 这个lotter ...
uni-app | 小程序嵌入H5页面实现支付功能
文章目录
支付宝调用H5支付页面返回6002网络连接错误
项目中集成支付宝支付,按照官方文档稳步进行,逐步调试当中明确PayTask.payV2(String payInfo,boolean b)这个方法,但是在手机上显示跳转到支付宝支付就没有了. 后来换了 ...
支付宝小程序跳转第三方H5页面
支付宝小程序跳转第三方H5页面基础API跳转 web-view my.ap.openURL web-view 和 my.ap.openURL 两者比较 my.ap.navigateToAlipayP ...
个人支付接口/支付宝H5拉起支付/转账
H5支付,个人支付宝使用H5拉起支付 ,即时支付到个人账户,无需手续费. 测试效果如下图: 原文链接: https://github.com/apppay/h5pay/blob/master/R ...
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 原文:企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 先看效果 1.本文演示的是 ...

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

前端支付宝授权h5页面完成支付相关推荐

最新文章

热门文章