本章教程，主要利用html+css+js技术实现微信和支付宝扫码支付前端页面。

目录

一、效果图预览

（1）支付宝扫码支付

（2）微信扫码支付

二、项目部分源码文件

（1）目录结构

（2）alipay.html

（3）wxpay.html

三、项目完整源码下载

一、效果图预览

（1）支付宝扫码支付

（2）微信扫码支付

二、项目部分源码文件

（1）目录结构

（2）alipay.html

支付宝扫码支付
￥25.00 
商家
购买物品
RABDTZKDSJLHWCKA
商户订单号
2023021612225999274
创建时间
2023-02-16 12:22:59
请使用支付宝扫一扫
扫描二维码完成支付
手机用户可保存上方二维码到手机中
在支付宝扫一扫中选择“相册”即可
var code_url = "https:\/\/qr.alipay.com\/bax02441nyt9fkwfuvms2505";var order_num = "230216125131683802";var url_scheme = 'alipays://platformapi/startapp" />

（3）wxpay.html

微信扫码支付
￥25.00 
商家
购买物品
RABDTZKDSJLHWCKA
商户订单号
2023021612225999274
创建时间
2023-02-16 12:22:59
请使用微信扫一扫
扫描二维码完成支付
手机用户可保存上方二维码到手机中
在微信扫一扫中选择“相册”即可
$('#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请求超时时间10sdata: {type: "wxpay", trade_no: "2023021612225999274"}, //post数据success: function (data, textStatus) {//从服务器得到数据，显示数据并继续查询if (data.code == 1) {layer.msg('支付成功，正在跳转中...', {icon: 16,shade: 0.1,time: 15000});window.location.href=data.backurl;}else{setTimeout("loadmsg()", 3000);}},//Ajax请求超时，继续查询error: function (XMLHttpRequest, textStatus, errorThrown) {if (textStatus == "timeout") {setTimeout("loadmsg()", 1000);} else { //异常setTimeout("loadmsg()", 4000);}}});}window.onload = loadmsg();

三、项目完整源码下载

阿里云盘：https://www.aliyundrive.com/s/xPiAGoTrsjF