Guides > Stripe

Learn how to implement Stripe payments and subscription management in your Nexset application.

Initial Setup

• 1

  Navigate to Stripe Dashboard > [More +] > [Product Catalog] > [+ Add Product]

• 2

  Set your product name and monthly price (or your preferred pricing model)

• 3

  Click [Save Product] to create the product

• 4

  Copy the price ID (starts with price_) from the [Pricing] section

• 5

  Add the price ID to the first plan in config.stripe.plans array in config.js

Dashboard Implementation

Create or update your dashboard page to include the subscription button:

import ButtonAccount from "@/components/ButtonAccount";
import ButtonCheckout from "@/components/ButtonCheckout";
import config from "@/config";

export const dynamic = "force-dynamic";

export default async function Dashboard() {
  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <ButtonAccount />

        <h1 className="text-3xl md:text-4xl font-extrabold">
          Subscribe to get access:
        </h1>

        <ButtonCheckout
          mode="subscription"
          priceId={config.stripe.plans[0].priceId}
        />
      </section>
    </main>
  );
}

Testing the Integration

• 1

  Start your local development server

• 2

  Visit http://localhost:3000/dashboard

• 3

  Log in to your account

• 4

  Click the subscription button

• 5

  Use test card number: 4242 4242 4242 4242

Webhook Handling

The application includes a webhook handler at /api/webhook/stripe/route.js that manages user access based on Stripe events. The handler updates the hasAccess boolean in the User schema or has_access in Supabase profiles.

• 1

  Ensure you have a Stripe local endpoint running for development

• 2

  The webhook handles various Stripe events automatically

• 3

  You can extend the webhook logic for custom features like:

• 4

  - Sending abandoned cart emails

• 5

  - Managing user credits

• 6

  - Custom notification systems

Account Management

Users can manage their subscriptions and account settings using the ButtonAccount component, which provides functionality for:

• 1

  Canceling subscriptions

• 2

  Updating payment methods

• 3

  Viewing billing history

• 4

  Managing account settings

Next Steps

With the basic Stripe integration complete, you can now build your SaaS application on top of this payment infrastructure. The system handles user access, subscription management, and payment processing automatically.