支付方式选择HTML源码(弹窗款)

最新推荐文章于 2024-08-25 22:09:01 发布

码到城攻

最新推荐文章于 2024-08-25 22:09:01 发布

阅读量2.8k

点赞数

分类专栏：网页设计文章标签： html 前端 javascript 码到城攻网页加载

本文链接：https://blog.csdn.net/li_ning_/article/details/129508881

版权

网页设计专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章提供了使用HBuilder开发的一个独立WEB支付页面项目，该页面弹窗选择支付类型，点击后展示对应支付二维码，包括支付宝和微信支付。源码可供有一定HTML、CSS和JavaScript基础的开发者参考。项目结构清晰，支持模块化，且提供有偿分享。

摘要由CSDN通过智能技术生成

文章目录

源码说明

WEB支付页面，弹窗选择支付类型，点击支付类型，展示对应支付二维码，提供源码，以供参考。
项目直接用 HBuilder 开发，是一个独立项目，下载后，直接可浏览器查看效果(弹窗效果)。
其他支付类型选择项目：支付方式选择HTML源码
需要有点滴的 js css html 基础的伙伴参考。
模块化整理成 HBuilder 项目不易，故有偿分享。

独立项目结构

页面效果

部分源码

<div class="swal2-content">
	<div class="pay-button-box">
		<div class="pay-item" id="alipay"><i class="alipay"></i><span>支付宝</span></div>
		<div class="pay-item" id="weixinpay"><i class="weixinpay"></i><span>微信支付</span></div>
	</div>
	<div class="qrcon" style="display: none;">
		<h5> <img src="#" class="qr-pay"> </h5>
		<div class="title">扫码支付 9.90 元</div>
		<div align="center" class="qrcode"> 
			<img src="#"> 
		</div>
		<div class="bottom alipay"> 请使用支付宝扫一扫<br>
		</div>
	</div>
</div>

当然，还可以自行扩展支付类型，只用给 pay-button-box 中追加子 div 即可。