一 摘要
这里HTML5集成微信支付跟iOS,安卓集成微信支付过程是一样的,iOS微信集成参考之前的文章.
这里引用之前文章的集成过程.如下:
商户系统和微信支付系统主要交互说明：
步骤1：用户在商户APP中选择商品，提交订单，选择微信支付。
步骤2：商户后台收到用户支付单，调用微信支付统一下单接口。参见统一下单API。
步骤3：统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。参与签名的字段名为appId，partnerId，prepayId，nonceStr，timeStamp，package。注意：package的值格式为Sign=WXPay
步骤4：商户APP调起微信支付。
步骤5：商户后台接收支付通知。
步骤6：商户后台查询支付结果。二 效果
1)横屏效果
2)竖屏效果
三 具体代码实现
1)全局变量
var payType; //支付方式：200 微信支付， 310 到店支付
var fromType; //代表从哪里过来的
var orderNbr; // 订单号
var orderId; // 订单id
var orderPrice; // 订单价格
var orderName; // 订单价格
var projectId; // 项目id
var serviceType; // 服务类型
var merchantId; // 商家id
var parentId;2)实现过程
mui.plusReady(function() {
var self = plus.webview.currentWebview();
fromType = self.fromType;
orderNbr = self.orderNbr;
orderId = self.orderId;
orderPrice = self.orderPrice;
orderName = self.orderName;
projectId = self.projectId;
serviceType = self.serviceType;
merchantId = self.merchantId;
parentId = self.parentId;
// 设置展示数据
document.getElementById('order-price').innerHTML = '¥' + orderPrice;
document.getElementById('pay-price').innerHTML = '¥' + orderPrice;
/*
* 获取支付通道
*/
plus.payment.getChannels(function(channels) {
for (var i in channels) {
var channel = channels[i];
pays[channel.id] = channel;
checkServices(channel); //检测是否安装支付服务
console.log('======安的支付服务=====' + channel.id)
}
}, function(e) {
mui.toast("获取支付失败");
});
//选择支付模式
radioOnChange();
});3)赋值
document.getElementById('wxpay').addEventListener('tap', function() {
this.querySelector('input').checked = true;
payType = '200';
// console.log("payType"+payType);
});
document.getElementById('ddpay').addEventListener('tap', function() {
this.querySelector('input').checked = true;
payType = '310';
// console.log("payType"+payType);
});4)选择支付模式
function radioOnChange() {
var payRadio = document.getElementsByName("radio1");
for (var i = 0; i < payRadio.length; i++) {
if (payRadio[i].checked) {
payType = payRadio[i].value;
console.log('====支付方式payType=====' + payType)
}
}
}5)支付
function pay(id) {
if (w) {
return;
} //检查是否请求订单中
var url = PAYSERVER;
if (mui.os.ios) {
systemtype = 'IOS';
}
if (wxappid == 'wx741484d992c17831') {
url += 'orderSn=' + orderNbr + '&cMerchantId=' + MERCHANTID + '&type=' + systemtype + '&payType_appId=2';
} else {
url += 'orderSn=' + orderNbr + '&cMerchantId=' + MERCHANTID + '&type=' + systemtype;
}
w = plus.nativeUI.showWaiting();
// 请求支付订单
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
console.log("请求支付订单：" + url)
xhr.send();
xhr.onreadystatechange = function() {
switch (xhr.readyState) {
case 4:
w.close();
w = null;
if (xhr.status == 200) {
var data = xhr.responseText;
console.log("-----请求订单成功-----" + data)
var prepayid = JSON.parse(data).data.prepayId; //商户订单号
var timestamp = new Date().getTime(); //当前时间戳
if (mui.os.ios) {
timestamp = parseInt(timestamp / 1000);
}
var noncestr = generateMixed(16); //16位随机字符串
var signStr = "appid=" + wxappid + "&noncestr=" + noncestr + "&package=" + "Sign=WXPay" + "&partnerid=" + wxpartnerid + "&prepayid=" + prepayid + "×tamp=" + timestamp + "&key=" + partnerKey;
var sign = hex_md5(signStr).toUpperCase(); //生成签名
var order = '{"appid":"' + wxappid + '","noncestr":"' + noncestr + '","package":"Sign=WXPay","partnerid":"' + wxpartnerid + '","prepayid":"' + prepayid + '","timestamp":' + timestamp + ',"sign":"' + sign + '"}';
plus.payment.request(pays[id], order, function(result) {
plus.nativeUI.alert("支付成功", function() {
orderQueryStatus('0');
// back();
}, "支付");
}, function(e) {
// orderQueryStatus('-1');
plus.nativeUI.alert("支付失败", null, "支付失败"); // + e.code+e.message
});
} else {
plus.nativeUI.alert("获取订单信息失败！", null, "支付");
}
break;
default:
break;
}
}
}6)支付成功或失败时返回的状态
function orderQueryStatus(wxCode) {
var URL_PAY = SERVER_URL + 'wxpay/order/cartOrderQuery.do';
mui.ajax(URL_PAY, {
data: {
orderSn: orderNbr, //730348977370697729订单号
cMerchantId: MERCHANTID,
wx_errcode: wxCode,
type: systemtype
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
/*
* 跳到我的订单
*/
goMyOrder();
},
error: function(xhr, type, errorThrown) {
mui.toast('网络异常，请稍后再试！');
}
});
}7)我的订单里付款，根据订单orderId改变订单状态
function updatePayStatusByOrderid() {
var URL_1 = SERVER_URL + 'updateOrderPayStatusById.do';
mui.ajax(URL_1, {
data: {
orderId: orderId, // 订单号
payStatus: payType
},
dataType: 'json',
type: 'post',
timeout: 10000,
success: function(data) {
if (data.status == 100) {
if (payType == 310) {
if (plus.webview.getWebviewById(parentId)) {
plus.webview.getWebviewById(parentId).reload();
}
if (plus.webview.getWebviewById('order-detail')) {
plus.webview.getWebviewById('order-detail').close();
}
plus.webview.currentWebview().close();
}
} else {
mui.toast(data.msg);
}
},
error: function(xhr, type, errorThrown) {
mui.toast('网络异常，请稍后再试！');
}
});
}8)跳转到我的订单
function goMyOrder() {
if (plus.webview.getWebviewById('../order/order-main.html')) {
mui.fire(plus.webview.getWebviewById('../order/order-main.html'), 'refersh');
plus.webview.currentWebview().close();
} else {
mui.openWindow({
id: '../order/order-main.html',
url: '../order/order-main.html',
waiting: {
autoShow: true
}
});
}
}9)返回事件
/*返回事件*/
mui.back = function() {
if (fromType != '') {
// 从我的订单进来
plus.webview.currentWebview().close();
} else {
// 购物车或立即预约，提示订单已经生成
var btnArray = ['确定', '取消'];
mui.confirm('\n订单已经生成可以在订单管理查看\n', '', btnArray, function(e) {
if (e.index == 0) {
// 确定
goMyOrder();
} else {
// 取消
var cartOrderView = plus.webview.getWebviewById('cart-order');
if (cartOrderView) {
cartOrderView.close();
}
var orderView = plus.webview.getWebviewById('order');
if (orderView) {
orderView.close();
}
plus.webview.currentWebview().close();
}
});
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
