菜单
Next.js checkout UI components with Stripe Elements and payment forms. Use when creating checkout pages, payment forms, subscription UIs, customer portals, or when user mentions Stripe Elements, payment UI, checkout flow, subscription management, or payment forms.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | checkout-components |
| description | Next.js checkout UI components with Stripe Elements and payment forms. Use when creating checkout pages, payment forms, subscription UIs, customer portals, or when user mentions Stripe Elements, payment UI, checkout flow, subscription management, or payment forms. |
| allowed-tools | Bash, Read, Write, Edit, Grep, Glob |
Production-ready Next.js UI components for Stripe payment integration with TypeScript, Tailwind CSS, and accessibility features. Provides complete checkout flows, subscription management, and payment form components.
CRITICAL: API Key Handling
When using these components:
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEYpk_test_your_stripe_publishable_key_here.env files to .gitignoreExample .env.local:
# NEVER COMMIT THIS FILE
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_stripe_publishable_key_here
STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key_here
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here
# Install Stripe React libraries
bash scripts/install-stripe-react.sh
Installs:
@stripe/stripe-js - Stripe.js loader@stripe/react-stripe-js - React Elements components# Create provider wrapper in your app
bash scripts/setup-stripe-provider.sh
Creates:
lib/stripe-client.ts - Stripe client initializationcomponents/providers/stripe-provider.tsx - Elements provider wrapper# Generate specific payment component
bash scripts/generate-component.sh checkout-form
bash scripts/generate-component.sh subscription-card
bash scripts/generate-component.sh pricing-table
# Validate component structure and configuration
bash scripts/validate-components.sh
Checks:
Wraps your app with Stripe Elements context:
import { StripeProvider } from '@/components/providers/stripe-provider';
export default function RootLayout({ children }) {
return (
<html>
<body>
<StripeProvider>
{children}
</StripeProvider>
</body>
</html>
);
}
Features:
Complete payment form with card input:
import { CheckoutForm } from '@/components/payments/checkout-form';
export default function CheckoutPage() {
return (
<div className="max-w-md mx-auto p-6">
<h1 className="text-2xl font-semibold mb-6">Complete Purchase</h1>
<CheckoutForm
amount={4999}
onSuccess={() => router.push('/success')}
onError={(error) => console.error(error)}
/>
</div>
);
}
Features:
Standalone payment method collection:
import { PaymentMethodForm } from '@/components/payments/payment-method-form';
export default function AddPaymentMethod() {
return (
<PaymentMethodForm
onComplete={(paymentMethodId) => {
console.log('Payment method created:', paymentMethodId);
}}
customerId="cus_xxx"
/>
);
}
Features:
Display and manage subscriptions:
import { SubscriptionCard } from '@/components/payments/subscription-card';
export default function SubscriptionPage() {
return (
<SubscriptionCard
subscription={{
id: 'sub_xxx',
status: 'active',
currentPeriodEnd: new Date('2025-12-01'),
plan: { name: 'Pro Plan', amount: 2999 }
}}
onCancel={() => handleCancellation()}
onUpdate={() => handleUpdate()}
/>
);
}
Features:
Compare pricing tiers:
import { PricingTable } from '@/components/payments/pricing-table';
const plans = [
{
id: 'price_free',
name: 'Free',
price: 0,
features: ['10 API calls/month', 'Basic support']
},
{
id: 'price_pro',
name: 'Pro',
price: 2999,
features: ['1000 API calls/month', 'Priority support', 'Advanced features']
}
];
export default function Pricing() {
return <PricingTable plans={plans} onSelectPlan={(planId) => handleCheckout(planId)} />;
}
Features:
Display transaction history:
import { PaymentHistory } from '@/components/payments/payment-history';
export default function BillingPage() {
return (
<PaymentHistory
customerId="cus_xxx"
limit={10}
onLoadMore={() => loadMorePayments()}
/>
);
}
Features:
All components use Tailwind CSS and support customization:
Customize Stripe Elements appearance:
const appearance = {
theme: 'stripe',
variables: {
colorPrimary: '#0070f3',
colorBackground: '#ffffff',
colorText: '#000000',
colorDanger: '#df1b41',
fontFamily: 'system-ui, sans-serif',
spacingUnit: '4px',
borderRadius: '4px'
}
};
<Elements stripe={stripePromise} options={{ appearance }}>
<CheckoutForm />
</Elements>
Override default Tailwind classes:
<CheckoutForm
className="custom-checkout"
buttonClassName="bg-blue-600 hover:bg-blue-700"
errorClassName="text-red-600 text-sm"
/>
All components include full TypeScript support:
import type {
CheckoutFormProps,
PaymentMethodFormProps,
SubscriptionCardProps,
PricingTableProps,
PaymentHistoryProps
} from '@/types/payments';
Type Definitions:
Components provide comprehensive error handling:
<CheckoutForm
onError={(error) => {
switch (error.type) {
case 'card_error':
// Show user-friendly message
toast.error(error.message);
break;
case 'validation_error':
// Handle validation errors
break;
default:
// Generic error handling
console.error(error);
}
}}
/>
Error Types:
All components follow WCAG 2.1 AA standards:
Example:
<button
type="submit"
aria-label="Complete payment"
aria-disabled={isProcessing}
className="focus:ring-2 focus:ring-blue-500"
>
{isProcessing ? 'Processing...' : 'Pay Now'}
</button>
# Validate all components
bash scripts/validate-components.sh
# Test specific component
bash scripts/validate-components.sh CheckoutForm
Use Stripe test cards:
4242 4242 4242 4242 - Success
4000 0000 0000 0002 - Decline
4000 0000 0000 9995 - Insufficient funds
Full checkout implementation with cart summary:
// See: examples/checkout-page-example.tsx
// Complete page with:
// - Order summary
// - Checkout form
// - Success/error handling
// - Loading states
// - Receipt generation
Subscription portal with upgrade/downgrade:
// See: examples/subscription-management-example.tsx
// Complete portal with:
// - Current plan display
// - Pricing comparison
// - Upgrade/downgrade flow
// - Cancellation handling
// - Invoice history
Integrate payment form in multi-step flow:
// See: examples/payment-form-integration-example.tsx
// Multi-step checkout with:
// - Shipping information
// - Payment details
// - Order confirmation
// - Progress indicator
Required environment variables:
# .env.local (NEVER commit this file)
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_your_key_here
STRIPE_SECRET_KEY=sk_test_your_key_here
STRIPE_WEBHOOK_SECRET=whsec_your_webhook_secret_here
# Optional
NEXT_PUBLIC_STRIPE_CURRENCY=usd
NEXT_PUBLIC_APP_URL=http://localhost:3000
Add to .gitignore:
.env.local
.env.*.local
.env
Dependencies:
Stripe Setup:
Never expose secret keys client-side
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY in componentsValidate on server
Use HTTPS in production
Implement CSP headers
Handle PCI compliance
Check environment variable:
echo $NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
Verify format starts with pk_test_ or pk_live_
Ensure server-side API route exists:
// app/api/create-payment-intent/route.ts
import { stripe } from '@/lib/stripe-server';
export async function POST(req: Request) {
const { amount } = await req.json();
const paymentIntent = await stripe.paymentIntents.create({
amount,
currency: 'usd',
});
return Response.json({ clientSecret: paymentIntent.client_secret });
}
Verify StripeProvider wraps component:
// Must be wrapped
<StripeProvider>
<CheckoutForm />
</StripeProvider>
Scripts:
scripts/install-stripe-react.sh - Install dependenciesscripts/setup-stripe-provider.sh - Configure providerscripts/generate-component.sh - Generate new componentsscripts/validate-components.sh - Validate setupTemplates:
templates/StripeProvider.tsx - Provider wrappertemplates/CheckoutForm.tsx - Checkout formtemplates/PaymentMethodForm.tsx - Payment method inputtemplates/SubscriptionCard.tsx - Subscription displaytemplates/PricingTable.tsx - Pricing comparisontemplates/PaymentHistory.tsx - Transaction historyExamples:
examples/checkout-page-example.tsx - Complete checkoutexamples/subscription-management-example.tsx - Subscription UIexamples/payment-form-integration-example.tsx - Multi-step flowPlugin: payments Version: 1.0.0 Category: UI Components Framework: Next.js + Stripe Elements
Google File Search API patterns for managed RAG with Gemini. Covers both TypeScript (@google/genai) and Python (google-genai) SDKs. Use when building File Search integrations, implementing RAG with Google AI, or when user mentions Google File Search, Gemini RAG, document indexing, or semantic search.
BullMQ queue configuration patterns including connection pooling, job options, rate limiting, and TypeScript types. Use when setting up queues or configuring job behavior.
BullMQ worker implementation patterns including job processors, concurrency, error handling, and graceful shutdown. Use when creating workers or handling job processing.
DigitalOcean Managed Database provisioning and connection patterns
DigitalOcean networking patterns - VPCs, firewalls, load balancers, DNS
DigitalOcean Spaces (S3-compatible) object storage patterns