Setup Stripe Integration

To integrate Stripe with your SaaS application for payment processing, follow these steps:

Steps to set up Stripe

1. Create a Stripe Account

• Go to the Stripe website (opens in a new tab) and sign up for an account if you don't have one.
• After logging in, you'll be directed to the Stripe Dashboard.

2. Get Your API Keys

• In the Stripe Dashboard, click on "Developers" in the sidebar.
• Under "API Keys", you'll find your Publishable Key and Secret Key.
  • Publishable Key: This key can be exposed in the frontend.
  • Secret Key: This key should be kept secure and used only in server-side code.

3. Configure Webhooks

Webhooks enable Stripe to send real-time event notifications to your application, such as successful payments or subscription updates.

• In the Stripe Dashboard, go to "Developers" > "Webhooks".
• Click "Add endpoint" to create a new webhook.
• In the URL field, enter your webhook endpoint:
  {your-domain.com}/api/stripe/events
• Subscribe to the following events:
  • checkout.session.completed
  • customer.subscription.created
  • customer.subscription.updated
  • invoice.created
• Click "Add endpoint" to save the webhook configuration.
• Copy the "Signing secret" from the webhook settings.

4. Create Subscription Plans in Stripe

• In the Stripe Dashboard, go to the "Billing" section.
• Under the "Products" tab, click "Add product" to create a new product.
• For each plan, enter the following details:
  • Product Name: This will be the name of your plan (e.g., "Free Plan", "Pro Plan", etc.).
  • Pricing: Choose the pricing model (e.g., recurring).
  • Billing Interval: Set the billing cycle (e.g., monthly, yearly).
• After creating the product, you will receive a Price ID for each pricing option.

5. Save the Price IDs

• After creating the subscription plans, make sure to copy the Price IDs for each of your plans (e.g., price_xyz123, price_abc456).
• These Price IDs are necessary for integrating Stripe with your application.

6. Add Stripe to Your Environment

You need to add your Stripe keys and Price IDs to the environment variables to securely use them in your application.

Create Environment Variables:

1. In the root of your project, create a .env file if you don't have one already.

2. Add the following variables to the .env file:

   STRIPE_PUBLISHABLE_KEY=<your_publishable_key>  # Publishable key (frontend)
   STRIPE_SECRET_KEY=<your_secret_key>  # Secret key (backend)
   STRIPE_WEBHOOK_SECRET=<your_webhook_secret>  # Webhook secret
   FREE_PLAN_PRICE_ID=<your_free_plan_price_id>  # Free plan price ID
   PLAN_1_PRICE_ID=<your_plan_1_price_id>  # Plan 1 price ID
   PLAN_2_PRICE_ID=<your_plan_2_price_id>  # Plan 2 price ID

7. Handle Failed Payments and Subscription/Invoice Status

To ensure the credit system works correctly, configure Stripe to handle failed payments and update subscription and invoice statuses.

• Subscription Status: If payment retries fail, mark the subscription as unpaid or past-due instead of canceled. This keeps the subscription active and allows the system to track the billing cycle. You can adjust this under Billing > Settings > Subscriptions and emails in the Stripe Dashboard.
• Invoice Status: If payment retries fail, mark the invoice as uncollectible. This prevents confusion in your billing system and ensures accurate accounting. Configure this under Billing > Settings > Subscriptions and emails in the Stripe Dashboard.