SuperAPI AI 工具集

checkout-components

前端与建站

查看项目

更新于 10-16 05:53

技能介绍

用途:为 Next.js 应用提供生产可用的 Stripe 支付结账 UI 组件,适用于创建结账页、支付表单、订阅管理界面、客户门户、定价表与支付历史展示。

主要能力:包含 StripeProvider(Stripe Elements 上下文包装)、CheckoutForm(含卡输入的完整结账表单)、PaymentMethodForm(独立支付方式输入)、SubscriptionCard(订阅展示与管理)、PricingTable(定价层级对比)、PaymentHistory(交易历史)。组件支持 TypeScript 类型、Tailwind CSS 样式定制、Stripe Elements appearance 主题配置、错误处理与 WCAG 2.1 AA 无障碍特性。

使用方式:需 Next.js 13+ App Router、React 18+、TypeScript 5+、Tailwind CSS 3+。通过脚本安装依赖与配置:bash scripts/install-stripe-react.sh、bash scripts/setup-stripe-provider.sh;生成组件:bash scripts/generate-component.sh checkout-form;校验:bash scripts/validate-components.sh。密钥必须放在环境变量 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY、STRIPE_SECRET_KEY、STRIPE_WEBHOOK_SECRET 中,不得硬编码或提交到 git。测试可使用 Stripe 测试卡号(如 4242 4242 4242 4242)。

限制:服务端需自行创建 Payment Intent 并校验支付;必须使用 HTTPS,建议配置 CSP 与 Webhook;组件不存储卡号,依赖 Stripe Elements 处理卡数据。具体收费、价格与更多平台细节暂未提供。