我可以为你提供一个功能完整、样式美观的模拟支付宝付款页面，这个页面包含了真实支付流程中用户能看到的所有关键元素，并实现了前端逻辑（如选择支付方式、输入密码、模拟支付成功等），你可以将它用作学习和开发的起点。
（图片来源网络，侵删）
核心概念说明
一个真实的支付宝支付流程分为两部分：
-
商家服务器（后端）：
- 接收用户下单信息。
- 调用支付宝开放平台的 API（如
alipay.trade.page.pay）。 - 将支付宝返回的支付表单（通常是
form标签，里面包含一堆隐藏的input字段）发送给浏览器。 - 浏览器自动提交这个表单,跳转到支付宝的收银台页面。
-
用户浏览器（前端）：
- 显示商家的订单确认页面。
- 用户确认信息后,页面自动提交表单，跳转到支付宝。
- 在支付宝页面完成支付后,支付宝会根据配置，自动跳转回商家网站的一个指定地址（同步跳转），并向商家服务器发送一个异步通知（异步回调）来确认支付结果。
下面提供的代码是商家订单确认页面的模拟，它完整地展示了前端部分的交互。
（图片来源网络，侵删）
完整的模拟支付宝付款网页源码
这是一个独立的 HTML 文件，包含了 HTML 结构、CSS 样式和 JavaScript 交互逻辑。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">确认订单 - 模拟支付宝</title>
<style>
/* --- 全局样式重置 --- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 0 20px;
}
/* --- 页头 --- */
.header {
background-color: #fff;
padding: 15px 0;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #1677ff; /* 支付宝蓝 */
}
.header-links a {
margin-left: 20px;
text-decoration: none;
color: #666;
}
/* --- 主要内容区 --- */
.main-content {
display: flex;
gap: 30px;
margin-top: 30px;
}
/* --- 左侧：商品信息 --- */
.order-info {
flex: 3;
background-color: #fff;
padding: 25px;
border-radius: 8px;
}
.order-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.order-item {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid #f0f0f0;
}
.item-image {
width: 80px;
height: 80px;
background-color: #f0f0f0;
border-radius: 4px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
}
.item-details {
flex: 1;
}
.item-name {
font-weight: bold;
margin-bottom: 5px;
}
.item-specs {
color: #999;
font-size: 14px;
margin-bottom: 5px;
}
.item-price {
color: #f5222d;
font-weight: bold;
}
.item-quantity {
color: #999;
margin-left: 20px;
}
/* --- 右侧：支付信息 --- */
.payment-info {
flex: 2;
background-color: #fff;
padding: 25px;
border-radius: 8px;
height: fit-content;
position: sticky;
top: 20px;
}
.payment-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.payment-methods {
margin-bottom: 25px;
}
.payment-method {
display: flex;
align-items: center;
padding: 12px 0;
cursor: pointer;
border-bottom: 1px solid #f0f0f0;
}
.payment-method:last-child {
border-bottom: none;
}
.payment-method input[type="radio"] {
margin-right: 10px;
}
.payment-method img {
width: 24px;
height: 24px;
margin-right: 10px;
}
.payment-method label {
cursor: pointer;
flex: 1;
}
.price-summary {
border-top: 1px solid #eee;
padding-top: 15px;
}
.summary-row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.summary-row.total {
font-size: 20px;
font-weight: bold;
color: #f5222d;
margin-top: 15px;
padding-top: 15px;
border-top: 2px solid #eee;
}
.pay-button {
width: 100%;
height: 50px;
background-color: #1677ff;
color: white;
border: none;
border-radius: 4px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 20px;
transition: background-color 0.3s;
}
.pay-button:hover {
background-color: #0050b3;
}
.pay-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
/* --- 支付密码弹窗 --- */
.password-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.password-box {
background-color: #fff;
padding: 30px;
border-radius: 8px;
width: 90%;
max-width: 400px;
text-align: center;
}
.password-title {
font-size: 18px;
margin-bottom: 20px;
}
.password-inputs {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.password-input {
width: 50px;
height: 50px;
border: 1px solid #ddd;
border-radius: 4px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
.password-keyboard {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 15px;
}
.key {
width: 100%;
height: 45px;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
}
.key:hover {
background-color: #e6e6e6;
}
.key.delete {
background-color: #ff4d4f;
color: white;
}
.key.delete:hover {
background-color: #ff7875;
}
/* --- 成功页面 --- */
.success-page {
display: none;
text-align: center;
padding: 50px 20px;
}
.success-icon {
font-size: 80px;
color: #52c41a;
margin-bottom: 20px;
}
.success-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
}
.success-desc {
color: #666;
margin-bottom: 30px;
}
.back-button {
background-color: #1677ff;
color: white;
border: none;
padding: 12px 30px;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<!-- 页头 -->
<header class="header">
<div class="container">
<div class="header-content">
<div class="logo">模拟商城</div>
<div class="header-links">
<a href="#">首页</a>
<a href="#">我的订单</a>
<a href="#">个人中心</a>
</div>
</div>
</div>
</header>
<!-- 订单确认页面 -->
<div id="order-page" class="container">
<div class="main-content">
<!-- 左侧：商品信息 -->
<div class="order-info">
<h2 class="order-title">订单信息</h2>
<div class="order-item">
<div class="item-image">📱</div>
<div class="item-details">
<div class="item-name">iPhone 15 Pro Max</div>
<div class="item-specs">颜色：深空黑色 | 容量：256GB</div>
<div class="item-price">¥9,999.00</div>
</div>
<div class="item-quantity">x 1</div>
</div>
<div class="order-item">
<div class="item-image">🎧</div>
<div class="item-details">
<div class="item-name">AirPods Pro (第2代)</div>
<div class="item-specs">USB-C</div>
<div class="item-price">¥1,899.00</div>
</div>
<div class="item-quantity">x 1</div>
</div>
</div>
<!-- 右侧：支付信息 -->
<div class="payment-info">
<h2 class="payment-title">支付方式</h2>
<div class="payment-methods">
<div class="payment-method">
<input type="radio" id="alipay" name="payment" value="alipay" checked>
<label for="alipay">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiIGZpbGw9IiMxNjc3ZmYiLz4KPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0xMGMtLjI4IDAtMS40NS0uMjgtMS40NS0xLjQ1czAuMjggMS40NSAxLjQ1IDEuNDV6bTAgMGgtMmYwYzAgMi4yOCAwIDEuNDUtLjI4IDEuNDUtMS40NXMwLjI4IDEuNDUgMS40NSAxLjQ1eiIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMnM0LjQ4IDEwIDEwIDEwIDEwLTQuNDggMTAtMTBMMTcuNTIgMiAxMiAyWk0xMiAxMGMwIDYuMjggMCAxMC45NiAwIDEwLjk2czAuMjggMTAuOTYgMTAuOTYgMTAuOTZzMC4yOCAxMC45NiAxMC45NiAxMC45NnoiIGZpbGw9IiNmZmYiLz4KPHBhdGggZD0iTTEyIDEyQzYuNDggMTIgMiAxMiA2LjQ4IDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+" alt="支付宝">
支付宝
</label>
</div>
<div class="payment-method">
<input type="radio" id="wechat" name="payment" value="wechat">
<label for="wechat">
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0xMGMtLjI4IDAtMS40NS0uMjgtMS40NS0xLjQ1czAuMjggMS40NSAxLjQ1IDEuNDV6bTAgMGgtMmYwYzAgMi4yOCAwIDEuNDUtLjI4IDEuNDUtMS40NXMwLjI4IDEuNDUgMS40NSAxLjQ1eiIgZmlsbD0iI2U2ZmZlNiIvPgo8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMnM0LjQ4IDEwIDEwIDEwIDEwLTQuNDggMTAtMTBMMTcuNTIgMiAxMiAyWk0xMiAxMGMwIDYuMjggMCAxMC45NiAwIDEwLjk2czAuMjggMTAuOTYgMTAuOTYgMTAuOTZzMC4yOCAxMC45NiAxMC45NiAxMC45NnoiIGZpbGw9IiNmZmZmZmYiLz4KPHBhdGggZD0iTTEyIDEyQzYuNDggMTIgMiAxMiA2LjQ4IDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFoiIGZpbGw9IiNmZmZmZmYiLz4KPC9zdmc+" alt="微信支付">
微信支付
</label>
</div>
</div>
<div class="price-summary">
<div class="summary-row">
<span>商品总额</span>
<span>¥11,898.00</span>
</div>
<div class="summary-row">
<span>运费</span>
<span>¥0.00</span>
</div>
<div class="summary-row total">
<span>实付款</span>
<span>¥11,898.00</span>
</div>
</div>
<button id="pay-button" class="pay-button">立即付款</button>
</div>
</div>
</div>
<!-- 支付密码弹窗 -->
<div id="password-modal" class="password-modal">
<div class="password-box">
<h3 class="password-title">请输入支付密码</h3>
<div class="password-inputs">
<input type="text" class="password-input" maxlength="1" readonly>
<input type="text" class="password-input" maxlength="1" readonly>
<input type="text" class="password-input" maxlength="1" readonly>
<input type="text" class="password-input" maxlength="1" readonly>
<input type="text" class="password-input" maxlength="1" readonly>
<input type="text" class="password-input" maxlength="1" readonly>
</div>
<div class="password-keyboard">
<button class="key" data-key="1">1</button>
<button class="key" data-key="2">2</button>
<button class="key" data-key="3">3</button>
<button class="key" data-key="4">4</button>
<button class="key" data-key="5">5</button>
<button class="key" data-key="6">6</button>
<button class="key" data-key="7">7</button>
<button class="key" data-key="8">8</button>
<button class="key" data-key="9">9</button>
<button class="key" data-key="*">*</button>
<button class="key" data-key="0">0</button>
<button class="key delete" data-key="delete">删除</button>
</div>
</div>
</div>
<!-- 支付成功页面 -->
<div id="success-page" class="container success-page">
<div class="success-icon">✓</div>
<h2 class="success-title">支付成功！</h2>
<p class="success-desc">感谢您的购买，我们将尽快为您发货。</p>
<button class="back-button" onclick="location.reload()">返回首页</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const payButton = document.getElementById('pay-button');
const passwordModal = document.getElementById('password-modal');
const passwordInputs = document.querySelectorAll('.password-input');
const keys = document.querySelectorAll('.key');
const orderPage = document.getElementById('order-page');
const successPage = document.getElementById('success-page');
// 模拟支付成功后，后端返回的真实支付宝支付表单
// 在真实场景中，这个 form 会被后端动态生成并发送到前端
const realAlipayForm = `
<form id="alipay-real-form" name="alipayRealForm" action="https://openapi.alipay.com/gateway.do" method="get" target="_blank">
<input type="hidden" name="service" value="alipay.wap.create.direct.pay.by.user">
<input type="hidden" name="partner" value="2088102146226611">
<input type="hidden" name="_input_charset" value="utf-8">
<input type="hidden" name="notify_url" value="http://your-domain.com/notify">
<input type="hidden" name="return_url" value="http://your-domain.com/return">
<input type="hidden" name="out_trade_no" value="ORDER_20251027123456789">
<input type="hidden" name="subject" value="模拟商城订单">
<input type="hidden" name="payment_type" value="1">
<input type="hidden" name="total_fee" value="11898.00">
<input type="hidden" name="seller_id" value="2088102146226611">
<input type="hidden" name="body" value="iPhone 15 Pro Max, AirPods Pro">
<input type="hidden" name="it_b_pay" value="30m">
<input type="hidden" name="show_url" value="http://your-domain.com/show">
<input type="hidden" name="sign" value="这里是支付宝的签名">
</form>
`;
payButton.addEventListener('click', function() {
const selectedPayment = document.querySelector('input[name="payment"]:checked').value;
if (selectedPayment === 'alipay') {
// 在真实场景中，这里会向后端请求支付表单
// 模拟请求成功后，我们得到上面的 realAlipayForm
// document.body.insertAdjacentHTML('beforeend', realAlipayForm);
// document.getElementById('alipay-real-form').submit();
// 为了演示，我们直接弹出密码输入框
passwordModal.style.display = 'flex';
} else if (selectedPayment === 'wechat') {
alert('微信支付暂未开放，请选择支付宝支付。');
}
});
// 虚拟键盘逻辑
keys.forEach(key => {
key.addEventListener('click', function() {
const keyValue = this.getAttribute('data-key');
if (keyValue === 'delete') {
// 删除最后一个有值的输入框
for (let i = passwordInputs.length - 1; i >= 0; i--) {
if (passwordInputs[i].value) {
passwordInputs[i].value = '';
if (i > 0) {
passwordInputs[i - 1].focus();
}
break;
}
}
} else {
// 填充密码
for (let i = 0; i < passwordInputs.length; i++) {
if (!passwordInputs[i].value) {
passwordInputs[i].value = keyValue;
if (i < passwordInputs.length - 1) {
passwordInputs[i + 1].focus();
}
break;
}
}
}
// 检查是否已输入6位密码
const isPasswordFull = Array.from(passwordInputs).every(input => input.value);
if (isPasswordFull) {
// 模拟支付过程
setTimeout(() => {
passwordModal.style.display = 'none';
// 清空密码输入框
passwordInputs.forEach(input => input.value = '');
// 显示支付成功页面
orderPage.style.display = 'none';
successPage.style.display = 'block';
}, 1000); // 延迟1秒，模拟网络请求
}
});
});
// 点击弹窗外部关闭
passwordModal.addEventListener('click', function(e) {
if (e.target === passwordModal) {
passwordModal.style.display = 'none';
// 清空密码输入框
passwordInputs.forEach(input => input.value = '');
}
});
});
</script>
</body>
</html>
如何使用和理解这段代码
- 保存文件：将上面的所有代码复制到一个文本编辑器中，保存为
alipay_payment.html文件。 - 在浏览器中打开：用 Chrome、Firefox 等现代浏览器打开这个文件，你就能看到一个模拟的支付页面。
- 交互流程：
- 选择“支付宝”支付方式。
- 点击“立即付款”按钮。
- 会弹出一个模拟的密码输入键盘。
- 点击键盘输入任意6位数字。
- 输入满6位后,会自动关闭弹窗，并跳转到“支付成功”页面。
代码结构解析
-
HTML (
<body>部分):header: 页面顶部，类似网站导航。main-content: 主要内容区，分为左右两栏。order-info: 左侧展示订单商品列表。payment-info: 右侧展示支付方式选择和价格汇总。
password-modal: 支付密码输入的弹窗，默认隐藏。success-page: 支付成功后的展示页面，默认隐藏。
-
CSS (
<style>部分):- 使用 Flexbox 和 Grid 布局，使页面结构清晰且响应式。
- 定义了各个元素的样式,包括颜色、字体、边距、圆角等，模仿支付宝的简洁风格。
.password-modal使用position: fixed和z-index实现居中显示的弹窗效果。.sticky类让右侧支付信息栏在滚动时保持在视口中。
-
JavaScript (
<script>部分):
（图片来源网络，侵删）- 事件监听：监听“立即付款”按钮的点击事件。
- 支付方式判断：检查用户选择的是支付宝还是微信支付。
- 弹窗控制：点击付款按钮后，显示密码弹窗；点击弹窗外部，关闭弹窗。
- 虚拟键盘逻辑：
- 为每个数字键和删除键绑定点击事件。
- 实现了密码的逐位填充和删除功能,并自动聚焦到下一个输入框。
- 当密码输入满6位时,模拟一个异步支付过程（
setTimeout），然后隐藏订单页面，显示成功页面。
- 真实支付表单注释：代码中注释掉的部分，展示了在真实场景中，你的后端应该如何生成并提交支付宝的
form，这个form的action指向支付宝的网关，里面包含了所有订单和身份验证信息。
如何接入真实的支付宝支付？
要从这个模拟页面升级到真实支付,你需要：
- 注册支付宝开发者账号：并创建一个应用，获取
APPID（即代码中的partner）。 - 配置密钥：生成和应用公钥私钥，用于生成
sign签名。 - 后端开发：
- 创建订单：在你的服务器上生成一个唯一的订单号（
out_trade_no）。 - 调用支付宝SDK：使用支付宝官方提供的 SDK（如 PHP, Java, Node.js 等）来构建请求参数，并生成签名。
- 生成支付页面：后端将构建好的参数（如上面的
realAlipayForm）渲染成一个 HTML 页面，或者直接返回 JSON 数据，让前端动态生成这个form并自动提交。 - 处理异步通知（最重要）：支付宝在用户支付成功后，会向你在后台配置的
notify_url发送一个 POST 请求，你的服务器必须严谨地验证这个通知的签名，确认无误后，才更新订单状态为“已支付”，这是保证交易数据一致性的关键。 - 处理同步跳转：用户支付成功后，浏览器会跳转到你配置的
return_url，这个页面主要用于用户体验，不能作为判断支付成功的最终依据，因为用户可能中途关闭浏览器，最终依据还是异步通知。
- 创建订单：在你的服务器上生成一个唯一的订单号（
这个模拟页面为你提供了一个优秀的前端交互基础,你可以在此基础上，对接你自己的后端接口，最终实现完整的支付流程。
