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