你在给网店加购物车按钮时，点一下没反应？提交订单老是卡在‘正在生成订单’？别急，这不是代码写错了，很可能是下单流程里漏掉了关键环节。
下单不是点一下就完事
真实场景里，一个完整的电商下单流程，至少包含这五个动作：选商品 → 加入购物车 → 填写收货信息 → 选择支付方式 → 提交并跳转支付页。少走一步，用户就可能关掉页面。
1. 购物车数据怎么传给下单页？
很多新手直接用 localStorage 存商品 ID 和数量，到了下单页再读出来——这没问题，但要注意校验。比如用户手动改了 localStorage 里的价格字段，后端不验价就会被薅羊毛。
更稳妥的做法是：下单页加载时，把购物车 ID 或商品 ID 列表发给后端，由服务端查库存、算总价、检查是否下架，再返回真实可下单的数据。
2. 收货地址不能只靠前端填
前端弹个表单让用户输姓名、电话、省市区、详细地址？行，但必须带「默认地址」选项，并且后端要支持地址 ID 关联。否则用户下次再买，还得重填一遍。
常见坑：省市区三级联动用的是静态 JSON，但某天行政区划调整（比如撤县设区），前端不更新，用户就找不到‘XX新区’。
3. 支付前的最后一道关卡
用户点‘立即支付’那一刻，系统得干三件事：
- 锁定库存（Redis + Lua 脚本防超卖）
- 生成唯一订单号（建议用时间戳+用户ID+随机数，别用自增ID）
- 把订单状态设为‘待支付’，并设置 15 分钟过期
然后跳转到支付页，比如微信 JSAPI 支付需要调 wx.chooseWXPay，支付宝 H5 支付则返回一个 form 表单自动 submit：
<form id="alipay-form" action="https://openapi.alipay.com/gateway.do" method="post">
<input type="hidden" name="app_id" value="2021000123456789" />
<input type="hidden" name="biz_content" value="{"out_trade_no":"ORD20240520001","total_amount":"99.90","subject":"无线鼠标"}" />
<input type="hidden" name="method" value="alipay.trade.page.pay" />
<input type="hidden" name="sign" value="xxx..." />
</form>
<script>document.getElementById('alipay-form').submit()</script>别让‘下单成功’变成假象
有些系统点了提交就弹‘下单成功’，结果后台根本没写进数据库，或者支付回调没监听到，订单一直卡在‘待支付’。用户以为买好了，其实啥也没发生。
真正靠谱的做法：前端只显示‘已提交，请等待支付结果’；支付成功回调到达后，再把订单状态改为‘已支付’，同时发短信或站内信通知用户。