h5移动端如何调用支付宝、微信支付

tangjin

作者

这篇文章给大家分享的是有关h5移动端如何调用支付宝、微信支付的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

代码：

varaliChannel=null;
varwxChannel=null;

//定义支付方式切换
varstate_type=1;
//选择支付方式默认为支付宝样式
$(".zfb").find("i").css("background-Image","url(../img/pl_8.png)");
$(".pay").on("singleTap",".pay_c",function(){
$(this).find("i").css("background-Image","url(../img/pl_8.png)");
$(this).siblings().find("i").css("background-Image","url(../img/pl_9.png)");

if($(this).find("span").text().trim()=="支付宝"){
state_type=1;

}elseif($(this).find("span").text().trim()=="微信"){
state_type=2;
}
})
//点击支付
$('.pay_btn').unbind();
$('.pay_btn').singleTap(function(){
if(state_type==1){
//支付宝通道
mui.plusReady(function(){//获取支付通道
plus.payment.getChannels(function(channels){
for(variinchannels){
if(channels[i].id=="wxpay"){
wxChannel=channels[i];
}else{
aliChannel=channels[i];
}
}
},function(e){
alert("获取支付通道失败："+e.message);
});
})

mui.post('此处填写支付接口',{
'此处填写所需参数'
},
function(data){
console.log(JSON.stringify(data));
if(data){
data=data.data.payStr;
plus.payment.request(aliChannel,data,function(result){

//支付成功处理

},function(e){
floatRemind("付费失败，用户已取消");
});
}else{
plus.nativeUI.alert("支付失败");
}
});
}elseif(state_type==2){
//微信通道
mui.plusReady(function(){//获取支付通道
plus.payment.getChannels(function(channels){
for(variinchannels){
if(channels[i].id=="wxpay"){
wxChannel=channels[i];
}else{
aliChannel=channels[i];
}
}
},function(e){
alert("获取支付通道失败："+e.message);
});
})

mui.post('此处填写支付接口',{
'此处填写所需参数'
},
function(data){
data=JSON.stringify(data.data);
if(data){
plus.payment.request(wxChannel,data,function(result){

//支付成功处理

},function(msg){
//JSON.stringify(msg.message)
floatRemind('支付失败');
});
}else{
plus.nativeUI.alert("支付失败");
}
});
}



})

自己已经用过了，没有问题，支付宝可以真机调试，微信必须打包下载测试。

测试过程中有过报错-100，百度各种解决方法，后来发现不是前端问题，有人说打包必须选自有证书，自己试过了不需要，公用证书就可以的。