Node.js Implementation of Stripe Checkout Subscriptions and Webhooks

In this tutorial, we will walk through setting up a subscription-based payment system using Stripe Checkout and Webhooks with Node.js. Stripe Checkout makes it easy to design and customize a checkout experience while webhooks allow you to receive real-time notifications on various events in your Stripe account.

Prerequisites:

1. Node.js installed on your machine
2. Basic knowledge of JavaScript and Node.js
3. A Stripe account (if you don’t already have one, sign up at https://stripe.com/)

Step 1: Setting up a Node.js project
First, create a new Node.js project by running the following commands in your terminal:

mkdir stripe-subscription
cd stripe-subscription
npm init -y

Next, install the stripe and express packages by running:

npm install stripe express

Step 2: Setting up Stripe API keys
Log in to your Stripe account and navigate to the Developers section. Under the API keys tab, you will find your publishable and secret API keys. Copy these keys and store them in a .env file in the root of your project directory:

STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_SECRET_KEY=your_stripe_secret_key

Step 3: Setting up an Express server
Create a new file named server.js in your project directory. Add the following code to set up an Express server and configure it to use the Stripe API keys from the .env file:

require('dotenv').config();
const express = require('express');
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

const app = express();

app.use(express.static('public'));
app.use(express.json());

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Step 4: Creating a Stripe Checkout session
Next, we will create a route to handle creating a new Stripe Checkout session for a subscription. Add the following code to your server.js file:

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    line_items: [
      {
        price: 'price_1IwSHqLKpys1qP7fNLyy2mwa', // Replace with your price ID
        quantity: 1
      }
    ],
    mode: 'subscription',
    success_url: 'http://localhost:3000/success.html',
    cancel_url: 'http://localhost:3000/cancel.html'
  });

  res.json({ sessionId: session.id });
});

In this code, we are creating a new Stripe Checkout session with a single subscription item. Replace the price value with your own price ID.

Step 5: Setting up a success and cancel page
Create two HTML files named success.html and cancel.html in a public directory in your project. Add some simple messages to each file to indicate success and cancellation of the subscription.

Step 6: Handling webhook events
To handle webhook events such as successful payments and cancellations, we need to set up a webhook endpoint in our Node.js server. Add the following code to your server.js file:

const endpointSecret = 'whsec_...'; // Replace with your webhook secret

app.post('/webhook', express.raw({ type: 'application/json' }), (req, res) => {
  const sig = req.headers['stripe-signature'];

  let event;

  try {
    event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
  } catch (err) {
    res.status(400).send(`Webhook Error: ${err.message}`);
    return;
  }

  switch (event.type) {
    case 'payment_intent.succeeded':
      // Handle successful payment
      break;
    case 'checkout.session.completed':
      // Handle completed checkout session
      break;
    case 'customer.subscription.deleted':
      // Handle deleted subscription
      break;
    default:
      // Handle other events
      break;
  }

  res.status(200).send();
});

In this code, we are verifying the webhook signature, parsing the event, and handling different event types. Replace the endpointSecret value with your own webhook signing secret.

Step 7: Testing the setup
Start your Express server by running node server.js in your terminal. Visit http://localhost:3000 in your browser and trigger the payment flow to test the subscription creation process.

You can test webhook events by using the Stripe CLI or triggering events from your Stripe Dashboard. Make sure to replace the endpointSecret value with the actual signing secret from your webhook settings.

That’s it! You have successfully set up a subscription-based payment system with Stripe Checkout and Webhooks using Node.js. Feel free to customize and expand upon this setup to fit your specific needs.