Web Developers : 19-Implement Stripe Subscription Billing in Next.js Application

Screenshot from the tutorial

Implementing Stripe Subscription Billing in a Next.js Application

In today’s digital landscape, subscription-based services are becoming increasingly popular. As a web developer, integrating a payment solution like Stripe into your Next.js application can streamline the billing process and enhance user experience. In this blog post, we will walk through the steps to implement Stripe subscription billing in a Next.js application, based on insights from a YouTube tutorial.

Prerequisites

Before we dive in, ensure you have the following:

1. Node.js and npm: Make sure you have Node.js installed. You can download it from nodejs.org.
2. Next.js Application: If you don’t have a Next.js app set up, you can create one using the command:

   npx create-next-app@latest your-app-name
   

3. Stripe Account: Sign up for a Stripe account at stripe.com. Once registered, you’ll need your API keys (found in the Developers section).

Step 1: Install Stripe Packages

To get started, you'll need to install the Stripe package. Open your terminal and navigate to your Next.js project directory, then run:

npm install stripe

This package will allow you to interact with the Stripe API efficiently.

Step 2: Configure Environment Variables

For security reasons, you should store your API keys in environment variables. Create a .env.local file in the root of your Next.js project and add the following lines:

STRIPE_SECRET_KEY=your_secret_key
NEXT_PUBLIC_STRIPE_PUBLIC_KEY=your_public_key

Replace your_secret_key and your_public_key with your actual Stripe API keys.

Step 3: Create an API Route

Next.js allows you to create API routes easily. We will create an API route to handle subscription creation.

Create a new file in the pages/api directory called create-subscription.js and add the following code:

import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { priceId, customerId } = req.body;

  try {
    const subscription = await stripe.subscriptions.create({
      customer: customerId,
      items: [{ price: priceId }],
      expand: ['latest_invoice.payment_intent'],
    });

    res.status(200).json(subscription);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

Explanation:

• We import the Stripe library and initialize it with our secret key.
• We check if the request method is POST and retrieve the priceId and customerId from the request body.
• We create a subscription using the Stripe API and return the subscription object in the response.

Step 4: Set Up the Frontend

Now, let’s create a simple form on the frontend to allow users to subscribe. Open or create the pages/index.js file and add the following code:

import { useState } from 'react';

export default function Home() {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubscribe = async (event) => {
    event.preventDefault();
    setLoading(true);
    
    const res = await fetch('/api/create-subscription', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        priceId: 'your_price_id', // Replace with your actual price ID
        customerId: 'your_customer_id', // Replace with actual customer ID
      }),
    });

    const data = await res.json();
    if (res.ok) {
      alert('Subscription created successfully!');
    } else {
      alert(`Error: ${data.error}`);
    }
    setLoading(false);
  };

  return (
    <div>
      <h1>Subscribe to Our Service</h1>
      <form onSubmit={handleSubscribe}>
        <input 
          type="email" 
          placeholder="Enter your email" 
          value={email} 
          onChange={(e) => setEmail(e.target.value)} 
          required 
        />
        <button type="submit" disabled={loading}>
          {loading ? 'Loading...' : 'Subscribe'}
        </button>
      </form>
    </div>
  );
}

Explanation:

• We create a simple form that captures the user's email.
• On form submission, we make a POST request to our API route (/api/create-subscription) with the necessary data.
• Depending on the response, we provide feedback to the user.

Step 5: Testing the Integration

To test your implementation:

1. Run your Next.js application using:

   npm run dev
   

2. Navigate to http://localhost:3000 in your web browser.
3. Fill in the subscription form and submit it.

If everything is set up correctly, you should see a success message, and the subscription will be created in your Stripe dashboard.

Conclusion

Integrating Stripe subscription billing into a Next.js application can significantly enhance your service offerings. By following this tutorial, you’ve laid the groundwork for a subscription-based model.

Feel free to extend this functionality by adding features like user authentication, handling subscription cancellations, and displaying subscription status. Happy coding!

For more details, check out the full video tutorial here.

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios