Lemon Squeezy x Supabase x Next JS - Part 5

If you are looking for a guide to help you out with setting up your very own Subscription using Next.JS, Lemon Squeezy and Supabase, you have come to the right place. In this first guide, we will look at how you can fetch products from Lemon Squeezy, so that you can populate your pricing table!

The goal of this guide is that by the end you will be able to fetch your own products using Next.js 13 App Router and populating your Supabase database.

The webhook

While all earlier parts of the guide have been aimed at the code, this section will focus on understanding how we can make a connection between Supabase and Lemon Squeezy without any code descriptions.

In the Supaboost Docs I described in detail how to create a webhook. Lets look how we can create the webhook ourselves.

Create Webhook

The webhook is used to create and receive information from Lemon Squeezy. After a subscription is created, the webhook will write information to the webhook. This information will be used to populate our Supabase database.

It's important to note that this needs to be updated later, when we have set up a local server.

1. On the left panel, select Settings > Webhooks
2. Then select the + icon to create a new Webhook
3. Add a callback URL. You want to create the webhook as follows:

• yourwebsite.com/api/lemonsqueezy

4. Add a signing secret. (generate a UUID with UUID Generator)
   • Store the webhook secret
5. Select the following webhooks:
   • subscription_created
   • subscription_updated
   • subscription_cancelled
   • subscription_resumed
   • subscription_expired You can also add others, these are the ones I use for the guide.
6. Click on Save Webhook

Webhook done, now what?

The next step is to look what information we are receiving, and then starting to unwrap the content to see which bits we will be needing.

In the official documentation or Lemon Squeezy, we can find the webhook content for a created subscription here.

The bad news? not all subscription webhooks are described in the docs.

The good news? we can test different messages using the simulate event function in Lemon Squeezy.

Let's look at the example provided:

  {
    "meta": {
      "event_name": "subscription_created"
    },
    "data": {
      "type": "subscriptions",
      "id": "1",
      "attributes": {
        "store_id": 2,
        "customer_id": 2,
        "order_id": 2,
        "order_item_id": 2,
        "product_id": 2,
        "variant_id": 2,
        "product_name": "Subscription One",
        "variant_name": "Default",
        "user_name": "Dan R",
        "user_email": "dan@lemonsqueezy.com",
        "status": "on_trial",
        "status_formatted": "On_trial",
        "card_brand": "visa",
        "card_last_four": "42424",
        "pause": null,
        "cancelled": false,
        "trial_ends_at": "2023-01-24T12:43:48.000000Z",
        "billing_anchor": 24,
        "first_subscription_item": {
          "id": 1,
          "subscription_id": 1,
          "price_id": 1,
          "quantity": 5,
          "created_at": "2023-01-17T12:43:51.000000Z",
          "updated_at": "2023-01-17T12:43:51.000000Z"
        },
        "urls": {
          "update_payment_method": "https://my-store.lemonsqueezy.com/my-orders/"
        },
        "renews_at": "2023-01-24T12:43:48.000000Z",
        "ends_at": null,
        "created_at": "2023-01-17T12:43:50.000000Z",
        "updated_at": "2023-01-17T12:43:51.000000Z",
        "test_mode": false
      },
      "relationships": {
       // more info
      },
      "links": {
        "self": "https://api.lemonsqueezy.com/v1/subscriptions/1"
      }
    }
  }

In the JSON above, we can see that the most valuable information is stored in the data object. But the most important information, the event type is stored in the meta object.

We know now that we need to do something based on the meta object: event type, and then populate our database based on the data object.

In the next part, we will look at how to create an API route, how to secure this API route and how to make sure we can populate our database.

Storing the .env variables

    LEMON_SQUEEZY_API_KEY=
    LEMON_SQUEEZY_WEBHOOK_SECRET=<HERE>
    STORE_ID=
    PRODUCT_ID=

Now that we have created the Webhook, make sure to store your webhook secret in the right location. See <HERE> above. You can come up with a secure webhook secret yourself, or you could generate one from here: UUID Generator.

When the webhook has been created we just need one more step to complete integration to Supabase.