Indie Kit DocsIndie Kit Docs
Tutorials

Create Subscription

Learn how to implement subscription payments in your Indie Kit application

Create Subscription 💳

Let's implement subscription payments in your Indie Kit application! 🚀

Prerequisites ✅

  1. Set up a payment gateway:

  2. Create a plan in the database:

    • Go to /super-admin/plans
    • Add plan details (name, features, quotas)
    • Add appropriate price IDs from your payment gateway

Implementation 🛠️

Use the getSubscribeUrl helper to create subscription links:

import getSubscribeUrl, { PlanType, PlanProvider } from '@/lib/plans/getSubscribeUrl'
 
// Example: Monthly subscription with Stripe
const monthlyStripeUrl = getSubscribeUrl({
  codename: "premium",
  type: PlanType.MONTHLY,
  provider: PlanProvider.STRIPE,
})
 
// Example: Yearly subscription with LemonSqueezy
const yearlyLemonUrl = getSubscribeUrl({
  codename: "premium",
  type: PlanType.YEARLY,
  provider: PlanProvider.LEMON_SQUEEZY,
})
 
// Example: With trial period
const trialUrl = getSubscribeUrl({
  codename: "premium",
  type: PlanType.MONTHLY,
  provider: PlanProvider.STRIPE,
  trialPeriodDays: 14,
})

Usage Example 📝

Here's a complete example of a subscription button component:

function SubscribeButton({ plan }) {
  return (
    <div className="flex flex-col gap-4">
      {/* Monthly Subscription */}
      {plan.hasMonthlyPricing && (
        <Link
          href={getSubscribeUrl({
            codename: plan.codename,
            type: PlanType.MONTHLY,
            provider: PlanProvider.STRIPE,
          })}
        >
          <Button className="w-full">
            Subscribe Monthly - ${plan.monthlyPrice / 100}
          </Button>
        </Link>
      )}
 
      {/* Yearly Subscription */}
      {plan.hasYearlyPricing && (
        <Link
          href={getSubscribeUrl({
            codename: plan.codename,
            type: PlanType.YEARLY,
            provider: PlanProvider.STRIPE,
          })}
        >
          <Button className="w-full">
            Subscribe Yearly - ${plan.yearlyPrice / 100}
          </Button>
        </Link>
      )}
    </div>
  )
}

Best Practices 💡

  1. Plan Configuration

    • Use meaningful plan codenames
    • Keep price IDs in sync with payment gateway
    • Test subscription flows in development

  2. User Experience

    • Show clear pricing information
    • Indicate subscription period
    • Display trial period if available
    • Handle loading and error states

  3. Testing

    • Test with test mode in payment gateway
    • Verify webhook handling
    • Test subscription lifecycle
    • Check upgrade/downgrade flows

Now you can implement subscription payments in your Indie Kit application! 🎉

Previous

Create Email Sequence

Next

Create One-Time Payment

On this page