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如果含有特殊的字符串，需要提前转码后在加载，否则页面不显示
