支付按钮必须用，因其支持嵌套html、动态禁用、插入加载图标、读取dataset属性，而无法嵌套内容且dom可控性差，现代支付sdk（如stripe、paypal、支付宝）依赖前者实现安全、可访问、可降级的支付流程。
支付按钮必须用 <button type="submit"></button>，不能用 <input type="submit">
现代支付流程（尤其是 Stripe、PayPal JS SDK、Alipay JSAPI）依赖按钮元素的 DOM 可控性：需要绑定事件监听、动态禁用、插入加载状态图标、读取 dataset 属性传递订单 ID 或货币信息。而 <input type="submit"> 无法嵌套 HTML，也不能直接通过 innerHTML 插入 SVG 或 <span></span>，强行替换文本会丢失焦点和可访问性。
- 禁用时用
button.disabled = true，同时添加aria-busy="true"和aria-disabled="true" - 提交前务必检查
form.checkValidity()，避免绕过前端校验直接触发支付 SDK - 不要在
onclick里调用event.preventDefault()后手动form.submit()—— 这会跳过浏览器原生提交逻辑（如自动填充、密码管理器识别）
按钮文案要区分「准备支付」和「正在处理」两个状态
用户点击后若无视觉反馈，极易重复点击导致多笔扣款。纯 CSS 切换文案不可靠（无法同步更新 aria-label），应由 JavaScript 控制：
const btn = document.querySelector('button[data-payment-target]');
btn.addEventListener('click', async (e) => {
e.preventDefault();
btn.disabled = true;
btn.setAttribute('aria-busy', 'true');
btn.innerHTML = '<span class="spinner"></span> 正在处理…';
try {
await submitPayment(); // 调用 Stripe.confirmCardPayment() 等
} catch (err) {
btn.innerHTML = '支付失败，请重试';
setTimeout(() => { btn.innerHTML = '确认支付'; btn.disabled = false; }, 2000);
}
});
- 初始文案建议用「确认支付」而非「提交」——前者明确指向资金动作，降低误点率
- 加载态必须包含
<span class="spinner"></span>或 SVG，且宽度固定，避免布局抖动 - 错误恢复后，不要立即重置为可点击状态，留出 2 秒缓冲，防止网络抖动引发连续失败
表单 action 和 method 必须与后端支付网关要求严格匹配
很多团队误以为「前端调用 SDK 就不用管 form 提交」，结果在 Safari 或禁用 JS 的场景下直接跳转到空页面或 405 错误。正确做法是：表单仍需具备降级能力。
- 如果使用 Stripe Elements：表单
action应指向你自己的服务端 endpoint（如/api/charge），method="POST"，且所有敏感字段（卡号、CVV）**不**出现在 form 的input中 —— 它们由 Elements 实例加密后单独提交 - 如果对接支付宝 JSAPI：表单
action可设为#，但必须保留method="POST"，因为 SDK 内部会构造隐藏 iframe 提交，部分老版本支付宝依赖该属性判断上下文 - 绝对禁止把
action设为空字符串或javascript:void(0)—— 这会导致 Safari 拦截 form 提交并静默失败
移动端双击缩放和 focus 样式容易破坏支付体验
iOS Safari 默认对 <button></button> 做 300ms 延迟和双击缩放，用户点一次没反应，再点就放大页面；Android 上默认 focus outline 又丑又遮挡金额显示。
- 加一行
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，但仅限支付页，避免影响其他页面手势 - 按钮上强制写
touch-action: manipulation，消除 iOS 300ms 延迟 - focus 样式改用
outline: 2px solid #007aff; outline-offset: 2px;，比默认虚线更清晰，且不覆盖按钮文字 - 别给按钮加
font-size: 16px以下的文字 —— iOS 会自动触发缩放，哪怕 viewport 已禁用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
