Skip to main content

Stripe Subscription Setup

This document provides an overview of setting up Stripe subscriptions in your project. We'll cover the necessary environment variables, the functionality provided by the project, and a guide for end users to configure their Stripe account and products.

Environment Variables​

Ensure you have the following environment variables configured in your .env.local file:

# Stripe
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<your_stripe_publishable_key>
STRIPE_SECRET_KEY=<your_stripe_secret_key>
STRIPE_WEBHOOK_SECRET=<your_stripe_webhook_secret>

Functionality Provided by the Project​

The project already handles various aspects of Stripe integration, including:

  • Checkout: The checkout process is managed in the checkout directory, where users can start a subscription.
  • Customer Portal: The customer-portal directory manages interactions with Stripe's customer portal.
  • Products: The products directory lists the products available for subscription.
  • Webhooks: The webhook directory processes Stripe webhooks to handle events like subscription updates.

Setting Up Stripe​

To set up Stripe subscriptions, follow these steps:

  1. Create a Stripe Account: If you don't have one already, sign up for a Stripe account.
  2. Configure Stripe: Set up your products and pricing in the Stripe dashboard.
  3. Replace Price IDs: In the pricing-stripe page, replace the price IDs with the ones you created in Stripe. This page can be used as an example to set up subscriptions in the frontend.

Example Pricing Section​

Here is a snippet from the pricing-stripe page to give you an idea of how the subscriptions are handled:

const handleButtonClick = async (priceId) => {
  try {
    const response = await fetch("/api/stripe/checkout", {
      method: "POST",
      body: JSON.stringify({
        priceId,
        successUrl: `${window.location.origin}/checkout-success`,
        cancelUrl: `${window.location.origin}`,
        mode: "subscription",
      }),
    });
    const { data } = await response.json();
    window.location.href = data;
  } catch (error) {
    console.error(error.message);
  }
};

Suggestions for End Users​

Note: Proper setup and testing are crucial to ensure smooth operation of Stripe subscriptions.

  • Stripe Dashboard: Ensure you have set up your products and pricing correctly in the Stripe dashboard.
  • Replace Price IDs: Update the price IDs in the pricing-stripe page with your own product IDs from Stripe.
  • Test Webhooks: Use Stripe's testing tools to ensure your webhooks are configured and working correctly.
  • Check Documentation: Refer to the Stripe API documentation for more details on managing subscriptions and webhooks.