Effortless Payments with Lemon Squeezy | Next.js Integration Made Simple

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.

You feel the same? Lemon Squeezy is your aspirin!
This magical payment potion simplifies everything, so you can ditch the payment drama and focus on the fun stuff. No more coding contortions needed. It's like having a payment unicorn on your team.

Why LemonSqueezy?

Well, imagine running your SaaS business without needing a PhD in tax compliance or an endless supply of aspirin for payment headaches. LemonSqueezy streamlines it all, from payments and subscriptions to global tax compliance and fraud prevention.

Plus, it’s got your back with multi-currency support and a storefront ready for all kinds of digital products. It’s like having a tech-savvy business partner who handles all the boring stuff so you can focus on what you do best—creating! Perfect for digital creators, entrepreneurs, and anyone who prefers clicking buttons to coding solutions.

Project Setup

Before we dive in, I just want to say that you can find the full code in my GitHub repo 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.

Here's how my product look like

Next, let's generate an API Key at https://app.lemonsqueezy.com/settings/api to connect to our store:

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

• After the Api call , it extracts the checkout URL from the response:

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

• Finally, it returns this URL in the response:

return NextResponse.json({ checkoutUrl });

To make sure our API is working correctly, we need to test it. I use a tool called Postman for this. Before we start,we need the variantId of our product You can find this in your LemonSqueezy dashboard.

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

3. CreatIng the UI & Call the item data

Now that we've laid the groundwork, our next step is time to make the frontend look good, I am a huge fan of TailwindCSS so i make the pricing card with them

the code is availale here

Next lets set up an async function that calls the API route we just created. The function will send a POST request with the productId and, in return, get the checkout URL. Once you have the URL, open it in a new tab to send the user to the payment page.

 const buyProcut1 = async () => {
    try {
      const response = await axios.post("../api/lemonsqueezy", {
        productId: "495244",
      });

      console.log(response.data);
      window.open(response.data.checkoutUrl, "_blank");
    } catch (error) {
      console.error(error);
      alert("Failed to buy product #1");
    }
  };

That code is about

• Defines an asynchronous function called buyProduct1
• Next send a request to your server with a specific productId, If success opens a new browser tab with the checkout URL
• If anything goes wrong during the process, it catches the problem, logs it, and shows an alert to the user saying the purchase failed.

4. Setup Webhook

Last but not least, we're setting up webhooks to keep track of orders. Head back to your LemonSqueezy dashboard and set up a webhook.

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 :
https://dashboard.ngrok.com/get-started/setup/

Just like before, the code 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 Instagram, Twitter, and GitHub—where the real magic happens.

Thanks for sticking around! ?

The above is the detailed content of Effortless Payments with Lemon Squeezy | Next.js Integration Made Simple. For more information, please follow other related articles on the PHP Chinese website!