# 条纹结账 ## 环境变量 # .env.local STRIPE_SECRET_KEY=sk_test_... # 或 sk_live_... STRIPE_WEBHOOK_SECRET=whsec_... NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_... ## 环境验证 // lib/env.ts 从 'zod' 导入 { z }； const stripeEnvSchema = z.object({ STRIPE_SECRET_KEY: z.string().startsWith('sk_'), STRIPE_WEBHOOK_SECRET: z.string().startsWith('whsec_'), }); 导出 const stripeEnv = stripeEnvSchema.safeParse(process.env); 导出函数 hasStripe(): boolean { 返回stripeEnv.成功； } ## 条纹客户端 // lib/stripe.ts 从 'stripe' 导入 Stripe；如果（！process.env.STRIPE_SECRET_KEY）{ 抛出新错误（'STRIPE_SECRET_KEY 未设置'）； } 导出 const stripe = new Stripe(process.env.STRIPE_SECRET_KEY, { apiVersion: '2024-12-18.acacia', 打字稿：真实， }); ## 创建结帐会话（服务器操作） // lib/actions/stripe.ts '使用服务器'；从“下一步/导航”导入{重定向}；从'@/lib/stripe'导入{stripe}；从 '@/lib/data' 导入 { getProgrammeBySlug }；从'@/i18n.config'导入类型{Locale}；接口 CreateCheckoutParams { 程序段：字符串；区域设置：区域设置； } 导出异步函数 createCheckoutSession({ 程序Slug，语言环境， }: 创建CheckoutParams) { const siteUrl = process.env.NEXT_PUBLIC_SITE_URL!; const 程序 = 等待 getProgrammeBySlug(区域设置,programsSlug); if (!programme || !programme.stripePriceId) { throw new Error('程序未找到或无法购买'); } const 会话 = 等待 stripe.checkout.sessions.create({ 模式：'付款'， payment_method_types: ['卡'], 行项目：[ { 价格：programme.stripePriceId，数量: 1, }, ], success_url: `${siteUrl}/${locale}/checkout/success?session_id={CHECKOUT_SESSION_ID}`, cancel_url: `${siteUrl}/${locale}/checkout/cancel`, 元数据：{ 程序Slug，语言环境， }, 区域设置： getStripeLocale(区域设置), }); if (session.url) { 重定向（会话.url）； } throw new Error('无法创建结帐会话'); } 函数 getStripeLocale(locale: Locale): Stripe.Checkout.SessionCreateParams.Locale { const 映射：Record = { 'pt-PT': 'pt', '恩': '恩', 'tr': 'tr', 'es': 'es', 'fr': 'fr', '德': '德', }; 返回地图[语言环境] || '汽车'; } ## 购买按钮组件 // 组件/BuyButton.tsx '使用客户端'；从'react'导入{useTransition}；从 'next-intl' 导入 { useLocale, useTranslations }; 从'@/lib/actions/stripe'导入{createCheckoutSession}；从'@/components/ui/button'导入{Button}；从'@/i18n.config'导入类型{Locale}；接口 BuyButtonProps { 程序段：字符串；价格：数量；禁用？：布尔值； } 导出函数BuyButton({programSlug,price,disabled}:BuyButtonProps){ const [isPending, startTransition] = useTransition(); const locale = useLocale() 作为区域设置； const t = useTranslations('结账'); 常量handleBuy = () => { 开始转换（异步（）=> { 等待 createCheckoutSession({programSlug, locale }); }); }; 返回（ <按钮 onClick={handleBuy} 禁用={禁用||正在等待} 尺寸=“lg” 类名=“w-full” > {正在等待？ t('处理') : `${t('购买')} - €${价格}`} ）； } ## Webhook 处理程序（关键安全性） // 应用程序/api/webhooks/stripe/route.ts 从 'next/headers' 导入 { headers }；从'next/server'导入{NextResponse}；从'@/lib/stripe'导入{stripe}；从“stripe”导入类型 Stripe；导出异步函数 POST(request: Request) { const body = 等待 request.text(); const headersList = 等待 headers(); const 签名 = headersList.get('stripe-signature'); 如果（！签名）{ return NextResponse.json({ error: '缺少签名' }, { status: 400 }); } 让事件：Stripe.Event；尝试{ // 关键：始终验证 Webhook 签名事件 = stripe.webhooks.constructEvent( 身体，签名, process.env.STRIPE_WEBHOOK_SECRET！）； } 捕获（错误）{ console.error('Webhook签名验证失败:', err); return NextResponse.json({ error: '无效签名' }, { status: 400 }); } 开关（事件类型）{ case 'checkout.session.completed': { const session = event.data.object as Stripe.Checkout.Session; 等待处理成功付款（会话）；休息; } 案例“付款意图.付款失败”：{ const paymentIntent = event.data.object as Stripe.PaymentIntent; console.error('支付失败：', paymentIntent.id); 休息; } } 返回 NextResponse.json({ 收到: true }); } 异步函数handleSuccessfulPayment（会话：Stripe.Checkout.Session）{ const {programSlug, locale } = session.metadata || {}； const customerEmail = session.customer_details?.email; // 授予程序访问权限 // - 保存到数据库 // - 发送确认电子邮件 // - 生成访问凭证 console.log('支付成功：', { sessionId: 会话.id, 程序Slug，客户电子邮件，语言环境， }); } ## 成功页面 // 应用程序/[语言环境]/checkout/success/page.tsx 从'@/lib/stripe'导入{stripe}；从 'next-intl/server' 导入 { getTranslations }；从“下一步/导航”导入{重定向}；类型道具= { params: Promise<{ locale: string }>; searchParams: Promise<{ session_id?: string }>; }; 导出默认异步函数 CheckoutSuccessPage({ 参数，搜索参数， }：道具）{ const { locale } = 等待参数； const { session_id } = 等待 searchParams; const t =等待 getTranslations('结帐'); 如果（！session_id）{ 重定向（`/${语言环境}`）； } const session =等待stripe.checkout.sessions.retrieve(session_id); if (session. payment_status !== '已付款') { 重定向(`/${locale}/checkout/cancel`); } 返回（

{t('success.title')}

{t('success.message')}

{t('success.emailSent', { 电子邮件: session.customer_details?.email })}

）； } ## 取消页面 // 应用程序/[语言环境]/checkout/cancel/page.tsx 从 'next-intl/server' 导入 { getTranslations }；从“下一个/链接”导入链接；从'@/components/ui/button'导入{Button}；导出默认异步函数 CheckoutCancelPage({ 参数， }：{ params: Promise<{ locale: string }>; }) { const { locale } = 等待参数； const t =等待 getTranslations('结帐'); 返回（

{t('cancel.title')}

{t('cancel.message')}

<作为子按钮的按钮> {t('cancel.backToProgrammes')}

）； } ## 条件渲染（无条纹） // 组件/ProgrammeCard.tsx 从 '@/lib/env' 导入 { hasStripe } ；从 './BuyButton' 导入 { BuyButton }；从'@/components/ui/button'导入{Button}；从“下一个/链接”导入链接；导出函数 ProgrammeCard({ 程序, 区域设置 }) { 返回（

{/* 计划详情 */} {hasStripe() ？（ ) : ( <按钮asChild变体=“大纲”> 联系购买 )}

）； } ## 本地测试 Webhook # 安装 Stripe CLI stripe 监听 --forward-to localhost:3000/api/webhooks/stripe # 使用 CLI 输出中的 Webhook 签名密钥

条纹结帐

包含技能