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

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

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

注意：

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

开发者需要关注安装了支付宝和未安装支付宝的两种测试场景，对于在手机浏览器唤起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可以提供良好的用户体验。

手机网站支付宝接入iframe无法唤醒支付宝app相关推荐

2021年手机网站H5接入微信登陆,微信支付,支付宝支付,花呗支付,银行卡支付等,一次到位
看下面视频效果,代码教程已放在CSDN我的栏目,---东京买菜--中 H5手机网站开发接入微信支付,手机网站开发接入支付宝支付,吏上最最最详解,听了再不会,我去当和尚了
支付宝支付之扫码支付（电脑网站支付）、H5支付（手机网站支付）相关业务流程分析总结
前言在上一篇文章<微信支付之扫码支付.公众号支付.H5支付.小程序支付相关业务流程分析总结>中,分析和总结了微信支付相关支付类型的业务流程,这里作为与微信支付平起平坐不相伯仲的支付宝支付 ...
支付宝手机网站支付，app支付，PC端支付流程以及服务端php支付下单，回调流程详解
一.支付宝支付相关文档地址: 支付宝支付相关的文档地址:https://open.alipay.com/api 电脑网站支付:https://opendocs.alipay.com/open/270/ ...
支付宝接口开发-手机网站支付-沙箱测试
前面一段时间,因为公司业务需求,需要使用支付宝的手机网站支付接口,因为自己也是第一次使用这个,中间走了不少弯路,现在总结一下,希望对遇到同样问题的朋友有帮助. 第一步:登录蚂蚁金服开放平台蚂蚁金服开放 ...
Magento支付宝手机网站支付插件V6.0旗舰版发布，支持在微信中使用支付宝支付，订单重新支付功能！...
2019独角兽企业重金招聘Python工程师标准>>> 功能严格按照支付宝接口文档编写代码. 支付宝异步通知机制,确保订单状态及时更新,无丢失遗漏. 订单完美对接:支付后即使关掉支 ...
SpringBoot工程接入第三方支付渠道支付宝(C扫B支付)
目录 1.C扫B的概念 2.支付宝接口调研 2.1.产品列表 2.2.线下场所接入支付 3.配置支付宝沙箱环境 3.1.简介 3.2.注册开放平台账号 3.3.配置密钥 3.4.沙箱账号 4.生成二维 ...
闪聚支付第3章-支付宝接入指南
支付产品产品列表支付宝为普通商户提供如下支付产品: 产品介绍详见:https://b.alipay.com/signing/productSetV2.htm 1.当面付在国内线下场景,商家可通过 ...
手机网站支付转Native支付--Android
背景为了节约开发成本,很多Native-H5混合App采用手机网站支付的方式去实现支付模块.但手机网站支付的网络依赖比较严重,也通常需要经过更多的验证,这种种原因导致手机网站支付的成功率比Nativ ...
h5支付不能打开支付宝 ios_iOS 解决微信h5支付，支付宝h5支付无法直接返回APP的问题...
由于公司的业务需要,为了节省申请开通微信支付的时间和人力,公司决定使用微信h5支付.这样即节省了时间,同时以后所有的APP都能使用h5支付,既方便又快捷. 但是真正做的时候问题来了,当你支付成功之后或 ...

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

手机网站支付宝接入iframe无法唤醒支付宝app相关推荐

最新文章

热门文章