| html+css+js实现微信和支付宝扫码支付前端 | 您所在的位置：网站首页 › 支付完成页面 › html+css+js实现微信和支付宝扫码支付前端 |
html+css+js实现微信和支付宝扫码支付前端
|
本章教程，主要利用html+css+js技术实现微信和支付宝扫码支付前端页面。 目录 一、效果图预览 （1）支付宝扫码支付 （2）微信扫码支付 二、项目部分源码文件 （1）目录结构 （2）alipay.html （3）wxpay.html 三、项目完整源码下载 一、效果图预览 （1）支付宝扫码支付
请使用支付宝扫一扫 扫描二维码完成支付 手机用户可保存上方二维码到手机中 在支付宝扫一扫中选择“相册”即可 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) { //从服务器得到数据，显示数据并继续查询 if (data.code == 0) { layer.msg('支付成功，正在跳转中...', {icon: 16, shade: 0.1, time: 5000}); } else { setTimeout("checkresult()", 2000); } }, //Ajax请求超时，继续查询 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); } （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请求超时时间10s data: {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 |
【本文地址】
公司简介
联系我们