Lemon Squeezy

import addProduct from '@assets/lemon-squeezy/add-product.png'; import addVariant from '@assets/lemon-squeezy/add-variant.png'; import storeId from '@assets/lemon-squeezy/store-id.png'; import subscriptionVariantIds from '@assets/lemon-squeezy/subscription-variant-ids.png'; import variantId from '@assets/lemon-squeezy/variant-id.png'; import ngrok from '@assets/ngrok.png'; import { Image } from 'astro:assets';

First, make sure you've defined your payment processor in src/payment/paymentProcessor.ts, as described in the important first steps.

Next, you'll need to create a Lemon Squeezy account in test mode. You can do that here.

:::tip[Star our Repo on GitHub! 🌟] We've packed in a ton of features and love into this SaaS starter, and offer it all to you for free!

If you're finding this template and its guides useful, consider giving us a star on GitHub :::

Get your test Lemon Squeezy API Keys

Once you've created your account, you'll need to get your test API keys. You can do that by navigating to https://app.lemonsqueezy.com/settings/api and creating a new API key:

1. Click on the + button.
2. Give your API key a name.
3. Copy and paste it in your .env.server file under LEMONSQUEEZY_API_KEY.

Get your Lemon Squeezy Store ID

To get your store ID, go to the Lemon Squeezy Dashboard and copy the Store ID from the top right corner.

<Image src={storeId} alt="store id" loading="lazy" />

Copy and paste this number in your .env.server file under LEMONSQUEEZY_STORE_ID.

Creating Products

To create a product, go to the test products url https://app.lemonsqueezy.com/products:

1. Click on the + New Product button and fill in the relevant information for your product.
2. Fill in the general information.
3. For pricing, select the type of product you'd like to create, e.g. Subscription for a recurring monthly payment product or Single Payment for credits-based product. <Image src={addProduct} alt="add product" loading="lazy" />
4. Make sure you select Software as a service (SaaS) as the Tax category type.
5. If you want to add different price tiers for Subscription products, click on add variant under the variants tab. Here you can input the name of the variant (e.g. "Hobby", "Pro"), and that variant's price. <Image src={addVariant} alt="add variant" loading="lazy" />
6. For a product with no variants, on the product page, click the ... menu button and select Copy variant ID <Image src={variantId} alt="variant id" loading="lazy" />
7. For a product with variants, on the product page, click on the product, go to the variants tab and select Copy ID for each variant. <Image src={subscriptionVariantIds} alt="subscription variant ids" loading="lazy" />
8. Paste these IDs in the .env.server file:
   • We've set you up with two example subscription product environment variables, PAYMENTS_HOBBY_SUBSCRIPTION_PLAN_ID and PAYMENTS_PRO_SUBSCRIPTION_PLAN_ID.
   • As well as a one-time payment product/credits-based environment variable, PAYMENTS_CREDITS_10_PLAN_ID.

:::note[Naming products differently] Note that if you change names of your products, you'll need to update your app code in src/payment/plans.ts and src/payment/paymentProcessorPlans.ts to match these names as well. :::

Using Lemon Squeezy Webhook in Local Development

Exposing your Webhook Endpoint to the Internet

Lemon Squeezy notifies your Wasp app about customer and payment events through a webhook. However, to make it available to Lemon Squeezy during development, you need to expose your locally running Wasp server (started with wasp start) to the internet.

You can do that by running ngrok on port 3001 (Wasp server runs on port 3001 by default). ngrok will then generate a public URL that we can provide to Lemon Squeezy:

1. First, make sure you have installed ngrok.
2. Once ngrok is installed and your Wasp app is running, run:
   shCopy

   ngrok http 3001
   

   <Image src={ngrok} alt="ngrok" loading="lazy" />
3. ngrok will display a forwarding address. Copy this address and append /payments-webhook to it. It should look something like this:
   shCopy

   https://89e5-2003-c7-153c-72a5-f837.ngrok-free.app/payments-webhook
   

Creating your Lemon Squeezy Webhook

Next, go to your Lemon Squeezy Webhooks Dashboard:

1. Click the + button.
2. Add the newly created webhook forwarding url to the Callback URL section.
3. Give your webhook a signing secret (a long, random string).
4. Copy and paste this same signing secret into your .env.server file under LEMONSQUEEZY_WEBHOOK_SECRET.
5. Make sure to select at least the following updates to be sent:
   • order_created
   • subscription_created
   • subscription_updated
   • subscription_cancelled
6. Click save.

You're now ready to start consuming Lemon Squeezy webhook events in local development.