---
title: Lemon Squeezy
banner:
  content: |
    Have an Open SaaS app in production? <a href="https://e44cy1h4s0q.typeform.com/to/EPJCwsMi">We'll send you some swag! 👕</a>
---
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](/guides/payment-integrations/).

Next, you'll need to create a Lemon Squeezy account in test mode. You can do that [here](https://lemonsqueezy.com).

:::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](https://github.com/wasp-lang/wasp)
:::

### 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](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](https://app.lemonsqueezy.com/settings/stores) 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](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`](https://ngrok.com/docs/getting-started/).
2. Once `ngrok` is installed and your Wasp app is running, run:
   ```sh
   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: 
   ```sh title="Callback URL"
   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](https://app.lemonsqueezy.com/settings/webhooks):
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.