本章教程，主要利用html+css+js技術(shù)實(shí)現(xiàn)微信和支付寶掃碼支付前端頁面。
目錄
一、效果圖預(yù)覽?
（1）支付寶掃碼支付
（2）微信掃碼支付
二、項(xiàng)目部分源碼文件
（1）目錄結(jié)構(gòu)
（2）alipay.html
（3）wxpay.html
三、項(xiàng)目完整源碼下載
一、效果圖預(yù)覽?
（1）支付寶掃碼支付
（2）微信掃碼支付
二、項(xiàng)目部分源碼文件
（1）目錄結(jié)構(gòu)
文章來源：http://www.zghlxwxcb.cn/news/detail-504319.html
（2）alipay.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="renderer" content="webkit">
<title>支付寶掃碼支付</title>
<link href="/assets/css/wechat_pay.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="body">
<h1 class="mod-title">
<span class="ico-alipay"></span><span class="text">支付寶掃碼支付</span>
</h1>
<div class="mod-ct">
<div class="order">
</div>
<div class="amount">￥25.00</div>
<div class="qr-image" id="qrcode">
</div>
<div class="detail" id="orderDetail">
<dl class="detail-ct" style="display: none;">
<dt>商家</dt>
<dd id="storeName"></dd>
<dt>購買物品</dt>
<dd id="productName">RABDTZKDSJLHWCKA</dd>
<dt>商戶訂單號</dt>
<dd id="billId">2023021612225999274</dd>
<dt>創(chuàng)建時間</dt>
<dd id="createTime">2023-02-16 12:22:59</dd>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow-alipay"></i></a>
</div>
<div class="tip">
<span class="dec dec-left"></span>
<span class="dec dec-right"></span>
<div class="ico-scan-alipay"></div>
<div class="tip-text">
<p>請使用支付寶掃一掃</p>
<p>掃描二維碼完成支付</p>
</div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
<div class="inner">
<p>手機(jī)用戶可保存上方二維碼到手機(jī)中</p>
<p>在支付寶掃一掃中選擇“相冊”即可</p>
</div>
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/layer.min.js"></script>
<script src="/assets/js/jquery.qrcode.min.js"></script>
<script>
var code_url = "https:\/\/qr.alipay.com\/bax02441nyt9fkwfuvms2505";
var order_num = "230216125131683802";
var url_scheme = 'alipays://platformapi/startapp?appId=20000067&url=' + encodeURIComponent(code_url);
$('#qrcode').qrcode({
text: code_url,
width: 230,
height: 230,
foreground: "#000000",
background: "#ffffff",
typeNumber: -1
});
// 訂單詳情
$('#orderDetail .arrow').click(function (event) {
if ($('#orderDetail').hasClass('detail-open')) {
$('#orderDetail .detail-ct').slideUp(500, function () {
$('#orderDetail').removeClass('detail-open');
});
} else {
$('#orderDetail .detail-ct').slideDown(500, function () {
$('#orderDetail').addClass('detail-open');
});
}
});
function checkresult() {
$.ajax({
type: "POST",
dataType: "json",
url: "/community/alipay/query",
timeout: 10000, //ajax請求超時時間10s
data: {"out_trade_no": order_num},
success: function (data) {
//從服務(wù)器得到數(shù)據(jù)，顯示數(shù)據(jù)并繼續(xù)查詢
if (data.code == 0) {
layer.msg('支付成功，正在跳轉(zhuǎn)中...', {icon: 16, shade: 0.1, time: 5000});
} else {
setTimeout("checkresult()", 2000);
}
},
//Ajax請求超時，繼續(xù)查詢
error: function (XMLHttpRequest, textStatus) {
if (textStatus == "timeout") {
setTimeout("checkresult()", 1000);
} else { //異常
setTimeout("checkresult()", 1000);
}
}
});
}
var isMobile = function () {
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/);
return isIphone || isAndroid;
}
function openAlipay() {
window.location.href = url_scheme;
layer.msg('正在打開支付寶...', {shade: 0, time: 1000});
}
window.onload = function () {
if (isMobile()) {
$('.open_app').show();
window.location.href = url_scheme;
}
setTimeout("checkresult()", 2000);
}
</script>
</body>
</html>（3）wxpay.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="renderer" content="webkit">
<title>微信掃碼支付</title>
<link href="/assets/css/wechat_pay.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="body">
<h1 class="mod-title">
<span class="ico-wechat"></span><span class="text">微信掃碼支付</span>
</h1>
<div class="mod-ct">
<div class="order">
</div>
<div class="amount">￥25.00</div>
<div class="qr-image" id="qrcode">
</div>
<div class="detail" id="orderDetail">
<dl class="detail-ct" style="display: none;">
<dt>商家</dt>
<dd id="storeName"></dd>
<dt>購買物品</dt>
<dd id="productName">RABDTZKDSJLHWCKA</dd>
<dt>商戶訂單號</dt>
<dd id="billId">2023021612225999274</dd>
<dt>創(chuàng)建時間</dt>
<dd id="createTime">2023-02-16 12:22:59</dd>
</dl>
<a href="javascript:void(0)" class="arrow"><i class="ico-arrow-wechat"></i></a>
</div>
<div class="tip">
<span class="dec dec-left"></span>
<span class="dec dec-right"></span>
<div class="ico-scan-wechat"></div>
<div class="tip-text">
<p>請使用微信掃一掃</p>
<p>掃描二維碼完成支付</p>
</div>
</div>
<div class="tip-text">
</div>
</div>
<div class="foot">
<div class="inner">
<p>手機(jī)用戶可保存上方二維碼到手機(jī)中</p>
<p>在微信掃一掃中選擇“相冊”即可</p>
</div>
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/layer.min.js"></script>
<script src="/assets/js/jquery.qrcode.min.js"></script>
<script>
$('#qrcode').qrcode({
text: "https://mnxxkj.com/pay/wxpay/jspay/2023021612225999274/",
width: 230,
height: 230,
foreground: "#000000",
background: "#ffffff",
typeNumber: -1
});
// 訂單詳情
$('#orderDetail .arrow').click(function (event) {
if ($('#orderDetail').hasClass('detail-open')) {
$('#orderDetail .detail-ct').slideUp(500, function () {
$('#orderDetail').removeClass('detail-open');
});
} else {
$('#orderDetail .detail-ct').slideDown(500, function () {
$('#orderDetail').addClass('detail-open');
});
}
});
// 檢查是否支付完成
function loadmsg() {
$.ajax({
type: "GET",
dataType: "json",
url: "/getshop.php",
timeout: 10000, //ajax請求超時時間10s
data: {type: "wxpay", trade_no: "2023021612225999274"}, //post數(shù)據(jù)
success: function (data, textStatus) {
//從服務(wù)器得到數(shù)據(jù)，顯示數(shù)據(jù)并繼續(xù)查詢
if (data.code == 1) {
layer.msg('支付成功，正在跳轉(zhuǎn)中...', {icon: 16,shade: 0.1,time: 15000});
window.location.href=data.backurl;
}else{
setTimeout("loadmsg()", 3000);
}
},
//Ajax請求超時，繼續(xù)查詢
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus == "timeout") {
setTimeout("loadmsg()", 1000);
} else { //異常
setTimeout("loadmsg()", 4000);
}
}
});
}
window.onload = loadmsg();
</script>
</body>
</html>三、項(xiàng)目完整源碼下載
下載地址：html+css+js實(shí)現(xiàn)微信和支付寶掃碼支付前端源碼下載-易微幫文章來源地址http://www.zghlxwxcb.cn/news/detail-504319.html
到了這里，關(guān)于html+css+js實(shí)現(xiàn)微信和支付寶掃碼支付前端的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
