Lemon Squeezy

BuilderKit provides a seamless integration with Lemon Squeezy for handling payments and subscriptions. This documentation will guide you through the process of setting up and using Lemon Squeezy payment functionality in your application.

Prerequisites

Before proceeding with the integration, ensure that you have the following:

A Lemon Squeezy (opens in a new tab) account
Lemon Squeezy API key
Lemon Squeezy webhook secret

You can get the API key and webhook secret from your Lemon Squeezy dashboard. Check the Lemon Squeezy documentation (opens in a new tab) for more information on how to obtain these credentials.

Configuration

Set the required environment variables in your .env file:

Replace the placeholder values with your actual Lemon Squeezy credentials:

.env

LEMON_SQUEZY_BASE_URL=your_lemon_squeezy_base_url
LEMON_SQUEEZY_API_KEY=your_lemon_squeezy_api_key
LEMON_SQUEEZY_WEBHOOK_SECRET=your_lemon_squeezy_webhook_secret

Update the src/config.ts file with your Lemon Squeezy configuration details:

src/config.ts

const config = {
  // ...
  lemonSqueezy: {
    baseUrl: "https://builderkit.lemonsqueezy.com/buy",
    emailParam: "checkout[email]",
    discountParam: "checkout[discount_code]",
    variant: {
      standard: {
        monthly: "81395ea4-4049-49a7-a11e-3ccdf620ce7e",
        annually: "feb7cf4b-d0e0-4f04-a4e9-55d4415824ff",
      },
      premium: {
        monthly: "eb0503cb-a58a-4a30-8fdf-86fa977bd3cb",
        annually: "cde373b7-1619-4788-9e6b-664ba048f693",
      },
    },
    plan: {
      245697: "standard",
      245701: "premium",
    },
  },
  // ...
};

baseUrl: The base URL for Lemon Squeezy checkout sessions.
emailParam: The parameter used to prefill the email input in the checkout form.
discountParam: The parameter used to prefill a discount code in the checkout form (optional).
variant: Mapping of product tiers and frequencies to Lemon Squeezy variant IDs.
plan: Mapping of Lemon Squeezy product IDs to subscription types.

Adjust the variant and plan mappings based on your Lemon Squeezy product setup.

Webhook Setup

BuilderKit includes a webhook handler for processing Lemon Squeezy subscription events. The webhook route is defined in src/app/api/webhooks/lemon-squeezy/route.ts.

src/app/api/webhooks/lemon-squeezy/route.ts

import config from "@/config";
import { supabaseAdmin } from "@/utils/supabase/admin";
import axios from "axios";
import { NextRequest, NextResponse } from "next/server";
import crypto from "crypto";
import { headers } from "next/headers";
 
// Environment variables for Lemon Squeezy API key, base URL, and webhook secret.
const BASE_URL = process.env.LEMON_SQUEZY_BASE_URL;
const API_KEY = process.env.LEMON_SQUEEZY_API_KEY;
const WEBHOOK_SECRET = process.env.LEMON_SQUEEZY_WEBHOOK_SECRET;
 
// ...
// Main function to handle incoming webhook events from Lemon Squeezy.
export async function POST(req: NextRequest): Promise<NextResponse> {
  // ...
}
 
// Handles the subscription created event from Lemon Squeezy.
async function handleSubscriptionCreated(subscription: any) {
  // ...
}
 
// Handles the subscription updated event from Lemon Squeezy.
async function handleSubscriptionUpdated(subscription: any) {
  // ...
}

This code sets up the webhook route to handle incoming events from Lemon Squeezy, such as subscription creation and updates. It verifies the webhook signature, processes the event data, and updates the database accordingly.

Configure the webhook in your Lemon Squeezy dashboard to point to the /api/webhooks/lemon-squeezy endpoint of your application.

Payment Button Component

BuilderKit provides a reusable payment button component (ButtonPayment) that handles the payment flow for different subscription plans and frequencies.

This component handles the payment actions for different plans and frequencies. It constructs the payment URL based on the selected provider, plan, and frequency, and redirects the user to the appropriate payment page.

Use the ButtonPayment component in your desired location, passing the required props:

<ButtonPayment provider="lemonsqueezy" tier="standard" frequency="monthly" />

This will render a payment button that initiates the Lemon Squeezy checkout process for the specified plan and frequency.

Conclusion

By following this documentation, you should now have Lemon Squeezy integration set up in your BuilderKit application. The webhook route will handle incoming events from Lemon Squeezy, updating the database accordingly, while the payment button component allows users to initiate the checkout process seamlessly.

Stripe Loops