html+css+js实现微信和支付宝扫码支付前端
2024-06-06 21:39:26
本章教程，主要利用html+css+js技术实现微信和支付宝扫码支付前端页面。
目录
一、效果图预览
（1）支付宝扫码支付
（2）微信扫码支付
二、项目部分源码文件
（1）目录结构
（2）alipay.html
（3）wxpay.html
三、项目完整源码下载
一、效果图预览
（1）支付宝扫码支付
（2）微信扫码支付
二、项目部分源码文件
（1）目录结构
（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>创建时间</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>手机用户可保存上方二维码到手机中</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请求超时时间10sdata: {"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);}
</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>创建时间</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>手机用户可保存上方二维码到手机中</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请求超时时间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();
</script>
</body>
</html>三、项目完整源码下载
阿里云盘：https://www.aliyundrive.com/s/xPiAGoTrsjF
html+css+js实现微信和支付宝扫码支付前端相关推荐
- VB.net开发微信、支付宝扫码支付源码
扫码消费机介绍:https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-21914722028.2.2b826baawDkx32&id=170 ...
- VFP开发微信、支付宝扫码支付
&&扫码消费机介绍:https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-21914722028.4.2b826baa9cTxs0& ...
- Java PC端微信、支付宝扫码支付（二）
Java PC端微信.支付宝扫码支付(二) 前几天写了微信支付,附上链接 https://blog.csdn.net/qq_43494610/article/details/90411391 ,今天抽 ...
- Delphi7微信、支付宝扫码支付源码
扫码消费机介绍: https://item.taobao.com/item.htm?spm=a1z10.1-c.w4004-21914722028.4.2b826baaYipq2n&id=17 ...
- 微信与支付宝扫码支付
支付宝配置: package com.integralpay.config;public class AlipayConfig {//↓↓↓↓↓↓↓↓↓↓请在这里配置您的基本信息↓↓↓↓↓↓↓↓↓↓↓ ...
- 微信支付宝扫码支付聚合系统
一.简介 微信支付宝扫码支付聚合系统,聚合了微信支付和支付宝的所有扫码支付模式.并支持微信支付服务商子商户模式.支持五种扫码技术. 二.主要功能 1. 微信扫码支付:包括扫码支付模式一.扫码支付模式二 ...
- 微信和支付宝扫码之后，需要加载各种业务模块：
作者:王大帅 链接:https://www.zhihu.com/question/55761088/answer/158872594 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- 支付宝扫码支付和微信扫码支付共存的情况下，如何避免同一个订单被多次支付
前面分享了一篇 JAVA后端调用微信支付"统一下单"接口实现微信二维码扫码支付 的博客,虽然二维码在生成的时候可以设置有效期,但是这依旧不能保证整个业务流程和数据的安全.因为通常网 ...
- 微信PC端扫码支付 java 模式二的扫码支付
前言 这次分享的是java对接微信的支付接口,实现电脑端扫码支付后,跳转支付成功页面的例子.之所以分享是微信的Api太坑了.留下的文档也少,对接过程中容易出现各种各样的问题,在实现这扫码支付功能的时候 ...
最新文章
- Apriori 使用说明
- JAVA ReentrantLock 分析
- pytorch 变对角矩阵_Pytorch-Tensor基本操作
- html一张图片用两种滤镜,HTML图片CSS滤镜—灰度效果
- 产品经理必懂技术术语（后台类）
- 设置mysql从库延迟主库一小时
- [深度学习]-CNN-ImageNet历年冠军和相关CNN模型
- sqlserver创建程序集
- Python之网络编程（Socket）
- Android LayoutInflater 动态地添加删除View
- Ruby on rails Mac开发 入门笔记(一)
- 网络经商赚钱经典50问
- UIControl详解
- flex builder 4.6破解
- 视频播放插件 Video.js
- android实现弹框动画,android对话框弹出方式动画
- 联想服务器自动关机_联想电脑老是自动关机怎么回事
- 011 dilate（膨胀）、erode（腐蚀）
- 2.12美团点评技术
- yandex注册验证码怎么填_注册163邮箱格式怎么填？163电子邮件注册格式