Web Developers : 20-Implement Stripe Webhook Subscriptions in Next.js Using API Routes

Screenshot from the tutorial

Implementing Stripe Webhook Subscriptions in Next.js Using API Routes

In the world of web development, integrating payment gateways is a crucial task, especially when dealing with subscriptions. This blog post will guide you through implementing Stripe webhook subscriptions in a Next.js application using API routes. By the end of this tutorial, you will have a solid understanding of how to set up and handle Stripe webhooks effectively.

What Are Webhooks?

Webhooks are a way for one application to send real-time data to another whenever a specific event occurs. In the context of Stripe, webhooks allow your application to receive notifications about events related to billing, such as successful payments, subscription updates, and cancellations.

Prerequisites

Before diving into the implementation, make sure you have the following:

• A basic understanding of JavaScript and React.

• Node.js and npm installed on your machine.

• A Stripe account (sign up for a free account if you don’t have one).

• A Next.js application set up. If you don’t have one, you can create it using:

  npx create-next-app my-stripe-app
  cd my-stripe-app
  

Step 1: Install Stripe Package

To communicate with the Stripe API, you'll need to install the Stripe package. Run the following command in your Next.js project directory:

npm install stripe

Step 2: Create API Route for Webhook

Next.js allows you to create API routes easily. You will create a new API route that will handle incoming webhook events from Stripe.

1. Create a new file named webhook.js in the pages/api directory:

   pages/api/webhook.js
   

2. Add the following code to handle the webhook events:

   import { buffer } from 'micro';
   import Stripe from 'stripe';
   
   const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
   
   export const config = {
       api: {
           bodyParser: false,
       },
   };
   
   const webhookHandler = async (req, res) => {
       const buf = await buffer(req);
       const sig = req.headers['stripe-signature'];
   
       let event;
   
       try {
           event = stripe.webhooks.constructEvent(buf, sig, process.env.STRIPE_WEBHOOK_SECRET);
       } catch (err) {
           console.log(`Webhook Error: ${err.message}`);
           return res.status(400).send(`Webhook Error: ${err.message}`);
       }
   
       // Handle the event
       switch (event.type) {
           case 'customer.subscription.created':
               const subscription = event.data.object;
               console.log(`Subscription created: ${subscription.id}`);
               // Handle subscription creation
               break;
           case 'customer.subscription.updated':
               const updatedSubscription = event.data.object;
               console.log(`Subscription updated: ${updatedSubscription.id}`);
               // Handle subscription update
               break;
           case 'customer.subscription.deleted':
               const deletedSubscription = event.data.object;
               console.log(`Subscription deleted: ${deletedSubscription.id}`);
               // Handle subscription deletion
               break;
           default:
               console.log(`Unhandled event type: ${event.type}`);
       }
   
       res.json({ received: true });
   };
   
   export default webhookHandler;
   

Explanation

• Stripe Initialization: You initialize the Stripe instance using your secret key stored in the environment variable STRIPE_SECRET_KEY.
• Buffering the Request: Webhooks require the raw request data to validate the signature, which is why you need to disable the default body parser.
• Signature Verification: You extract the signature from the request headers and validate it using stripe.webhooks.constructEvent.
• Event Handling: You can handle different event types such as subscription creation, update, and deletion.

Step 3: Set Environment Variables

Create a .env.local file in the root of your project and add your Stripe secret key and webhook secret:

STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

Make sure to replace your_stripe_secret_key and your_stripe_webhook_secret with your actual keys from the Stripe dashboard.

Step 4: Test the Webhook Integration

To test your webhook integration, you can use Stripe CLI to forward events to your local server. Install Stripe CLI and run the following command:

stripe listen --forward-to localhost:3000/api/webhook

This command will start listening for events on your Stripe account and forward them to your API route.

Now, trigger a subscription event (such as creating a subscription) from your Stripe dashboard or using the Stripe API. You should see the logs in your console indicating that the events are being received.

Conclusion

In this tutorial, you learned how to implement Stripe webhook subscriptions in a Next.js application using API routes. By handling webhook events, you can keep your application in sync with Stripe’s data, ensuring that your subscription management is efficient and effective.

Next Steps

• Explore more event types provided by Stripe and expand your webhook handler to accommodate more functionality.
• Implement a user interface to manage subscriptions and display relevant information based on webhook events.
• Secure your webhook endpoint further by validating the request origin.

By following this guide, you are well on your way to mastering webhook integrations in your web applications. Happy coding!

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