手机网站支付宝接入iframe无法唤醒支付宝app

news/2024/5/9 19:51:43/文章来源:https://blog.csdn.net/qq_34414876/article/details/84988287

如果在正常的form表单中唤醒不了支付宝app只能用网页进行支付请参考如下:

商家在网页中调用支付宝提供的网页支付接口调起支付宝客户端内的支付模块,商家网页会跳转到支付宝中完成支付,支付完后跳回到商家网页内,最后展示支付结果。若无法唤起支付宝客户端,则在一定的时间后会自动进入网页支付流程。

注意:

若接入的是新版本手机网站支付接口(alipay.trade.wap.pay),用户在安装支付宝钱包的情况下,调用手机网站支付接口默认会唤起钱包支付;若接入的是手机网站支付老版本(alipay.wap.create.direct.pay.by.user ),那么需要在请求参数中加入app_pay参数并赋值为Y,详情参见 手机网站支付老版本文档;

开发者需要关注安装了支付宝和未安装支付宝的两种测试场景,对于在手机浏览器唤起H5页面的模式下,如果安装了支付宝却没有唤起,大部分原因是当前浏览器不在支付宝配置的白名单内;

对于商户app内嵌webview中的支付场景,建议集成支付宝App支付产品。或者您可以使用手机网站支付转Native支付的方案,不建议在您的APP中直接接入手机网站支付。

目前在手机网站支付时,通过唤起支付宝app收银台的方式去支付,可以大大提高支付成功率,故不建议禁止唤起支付宝app,目前对外也没有提供禁止唤起支付宝app的方法。
 

如果在iframe拉不起支付宝app进行支付,只能网页支付参考如下解决:

支付宝手机网站的sdk原理是在后台构造出一个form表单然后可以用post或者get的方法提交到支付宝进行支付的拉起的。

然而一般在H5游戏或者手机网站中进行支付的跳转的话,唤醒了app支付完成以后要手动切回原来的页面所以体验会特别差。

这时候我们就会把支付宝的链接塞到一个iframe中,在iframe中进行支付,完成以后将这个iframe移除,这样用户体验就会很好。

在安卓中拉起支付效果如下图

然后支付完成以后点击返回游戏就可以关闭这个iframe,然后可以返回自己的H5游戏或者网站

然而我们在safari浏览器将其放入在iframe中的话是无法唤醒支付宝,他只会显示手机网站支付,在UC浏览器,安卓浏览器将form表单塞进iframe是可以唤醒支付宝app进行支付的。所以这时候我们要做个判断如果是safari浏览器的话,我们在iframe中是无法拉起支付宝APP的所以我们只能用跳转的方式,将支付宝构造的form表单转换成一条URL去请求支付宝,进行支付的跳转拉起。

在手机网站支付的PHP版本sdk中,支付拉起的form表单是:

