IOS通过H5定制唤醒支付宝APP进行支付

原创已于 2022-11-23 17:38:36 修改 · 1w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ios #safari #前端

于 2020-10-12 11:17:57 首次发布

PHP基础同时被 3 个专栏收录

17 篇文章

订阅专栏

7 篇文章

订阅专栏

TP框架

6 篇文章

订阅专栏

本文介绍了在iOS和Android平台上实现支付宝APP唤醒的不同方法。针对iOS的特殊限制，如Safari浏览器的安全策略，提供了具体的解决方案，包括如何通过新开窗口绕过限制及不同浏览器的兼容处理。

IOS唤醒支付宝APP的协议和安卓稍有区别，需要整个json数据进行urlencode来拼接到协议url内

在IOS内，QQ浏览器和其他浏览器有区别，需要另外的支付宝唤醒url

//唤起客户端快捷参数
var data = {"requestType":"SafePay","fromAppUrlScheme":"alipays","dataString":"h5_route_token=\"RZ41QkLuzjZPgEfvTaAM2Vses2JgbtmobilecashierRZ41\"&is_h5_route=\"true\""};                
if(isAndroid) {
    var alipaysUrl = 'alipays://platformapi/startApp?appId=20000125&orderSuffix=' + o.android +'#Intent;scheme=alipays;package=com.eg.android.AlipayGphone;end';
}
//fix for iOS QQ browser
else if (ua.indexOf('mqqbrowser') > -1) {
    var alipaysUrl = 'alipay://alipayclient/?' + o.android;
}
else {
    var alipaysUrl = 'alipay://alipayclient/?' + o.ios;
}

在IOS中，需要注意的地方是 safari浏览器会对打开新窗口判断是否为恶意，并且不能通过iframe来唤醒APP，只能通过新开窗口打开唤醒的url 进行唤醒，然而在苹果端不能直接用js进行了ajax回调后打开新窗口，它的安全策略是只能是用户点击的js逻辑内 ajax 回调的逻辑前才能执行，也就意味着需要用户点击唤醒支付的事件后先打开新窗口然后执行ajax 回调进行支付宝app唤醒。

代码：

// js点击后的执行逻辑

      // 苹果端safari浏览器使用时，先打开一个窗口预用于唤醒支付宝APP
      if(!/Windows/.test(navigator.userAgent) && /Safari/.test(navigator.userAgent) && broker_type == 'ios') {
        // 如果是苹果平板的QQ浏览器，则提示下载APP或者推荐自带浏览器使用
        if(/mqbhd/.test(navigator.userAgent.toLowerCase())) {
          alert("请下载游戏APP进行充值")
          return false;
        }

        if(!/mqqbrowser/.test(navigator.userAgent.toLowerCase())) {
          // 其他苹果设备正常执行
          iphone_open_w_id = window.open();
        }
      }


// ajax回调后的执行逻辑

        if((!/mqqbrowser/.test(navigator.userAgent.toLowerCase()) && /Safari/.test(navigator.userAgent)) && !/Chrome/.test(navigator.userAgent)) {
          
          // 如果客户端是苹果的safari浏览器，则打开窗口后关闭返回原网页执行支付唤醒
          var w_obj = iphone_open_w_id;
          w_obj.location = 'alipay://alipayclient/?'+url.ios;

          var t1 = window.setTimeout(function() {
              // 1秒钟之后执行了
              w_obj.close()
              window.clearTimeout(t1) // 去除定时器
            },1000)
        } else {
          if(/mqqbrowser/.test(navigator.userAgent.toLowerCase())) {
            // 苹果端的QQ浏览器
            aliwap_url = 'alipay://alipayclient/?'+url.android
          } else {
            // 非苹果端的浏览器，即安卓浏览器
            aliwap_url = 'alipays://platformapi/startApp?appId=20000125&orderSuffix=' + url.android +'#Intent;scheme=alipays;package=com.eg.android.AlipayGphone;end';
          }
        }

注：平板是走手机端的逻辑，也就是可以通过 APP协议进行支付宝唤醒支付