iOS 实现调用HTML支付宝支付

H5.jpg

WechatIMG112.png

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

首先截图H5支付界面

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

接下来是H5界面代码

引入css文件和js文件

界面详情代码

       

            
            
            

                
                
XXXX
                

                    
288元/期
                
                
人工智能每1-3天精选5-10只短线强势股
                
            
            
            

                
请选择支付方式
            
           
            
            

                
            

            


            
            
            
            

                
                

                    支付宝
                
                

                    
                
            
            
            

                支付
            
            
        

        

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 = ''+
                '
'+Namestr+'
'+
                '
'+
                '
'+Price+'元/'+Timeunit+'
'+
                '
'+  
                '
'+'
'

调用支付宝支付事件 这里使用了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如果含有特殊的字符串，需要提前转码后在加载，否则页面不显示

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