<form id='alipaysubmit' name='alipaysubmit' action='https:\/\/openapi.alipay.com\/gateway.do?charset=UTF-8' method='POST'><input type='hidden' name='biz_content' value='{\"productCode\":\"QUICK_WAP_PAY\",\"app_pay\":\"Y\",\"body\":\"\u5145\u503c\u6e38\u620f\u5e01\",\"subject\":\"\u5145\u503c\u6e38\u620f\u5e01\",\"out_trade_no\":\"PL20181210183902Y234CX12715751Z\",\"total_amount\":\"8.00\",\"timeout_express\":\"1m\"}'\/><input type='hidden' name='app_id' value='2018011601901714'\/><input type='hidden' name='version' value='1.0'\/><input type='hidden' name='format' value='json'\/><input type='hidden' name='sign_type' value='RSA2'\/><input type='hidden' name='method' value='alipay.trade.wap.pay'\/><input type='hidden' name='timestamp' value='2018-12-10 18:39:04'\/><input type='hidden' name='alipay_sdk' value='alipay-sdk-php-20161101'\/><input type='hidden' name='notify_url' value='http:\/\/yh-api.himengyou.com\/bank\/notify\/pay_way_id\/2'\/><input type='hidden' name='return_url' value='https:\/\/m.himengyou.com\/recharge\/paySuccess\/pay_way_id\/2'\/><input type='hidden' name='charset' value='UTF-8'\/><input type='hidden' name='sign' value='YVT3mo\/GrnlFxfB8K4aSc70WZVgbFwkPXN3XYvcWDc3jObbZ6GX5\/h1k3\/LWrjZcFzfdP5evCsRhclz9I22gM7eBUFsYuqOP3cy3eiDN6NcuHNwcujUpea+BgebHOAVdgkmokbWZAG20rD3Sp\/3z4Gf0xS+JNUKhfMFNzK\/NdrglY4\/zuWbwBuMbaxMvdNt1GHYYEBXFspAEosjjNeIxmbLXBuTKRb4Eyz3+X66J2ZM\/dIlbeuY6EXXp8LYAYN7X3mCTT1jzQtFZja4eJGhSkZlVUyb9EbOr+bIIMpzFRpzdGOJBfnIvR2IAIReov7FFMChmP\/CEUpM413qfQxYbRw=='\/><input type='submit' value='ok' style='display:none;''><\/form><script>document.forms['alipaysubmit'].submit();<\/script>

