Skip to main content

Lemon Squeezy Subscription 🍋

To setup your subscriptions or payment you need to have Lemon Squeezy account https://www.lemonsqueezy.com/

##🔧 Setup

Step 1: Access LemonSqueezy Dashboard​

  1. Access LemonSqueezy Dashboard: Log in to your LemonSqueezy account and navigate to the dashboard.

  2. Navigate to Products Section: Find the "Products" section in the sidebar menu and click on it.

  3. Add New Product: Click on the "Add Product" button and fill in the product details.

  4. IMPORTANT - Add Variants: Scroll down to the "Variants" section and add the necessary variants such as size, color, etc.

  5. Save Changes: After adding all variants, save or publish the product.

Step 2: Configure Application​

  1. Make sure your .env is fill for lemonsqueezy required env

  • LEMONSQUEEZY_API_KEY - https://docs.lemonsqueezy.com/guides/developer-guide/-getting-started#create-an-api-key

  • LEMONSQUEEZY_STORE_ID - To get the STORE_ID you have to hit this endpoint https://api.lemonsqueezy.com/v1/stores with your lemonsqueezy LEMONSQUEEZY_API_KEY as Bearer Token.

  • LEMONSQUEEZY_WEBHOOK_SECRET - lemonsqueezy webhook secret is a random string and numbers you use this link https://generate-secret.vercel.app/32 to generate one.

  • LEMONSQUEEZY_PRODUCT_ID - In Lemonsqueezy dashboard navigate to store -> products and pick a subscription product and get the PRODUCT_ID in the url ex: https://app.lemonsqueezy.com/products/251022. We will use this to product id to query our product variants from lemonsqueezy and sync to our database.

  • WEBHOOK_URL - Webhook URL use to listen all your webhook events. We already have one in http://localhost:3000/api/webhook since the webhook need to be https when we are developing locally you can use ngrok https://ngrok.com/to expose local server to the internet.

  1. Copy the product variant ID of the products and paste it to config/application.ts to application.lemonSqueezy.plans array.

Step 3: Sync Lemonsqueezy plans to database​

Once the LEMONSQUEEZY_PRODUCT_ID is setup were good to sync our product to our database by running the npm command npm run syncPlans. This will automatically sync your data to your database

Step 3: Setup Lemon Squeezy Webhook​

Once the WEBHOOK_URL is setup were good to add our api/webhook programatically by running the npm command npm run addWebhook. This will automatically add your webhook to your lemonsqueezy dashboard.

See example below:

lemon squeezy;

Step 4: See the actual implementation​

Navigate to components/dashboard/billing/subscribe-button.tsx