Lemonsqueezy

The kit comes with a webhook that you can configure on Lemonsqueezy to notify the app about multiple events of the payments such as orders, subscription events.

Configure Keys

You need to configure the webhook and the API key on Lemonsqueezy. Webhook is used to listen to the payment events and the API key is used to make requests to the Lemonsqueezy API.

Webhook

1. Login to Lemonsqueezy dashboard
2. Go to Settings > Webhooks section on Lemonsqueezy dashboard
3. Click on the + icon to add a new webhook
4. Use <you-app-host>/api/payment-webhook/lemonsqueezy as the Callback URL
5. Generate a random Secret and paste it in the Secret field
6. Select all the events
7. Save the webhook
8. Set the secret in the LEMONSQUEEZY_WEBHOOK_SECRET environment variable in the .env file

API Key

1. Go to Settings > API section on Lemonsqueezy dashboard
2. Click on the + icon to make a new API key
3. Give it a name and generate the key
4. Set the key in the LEMONSQUEEZY_API_KEY environment variable in the .env file

Map User Plans

You need to map the user plans to the products on Lemonsqueezy. This is done in the src/api/payment-webhook/lemonsqueezy.ts file. An example shown below.

import {
  Plan,
  PLAN_LTD,
  PLAN_MONTHLY,
} from "@/components/UserPlan";
 
const productIdPlanMap: Record<number, Plan> = {
  404105: PLAN_LTD,
  404106: PLAN_MONTHLY,
};

That should be all you need to do. You can customize the webhook from src/api/payment-webhook/lemonsqueezy.ts file if you want.