所以我们要把这个表单用一条url的形式对支付宝进行拉起

       $.ajax({url:你的支付地址,data:支付参数,type:"post",dataType:"jsonp",success:function(res){
//res.data.fromUrl就是在phpsdk中给你构造的form表单if(res.data.fromUrl){  //表单提交形式var d = $(res.data.fromUrl)var e=""
//将form表单组成一段url  Array.prototype.slice.call($(d).find("input[type=hidden]")).forEach(function(a) {e += a.name + "=" + encodeURIComponent(a.value) + "&"})e = e.substring(0, e.length - 1);var f = $(d).attr("action").split("?")[0] + "?" + e
//将组成的url进行urlencodevar url = encodeURI(f);
//因为组成的支付URL还会进行一次跳转,才会进行下单,
//如果让它在iframe中跳转就可能唤醒不了支付宝APP,
//所以这个接口是为了获取他跳转之后的真实地址var u = "/Paygate/getAlipay?url=" + url;
//如果是safari浏览器的话他是无法在iframe中拉起app支付的,
//所以只能用跳转location.href的方法去跳转网页进行支付宝app的拉起,
//其他浏览器是可以,如果后期找到哪些浏览器不行,可以告诉博主if(!isSafari()){
//这个是返回游戏的按钮 以及创建一个新的iframe将支付地址传入
//这时候将上面接口的真实地址插入iframe中var h = '<div id="alipaybox" style="margin: auto; position: absolute; background-color:#fff;top: 0px; left: 0px;border: none; z-index: 10001;width:100%;height:100%;"><div class="close_alipay" onclick="closePayBox()" style="position: absolute;right: 10px;bottom: 40px;cursor: pointer;background: rgba(237, 115, 32, 0.8);color: #fff;width: 6rem;height: 6rem;border-radius: 50%;font-size: 1.2rem;text-align: center;line-height: 6rem;">返回游戏</div><iframe scrolling="no" id="h5PayDiv" src=' + u + ' frameborder="0" width="100%" height="100%"></iframe></div>';$("body").append(h);}else{location.href = u;}}}
})
//判断是否是isSafari浏览器function isSafari() {return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)}
//点击返回游戏移除iframefunction closePayBox(){$("#alipaybox").remove();}
//获取支付宝链接支付的跳转地址,将它放入iframe中class PaygateController  {function getAlipayAction(){$url = $_GET['url'];unset($_GET['url']);foreach($_GET as $key => $item){$url .='&'.$key.'='.$item;}$headers = get_headers($url,1);header('location:'.$headers['Location']);}}

如上就可以在各个浏览器中拉起支付宝app进行支付了,除了safari浏览器是要用url跳转的方式拉起,其他浏览器都可以在iframe进行支付宝app的拉起,并且用iframe可以提供良好的用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_897477.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于大型网站技术演进的思考(一)--存储的瓶颈(1)

前不久公司请来了位互联网界的技术大牛跟我们做了一次大型网站架构的培训&#xff0c;两天12个小时信息量非常大&#xff0c;知识的广度和难度也非常大&#xff0c;培训完后我很难完整理出全部听到的知识&#xff0c;今天我换了个思路是回味这次培训&#xff0c;这个思路就是通…

Asp.net FMS 开发视频网站

昨天看到利用FMS&#xff08;Flash Media Server&#xff09;做在线视频录制的资料&#xff0c;地址&#xff1a;http://www.cincn.com/article.asp?id15&#xff0c;还有播放流式FLV文件的资料&#xff0c;地址&#xff1a;http://blogs.ugidotnet.org/kfra/archive/2006/10/…

CDN系统对网站的性能有极大的提升

CDN系统对网站的性能有极大的提升 打开一个网站 我们只是请求了一个页面。单个页面&#xff0c;实际上所有文件都是一个新的请求。以新浪为例一共发起了35个请求。 这35个请求中。只有一个动态内容。其它均为静态。这样服务器实际上被访问35次、 如果我们把这些静态资源做到CDN…

怎么在ESC服务器上发布一个网站

*注&#xff1a;本文采用的是jsp的网站 *物料准备&#xff1a;*一个有公网ip的服务器&#xff08;包含jdk环境&#xff09;&#xff0c;一个域名&#xff0c;一个能跑通的项目 *所用软件&#xff1a;*idea、Navicat 、宝塔面板 在本地运行项目&#xff0c;确认可以跑通&#…

如何快速搭建自己的博客网站?

拥有一台服务器 我们可以选择在虚拟机搭建服务器&#xff0c;也可以选择购买云服务器。如果想要让网站长时间保持运行状态&#xff0c;最好还是选择云服务器。以阿里云服务器为例&#xff0c;我们可以根据自己的需要&#xff0c;购买合适的服务器配置和时间&#xff08;这里我…

最新版chorme安装adblock方法解决无法从该网站添加应用、扩展程序和用户脚本

解决最新版chorme安装插件问题。无法从该网站添加应用、扩展程序和用户脚本 自从用了chorme浏览器后&#xff0c;界面干爽清净&#xff0c;浏览器启动速度超级快&#xff0c;就不想用360了&#xff0c;无奈没用广告屏蔽软件&#xff0c;想用chorme插件又必须翻墙。无奈国内又不…

关于网站设计中网页情景化设计的方法介绍(图)-新华站长网

在信息化时代的现在&#xff0c;网络在人们生活已经产生了巨大的影响力&#xff0c;网络也在逐渐改变着人们的生活和习惯。然而&#xff0c;在如今信息大爆炸的今天&#xff0c;面对海量的网络信息&#xff0c;怎样才能实现既能吸引用户眼球&#xff0c;又能快速准确地传达信息…

高并发高流量网站架构

转自&#xff1a; http://blog.csdn.net/smarttony/article/details/5874485 高并发高流量网站架构 Web2.0的兴起&#xff0c;掀起了互联网新一轮的网络创业大潮。以用户为导向的新网站建设概念&#xff0c;细分了网站功能和用户群&#xff0c;不仅成功的造就了一大批新生的网…

创建站点和项目文件

今天最大的收获就是学了创建站点&#xff08;虽然非常的菜鸟&#xff0c;现在才弄&#xff09;&#xff0c;发现自己想的太复杂了。站点的创建主要是为了让网页结构更清晰&#xff0c;防止链接的地址出错。 顺便复习了一下昨天学的内容&#xff0c;仅仅才一天就忘的差不多了&a…

cjbsxs-建立网站的全过程(…

原文地址&#xff1a;cjbsxs-建立网站的全过程&#xff08;免费空间型&#xff09;&#xff01; 作者&#xff1a;cjbsxs HOT&#xff01;快速拥有自己的网站&#xff01; 继之前的文章&#xff0c;感觉介绍不够详细。为此再出新章&#xff1a; 一个完整的网站包括&#xff1a;…

vscode 调试html页面无法访问此网站 localhost 拒绝了我们的连接请求

这种情况突然发生&#xff0c;找了半天解决办法&#xff0c;在vs运行是这样&#xff0c;在Hbulider就能顺利运行 后来解决了&#xff0c;因为项目文件夹里多了一个文件夹 看到这个.vscode了吗&#xff0c;直接删掉 再按f5运行就可以了 暂时还没去研究这个文件夹的作用&#x…

Thinkphp5个人技术博客网站源码

简介&#xff1a; 技术交流分享个人博客网站源码&#xff0c;TP5.0博客系统源码&#xff0c;带QQ一键登录,。 安装说明&#xff1a; 1、将程序上传到网站根目录。 2、导入数据库文件 boke.sql 3、application/database.php 文件&#xff0c; 将自己的mysql数据库信息配置好…

最新PHP搞笑文字表情包在线制作网站源码

介绍: PHP搞笑装逼文字表情在线制作网站源码。 使用说明&#xff1a; 上传源码到空间即可 修改导航在文件header.php 修改标题在文件config.php 下载方式: lanzou.com/iQMjA01zpv7a

2022随身助手API接口网站PHP源码

介绍: 随身助手API接口网站PHP源码&#xff0c;本次更新了271个可用接口&#xff0c;现在开源给大家。 下载方式: lanzou.com/iYfrG020clpg

最新杰奇小说网站程序2.3可用版+淡绿唯美模板

介绍: 杰奇小说2.3独家定制版淡绿唯美模板&#xff0c;支持无人自动采集&#xff0c;带关关采集器&#xff0c;全站程序打包。 源码介绍&#xff1a; 1.此套程序采用杰奇小说系统内核做的&#xff0c;带手机端&#xff0c;可以设置mianfei章节和shoufei章节&#xff0c;模板…

2022新超级蜘蛛池站群优化网站系统源码

介绍: 程序支持自动采集&#xff0c;高效化的优化利用PHP性能&#xff0c;使得运行流畅稳定&#xff0c;有内容无缓存刷新不变功能&#xff0c;节省硬盘&#xff0c;防止搜索引擎识别蜘蛛池。 可以自定义每个网站的风格&#xff0c;关键词、外链等。 安装教程&#xff1a;域…

数据分析、数据科学网站

1、数据分析网&#xff1a;https://www.afenxi.com/ 网站上有很多分析报告&#xff0c;深度进行分析&#xff0c;值得阅读学习&#xff01; 2、199IT中文互联网互联网数据咨询平台&#xff1a;http://www.199it.com/ 主要是研究报告&#xff0c;&#xff0c;涉及很多行业

国内真正免费的平面设计素材网站

1、觅图库 觅图库www.metoopic.com 一个国内主流的设计网站&#xff0c;免费的免抠素材和大量的设计模板都可免费使用&#xff0c;能够帮助设计新手和设计小白快速产出高质量的平面设计作品

AfterShip----最新Google Analytics A/B 测试 • 打造足以匹敌亚马逊的网站

亮点 1、剖析技术&#xff0c;学习掌握最新 Google Analytics A/B 测试技术 ? 2、展望趋势&#xff0c;了解国际品牌巨头如何部署网站监测代码 ? 3、干货实操&#xff0c;现场进行 Coding 教学 ? 欢迎对 Google Analytics 工具感兴趣或想进阶学习的同学参加。 有兴趣的小…