How to Set Up Stripe Subscriptions in Next.js 15
Integrating Stripe subscriptions into your Next.js application can elevate your SaaS offering. In under 45 minutes, you can go from the Stripe dashboard to a functioning webhook handler. This guide breaks down each step in a clear manner, ensuring that even solo founders can implement paid plans effectively. Follow these concrete steps to streamline your payment process and boost your revenue.
By SuperFast Team · Published Apr 23, 2026
Step 1: Create a Stripe Account and Get API Keys
Start by signing up for a Stripe account. After verifying your email, navigate to the dashboard. Here, you will find your API keys under the 'Developers' section. You’ll need the Publishable Key for client-side operations and the Secret Key for server-side processing. Make sure to switch to 'Test mode' to avoid real charges while setting up.
Step 2: Install Stripe Dependencies in Next.js
Use npm or yarn to install the Stripe package in your Next.js project. Run the following command: `npm install stripe`. This installs the Stripe library necessary for backend operations. For the frontend, use `@stripe/react-stripe-js` to handle payment elements easily, with the command: `npm install @stripe/react-stripe-js`. This setup allows for seamless integration of Stripe's elements in your React components.
Step 3: Configure Subscription Products in Stripe Dashboard
Within the Stripe dashboard, navigate to 'Products' and create a new product for your subscription service. Add pricing details, including the subscription frequency (monthly or yearly). You can define multiple pricing tiers if necessary. This configuration allows you to manage your offerings directly from Stripe, providing flexibility in how you charge your customers.
Step 4: Implement the App Router for Webhooks
Using Next.js 15, you can leverage the new App Router feature to handle incoming webhooks. Create a new route in your `app/api` directory, for example, `app/api/webhooks/stripe/route.js`. Use the Stripe library to verify webhook signatures and handle events such as 'checkout.session.completed' to manage subscription activation. This setup ensures your application responds directly to Stripe events, keeping your database updated.
Step 5: Test Your Integration
Once your webhook is set up, test your integration using Stripe's test cards. Run your Next.js application and simulate subscription transactions to ensure everything works correctly. Check your Stripe dashboard for real-time updates on the transactions and verify that your webhook receives and processes the events accurately. This testing phase is critical before going live.
Comparison of Subscription Features Across Popular Platforms
- Stripe
- Custom pricing, extensive API, webhooks support
- Highly suitable for SaaS with flexible billing.
- PayPal
- Standardized pricing, limited API customization
- Best for basic subscription services.
- Braintree
- Integrated PayPal support, more complex setup
- Ideal for businesses needing multiple payment options.
Frequently asked questions
- How do I handle failed payments with Stripe?
- Implement webhook handling for 'invoice.payment_failed' events to notify users and retry payments.
- Can I test Stripe subscriptions without real charges?
- Yes, use Stripe's test mode and their provided test card numbers.
- What is the best way to secure my Stripe secret key?
- Store your secret key in environment variables and never expose it in the frontend code.
- Is it easy to switch from test to live mode in Stripe?
- Yes, just toggle the mode in your Stripe dashboard and update your API keys accordingly.
- How can I offer free trials with Stripe?
- Set up a trial period when creating your subscription plans in the Stripe dashboard.