iOS 实现调用HTML支付宝支付

H5.jpg
WechatIMG112.png

这段时间APP内购频频出现问题，所以公司要求研究下集成其他支付方式---支付宝和微信。因为苹果审核问题，所以整个支付过程是以H5页面实现，在APP中只是跳转一个链接可以避免检测，这里做个整个过程的记录。

首先截图H5支付界面

屏幕快照 2018-11-30 15.07.21.png

接下来是H5界面代码

引入css文件和js文件

<link rel="stylesheet" type="text/css" href="css/index.css"/>
        <script src="js/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
        <![if IE 8]>
        <script src="js/jquery-1.9.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script src="https://cdn.bootcss.com/jquery-ajaxtransport-xdomainrequest/1.0.4/jQuery.XDomainRequest.js"></script>
        <![endif]>

界面详情代码

       <div class="" id="paybefore">
            
            <!--产品介绍-->
            <div class="" id="productdes">
                <img src="http://399300.com.cn/imgServer/zqt/icon/3.png" style="width: 40px;height: 40px;position: absolute;"/>
                <p style="line-height: 40px;margin-left: 50px;">XXXX</p>
                <div id=""style="height: 40px;margin-top: -55px;text-align: right;">
                    <p style="line-height: 40px;"><span style="color: red;">288</span>元/期</p>
                </div>
                <p style="color: #999999;font-size: 15px;">人工智能每1-3天精选5-10只短线强势股</p>
                
            </div>
            
            <div class="" style="text-align: center;margin-top: 50px;">
                <p>请选择支付方式</p>
            </div>
           
            <!--微信-->
            <div class="" style="margin-top: 20px;">
                <!--<img src="img/WechatIMG111.png" style="width: 50px;height: 50px;position: absolute;"/>
                <p style="margin-left: 80px;height: 50px;line-height: 50px;">微信</p>
                <div class="" style="margin-top: -56px;margin-left: 90%;">
                    <input name="parent_radio" type="radio" id="screen_data" value="0"  onclick="change()" style="height: 20px;width: 20px;background: dodgerblue;margin-top: 5px;"/>
                </div>-->
            </div>

            <div class="" style="height: 1px;width: 100%;background: #f2f2f2;margin-top: 30px;">

            </div>
            
            <!--支付宝-->
            <div class="" style="margin-top: 10px;">
                <img src="img/WechatIMG112.png" style="width: 50px;height: 50px;position: absolute;"/>
                <p style="margin-left: 80px;height: 50px;line-height: 50px;">
                    支付宝
                </p>
                <div class="" style="margin-top: -56px;margin-left: 90%;">
                    <input name="parent_radio" type="radio" id="screen_data" value="0"  onclick="change()" style="height: 20px;width: 20px;background: dodgerblue;margin-top: 5px;"/>
                </div>
            </div>
            <!--支付-->
            <div class="" style="height: 50px;width: 100%;margin-top: 50px;">
                <button onclick="alipay()" style="background: dodgerblue;width: 100%;height: 50px;color: white;font-size: 20px;">支付</button>
            </div>
            
        </div>
<!--调用js-->
        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

css代码


.buy-style{
    text-align: center;margin-top: 50px;
}

.wx-div{
    margin-top: 20px;
}

.line{
    height: 1px;width: 100%;background: #f2f2f2;margin-top: 30px;
}

.al-div{
    margin-top: 10px;
}
.al-div-img{
    width: 50px;height: 50px;position: absolute;
}
.al-div-p{
    margin-left: 80px;height: 50px;line-height: 50px;
}
.al-div-radio-div{
    margin-top: -56px;margin-left: 90%;
}
.al-div-radio{
    height: 20px;width: 20px;background: dodgerblue;margin-top: 5px;
}

.buy-button-div{
    height: 50px;width: 100%;margin-top: 50px;
}
.buy-button{
    background: dodgerblue;width: 100%;height: 50px;color: white;font-size: 20px;
}

JS代码

通过URL获取参数方法

//h获取参数
function getQueryString(name) {
    var url = window.location.search;
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = url.substr(1).match(reg);
    if(r != null) return decodeURI(r[2]);
    return null;
}

