Forms
结账表单
一个包含配送信息、支付信息和订单摘要的多区块结账表单。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a checkout page with a two-column layout. Left column: shipping information form (name, email, address, city, country, postal code) and payment form (card number, expiry, CVC). Right column: order summary card showing items, subtotal, shipping, tax, and total with a "Place order" button. Use shadcn/ui Card, Input, Button, and Separator components and Tailwind CSS. Include form validation and responsive stacking.
中文提示词
创建一个两列布局的结账页面。左列:配送信息表单(姓名、邮箱、地址、城市、国家、邮编)和支付表单(卡号、有效期、CVC)。右列:订单摘要卡片,显示商品、小计、运费、税费和总计,以及 "Place order" 按钮。使用 shadcn/ui Card、Input、Button 和 Separator 组件以及 Tailwind CSS。包含表单验证和响应式堆叠。

概述
一个收集配送和支付信息并显示订单摘要的结账流程表单。旨在减少摩擦并提高转化率。
功能特性
- 两列结账布局
- 配送信息表单
- 支付详情表单
- 订单摘要侧边栏
- 费用明细
- 表单验证
- 响应式堆叠
使用方法
将提示词复制到 v0 或 Cursor 中。连接到你的支付处理器和订单 API。
自定义选项
修改提示词以:
- 添加配送方式选择
- 包含账单地址切换
- 添加优惠码输入
- 显示已保存支付方式