payments

Implements Stripe checkout sessions, webhooks, and subscription billing in Next.js applications.

Updated Jul 31, 2026
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill payments-aarnavbaddam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: payments
Source: https://github.com/AarnavBaddam/skills/tree/main/payments
Command: npx skills add https://github.com/AarnavBaddam/skills --skill payments-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires stripe, @stripe/stripe-js, @stripe/react-stripe-js.

What problem does it solve? Integrating Stripe payments into a Next.js application involves many moving parts—checkout sessions, webhook signature verification, subscription lifecycle events, and environment variable setup—and mistakes in any of these can break payment flows or create security holes. ## Core Features & Use Cases - Checkout Sessions: Create one-time payment and subscription checkouts via Server Actions or API routes, including Embedded Checkout and Stripe Elements for custom forms. - Webhook Handling: Verify Stripe webhook signatures and handle events like checkout.session.completed, invoice.payment_succeeded, and customer.subscription.deleted. - Subscription Billing: Set up recurring billing and a Stripe Customer Portal so users can manage their own subscriptions. - Use Case: You are adding a paid tier to your Next.js SaaS deployed on Vercel. Use this Skill to provision Stripe via the Vercel Marketplace, create a subscription checkout, and wire up webhooks that grant or revoke access based on payment events. ## Quick Start Ask the AI to add a Stripe subscription checkout with webhook handling to your Next.js app using the Vercel Marketplace integration.

Frequently Asked Questions about payments

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Stripe checkout session in Next.js?

Create a checkout session by calling stripe.checkout.sessions.create with a mode, line items, and success/cancel URLs, either in a Server Action or an API route. Then redirect the user to the returned session URL to complete payment on Stripe's hosted page.

How to handle Stripe webhooks in a Next.js API route?

Read the raw request body as text, then verify it with stripe.webhooks.constructEvent using the stripe-signature header and your webhook secret. Handle events like checkout.session.completed and invoice.payment_succeeded in a switch statement, and never apply JSON body parsing to webhook routes.

Does Stripe integrate natively with Vercel?

Yes, Stripe is a native Vercel Marketplace integration installed via vercel integration add stripe. It auto-provisions a sandbox and environment variables including STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY, and STRIPE_WEBHOOK_SECRET.

Stripe Elements vs Checkout Sessions, which should I use?

Checkout Sessions redirect users to Stripe-hosted pages or render embedded checkout, offloading PCI compliance with minimal code. Stripe Elements gives you fully custom payment forms inside your UI but requires more client-side integration with @stripe/react-stripe-js.

Why does Stripe webhook signature verification fail?

Verification fails when the request body is parsed as JSON before verification, since the signature is computed over the raw body. Read the body with req.text() and confirm you are using the correct STRIPE_WEBHOOK_SECRET for that endpoint.