var UserID = getQueryString('userId');
var Spbill = getQueryString('spbill_create_ip');
var Product = getQueryString('productId');
var UserTicket = getQueryString('userTicketId');
var Roll = getQueryString('roll');
var Imgurl = getQueryString('imgurl');
var Namestr = getQueryString('name');
var Price = getQueryString('price');
var Timeunit = getQueryString('timeunit');

加载产品信息方法

document.getElementById('productdes').innerHTML = '<img src="'+Imgurl+'" style="width: 40px;height: 40px;position: absolute;"/>'+
                '<p style="line-height: 40px;margin-left: 50px;">'+Namestr+'</p>'+
                '<div id=""style="height: 40px;margin-top: -55px;text-align: right;">'+
                '<p style="line-height: 40px;"><span style="color: red;">'+Price+'</span>元/'+Timeunit+'</p>'+
                '</div>'+  
                '<p style="color: #999999;font-size: 15px;">'+'</p>'

调用支付宝支付事件 这里使用了jquery的ajax方法请求数据

function alipay() {
    //type wx  微信 al 支付宝
    //获取支付方式
    var buytype = localStorage.getItem('buytype');
    
    $.ajax({
        type: "get",
        //      dataType : "JSON",
        url: URL,
        data: {
                       //大括号内传参数
            userId: UserID,
            spbill_create_ip: Spbill,
            productId: Product,
            appName: "XXXX",
            phoneType: "iOS",
            userTicketId: UserTicket,
            roll: Roll,
            type: buytype
        },
        success: function(t) {
            console.log('跳转支付');
            console.log(t);
            console.log(t.data);
            /*
             * base64解码
             */
            function b64DecodeUnicode(str) {
                return decodeURIComponent(atob(str).split('').map(function(c) {
                    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
                }).join(''));
            }
            //Base64解码（因为后台获取的数据是base64编码）
            var str = b64DecodeUnicode(t.data);
            console.log(str);
            //加载支付页面
            document.write(str);
        },
        error: function(msg) {
            console.log('请求失败');
            console.log(msg);
            console.log(JSON.stringify(msg));
        }
    });
}

HTML5代码到这里就结束了，把H5代码提交给后台放到服务器上，然后到APP内部实现跳转功能，这里使用的是web view加载H5页面

//拼接URL参数喊文字信息需要UTF8转码 否则URL页面加载不出来
                        NSString *Namestr = [titlestring stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
                        NSString *Timeunit = [timeunit stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
                        NSString *pricestr = [NSString stringWithFormat:@"%.0f",Buyprice];
                        NSString *URLstr = [NSString stringWithFormat:@"%@userId=%@&spbill_create_ip=%@&productId=%@&userTicketId=%@&roll=%@&imgurl=%@&price=%@&name=%@&timeunit=%@",URL,ModelID2,UserIDAddress,buyID,self.couponID,self.ROLL,imgstring,pricestr,Namestr,Timeunit];
                        //NSLog(@"%@",pricestr);
                        DuJiaWebViewController *dujiaweb = [[DuJiaWebViewController alloc]init];
                        dujiaweb.loadUrl = URLstr;
                        dujiaweb.navTitle = @"";
                        [self.navigationController pushViewController:dujiaweb animated:YES];

注意 ，webview加载的URL如果含有特殊的字符串，需要提前转码后在加载，否则页面不显示

好了，功能到这里就完美实现了，如果大家还有什么问题欢迎留言讨论

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,019评论 3赞 119
  • 全新美好的一天
    啊，这是多么美好的一天啊，充满着爱，热情，健康，感恩！ 能与来自五湖四海的家人共修，感到了家人的真诚和热情，生活本...
    超能量传播者宫治国阅读 222评论 0赞 0
  • 命里还差一个你
    刚好，今年大学毕业，喜欢历史，从中国史到世界史，我喜欢那些读起来充满神秘的故事，我知道每一个故事后面都是经过岁月磨...
    我叫大元阅读 126评论 0赞 0
  • 8.27考研日记：皇太极的宁锦还没打呢
    如题：皇太极的宁锦还没打呢。 后金在努尔哈赤死后，皇太极即位，在1626年发动对明朝锦州、宁远的进攻，明朝以袁崇焕...
    一只支阅读 401评论 2赞 5