Step 3: Stripe Setup

Setting Up Stripe

To integrate Stripe into your application, you’ll need to configure some environment variables and set up the Customer Portal. Follow these steps to get everything set up.

Table of Contents


Getting Stripe Keys

📣

Before you proceed, ensure you have a Stripe account. If you don't, create one at Stripe's website (opens in a new tab).

To start using Stripe, you need to obtain your API keys and configure them in your environment variables.

  1. Access Your Stripe Dashboard:

  2. Navigate to API Keys:

    • In the left-hand menu, click on Developers.
    • Select API keys.
  3. Obtain Your Keys:

    • Publishable Key: This key is used on the client-side of your application. Copy the key labeled Publishable key.
    • Secret Key: This key is used on the server-side of your application. Copy the key labeled Secret key.
  4. Add Keys to Your env.local File:

    • Open the env.local file located in your project’s root directory.

    • Add the following lines to your env.local file, replacing the placeholder text with your actual keys:

      NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY={your_publishable_key_here}
      STRIPE_SECRET_KEY={your_secret_key_here}
    • Save the env.local file after adding the keys.

    Note: For local development, consider using the test keys available in your Stripe Dashboard under the "View test data" mode. Switch to live keys when deploying to production.


Customer Billing Portal

To allow users to manage their subscriptions and payment methods, you'll need to enable the Stripe Customer Portal. Follow these steps to set it up:

  1. Enable the Customer Portal:

  2. Customize the Portal (Optional):

    • Stripe provides options to customize the look and functionality of the portal. Adjust settings according to your needs, such as branding, language, and features available to users.
  3. Integrate the Portal into Your Application:

    • Once the portal is enabled, users can access their Stripe account to manage subscriptions, payment methods, invoices, and more.
    • SaaSavant includes a pre-made user account page with a link that directs users to their Stripe portal. Ensure that this link is correctly integrated into your product by.