stripe
Master Stripe payment integration across Next.js and React with server-side payment intent creation, client-side checkout forms, and subscription lifecycle management. This skill covers webhook handling for reliable event processing, customer management, and security practices including signature verification and secret key protection.
Stripe guides you through secure payment processing and subscription management in Next.js and React applications.
AI-generated summary based on this skill's SKILL.md
Install
Mindrally/skills/stripe
git clone https://github.com/Mindrally/skills
cp -r skills/stripe ~/.claude/skills/stripenpx skillfed install Mindrally/skills/stripeFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I integrate Stripe payments in Next.js?
Stripe enables payment processing in Next.js by combining server-side payment intent creation with client-side checkout forms. Use Stripe's Node.js library on your API routes to create payment intents securely, then render Stripe Elements or Stripe.js on the frontend to collect card details. This separation ensures your secret keys never reach the browser while maintaining PCI compliance through Stripe's hosted tokenization.
What are stripe webhook handling best practices?
Stripe webhook handling requires verifying webhook signatures using your endpoint secret to ensure authenticity, then processing events idempotently so duplicate deliveries don't cause issues. Store webhook event IDs to detect replays, handle asynchronous processing gracefully, and return a 2xx status immediately to acknowledge receipt. This prevents Stripe from retrying failed webhooks and ensures reliable event processing.
How do I set up Stripe subscription management?
Stripe subscription management involves creating customers via the Stripe API, attaching payment methods, then creating subscriptions with recurring billing intervals. Stripe handles automatic charge scheduling and manages the subscription lifecycle. Use webhooks to listen for subscription events like customer.subscription.updated and invoice.payment_succeeded to sync state with your database and trigger application logic.
How should I create a payment intent with the Stripe API?
Stripe's payment intent API requires calling stripe.paymentIntents.create() on your server with the amount in cents, currency, and customer ID. Return the client secret to your frontend, where Stripe.js uses it to confirm payment. Include idempotency keys to ensure retries don't create duplicate intents, and handle the response status to determine next steps like 3D Secure authentication.
What's the best way to handle Stripe payment failures?
Stripe payment failures require checking the payment intent status and error codes to determine the cause—declined cards, expired credentials, or authentication failures. Implement retry logic with exponential backoff for transient errors, display user-friendly error messages for declined cards, and log failures for debugging. Use webhooks to monitor charge.failed events and notify customers of issues affecting their subscriptions.
How do I verify Stripe webhook signatures in TypeScript?
Stripe webhook signature verification uses the stripe.webhooks.constructEvent() method with your raw request body, signature header, and endpoint secret. This ensures the webhook came from Stripe and wasn't tampered with. In TypeScript, type the event object using Stripe's event types, then handle specific event types like payment_intent.succeeded. Always verify before processing to maintain security.
SKILL.md
rendered from the published skill — quoted content, verbatim
Stripe Integration
You are an expert in Stripe payment integration, TypeScript, React, and Next.js for building secure payment solutions.
Core Principles
- Always handle payments on the server side
- Use Stripe's latest API version
- Implement proper error handling
- Follow PCI compliance best practices
- Use webhooks for reliable event handling
Server-Side Setup
Stripe Client Configuration
import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
apiVersion: '2023-10-16',
typescript: true,
});
Create Payment Intent
```typescript // app/api/create-payment-intent/route.ts import { NextResponse } from 'next/server'; import Stripe from 'stripe';
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
export async function POST(request: Request) { try { const { amount, currency = 'usd' } = await request.json();
const paymentIntent = await stripe.paymentIntents.create({
amount,
currency,
automatic_payment_methods: {
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
stripe/SKILL.md