Introduction

For many entrepreneurs, the payment process feels like the ultimate test of patience. Just when you think you've finally untangled it all, another layer of complications pops up, reminding you that smooth sailing is still a distant dream.

and catch the demo on my Instagram. Now, about this project on GitHub—it’s got two payment options: first, the classic one-time payment; second, the ever-fancy subscription model.

But for this tutorial, we’re going all-in on once time payment. Oh, and for my example, I’m using a monthly house cleaning service as the case study. It might sound a tad absurd, but hey, it’s all part of our coding workout! 💪

1. Setup LemonSqueezy

In order to get started you should have created a store in Lemon Squeezy as well as some products and variants.

Make sure you have test mode ON. On publishing the store, it will turn OFF; check on the bottom left side.

Next, let's generate an API Key at

Add this as an environment variable to your Next.js project:

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. Setuup the route handler

Next, create an API route to handle the payment procces, In this part, the final result we want is to obtain a checkoutUrl which we will later pass to the Frontend section.

export const dynamic = "force-dynamic";



export async function POST(req: NextRequest) {

  try {



    const reqData = await req.json();



    if (!reqData.productId) {

      console.error("Product ID is missing");

      return NextResponse.json({ message: "Product ID is required" }, { status: 400 });

    }





    const response = await lemonSqueezyApiInstance.post("/checkouts", {

      data: {

        type: "checkouts",

        attributes: {

          checkout_data: {

            custom: {

              user_id: "123",

            },

          },

        },

        relationships: {

          store: {

            data: {

              type: "stores",

              id: process.env.LEMON_SQUEEZY_STORE_ID?.toString(),

            },

          },

          variant: {

            data: {

              type: "variants",

              id: reqData.productId.toString(),

            },

          },

        },

      },

    });



    const checkoutUrl = response.data.data.attributes.url;

    console.log(response.data);

    return NextResponse.json({ checkoutUrl });

  } catch (error) {

    console.error("Error in POST /api/lemonsqueezy:", error);

    return NextResponse.json({ message: "An error occured" }, { status: 500 });

  }

}

Here's a simple explanation for this code :

• firs we ensures that the page is always dynamically rendered, which is important for real-time data by using export const dynamic = "force-dynamic";
  


• Define async function that handles POST requests to this API route, The function first checks if a product ID is provided. If not, it returns an error message.


• Next we do Api Call to lemonsqueezy to creates a new checkout session , including details like the store ID and product variant.


• To get storeId, Go to settings for that

If everything is working correctly, you should get a response that includes a checkoutUrl

the code is availale

For the URL, you’ll need something publicly accessible, which is tricky during local development. This is where ngrok comes in handy.

ngrok will give you a temporary public URL that forwards to your local machine, You can check this link to setup ngrok in your device :

to handle the webhook is already done for you. All you need to do is set it up in your route handler and enjoy the sweet

Let's stay in touch on , and