Skip to main content

PlanSelector

The PlanSelector component displays available subscription plans for users to choose from.

Usage​

import { PlanSelector } from "@/components/PlanSelector";
function PricingPage() {
  return (
    <div>
      <h1>Choose Your Plan</h1>
      <PlanSelector
        successUrl="/dashboard"
        cancelUrl="/"
        userEmail="user@example.com"
      />
    </div>
  );
}

Props​

  • successUrl: The URL to redirect to after successful payment (default: "/login")
  • cancelUrl: The URL to redirect to if the user cancels (default: "/")
  • userEmail: The email of the current user (optional)

Functionality​

  • Displays a list of available subscription plans
  • Handles plan selection and initiates the checkout process
  • Integrates with Stripe for payment processing
  • Supports both one-time payments and subscriptions

Customization​

The component uses Tailwind CSS for styling. You can customize the appearance by modifying the CSS classes or updating the Tailwind configuration.