Lemon Squeezy를 통한 간편한 결제 | Next.js 통합이 간편해졌습니다.

소개

많은 기업가에게 결제 과정은 인내심의 궁극적인 시험처럼 느껴집니다. 마침내 모든 것을 풀었다고 생각하는 순간, 또 다른 복잡한 문제가 나타나며 순조로운 항해는 아직 먼 꿈이라는 사실을 상기시켜 줍니다.

당신도 같은 생각인가요? 레몬 스퀴지는 당신의 아스피린입니다!
이 마법의 결제 묘약은 모든 것을 단순화하므로 결제 드라마를 버리고 재미있는 일에 집중할 수 있습니다. 더 이상 코딩 왜곡이 필요하지 않습니다. 팀에 결제 유니콘을 두는 것과 같습니다.

왜 레몬스퀴지인가?

세금 준수 분야의 박사 학위가 필요하지 않거나 지불 문제로 인한 끝없는 아스피린 공급 없이 SaaS 비즈니스를 운영한다고 상상해 보세요. LemonSqueezy는 결제 및 구독부터 글로벌 세금 준수 및 사기 방지에 이르기까지 모든 과정을 간소화합니다.

또한 다중 통화 지원과 모든 종류의 디지털 제품을 위한 매장이 준비되어 있습니다. 이는 지루한 일을 모두 처리하는 기술에 정통한 비즈니스 파트너를 갖는 것과 같기 때문에 귀하는 자신이 가장 잘하는 일인 창작에 집중할 수 있습니다! 디지털 제작자, 기업가 및 코딩 솔루션보다 버튼 클릭을 선호하는 모든 사람에게 적합합니다.

프로젝트 설정

자세히 살펴보기 전에 내 GitHub 저장소에서 전체 코드를 찾아보고 내 Instagram에서 데모를 볼 수 있다는 점을 말씀드리고 싶습니다. 이제 GitHub의 이 프로젝트에는 두 가지 결제 옵션이 있습니다. 첫 번째는 전통적인 일회성 결제입니다. 두 번째, 화려한 구독 모델입니다.

하지만 이번 튜토리얼에서는 일회성 결제로 올인하겠습니다. 아, 그리고 제 예에서는 월간 집 청소 서비스를 사례 연구로 사용하고 있습니다. 다소 터무니없게 들릴 수도 있지만, 이 모든 것이 우리 코딩 연습의 일부입니다! ?

1. 레몬스퀴지 설정

시작하려면 Lemon Squeezy에 매장과 일부 제품 및 변형 제품을 만들어야 합니다.

테스트 모드가 켜져 있는지 확인하세요. 스토어를 게시하면 꺼집니다. 왼쪽 하단에서 확인하세요.

제 제품은 이렇게 생겼어요

다음으로 https://app.lemonsqueezy.com/settings/api에서 API 키를 생성하여 매장에 연결해 보겠습니다.

다음을 Next.js 프로젝트에 환경 변수로 추가하세요.

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. 경로 핸들러 설정

다음으로 결제 프로세스를 처리하기 위한 API 경로를 만듭니다. 이 부분에서 우리가 원하는 최종 결과는 나중에 프런트엔드 섹션에 전달할 checkoutUrl을 얻는 것입니다.

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 });
  }
}

이 코드에 대한 간단한 설명은 다음과 같습니다.

• 먼저 페이지가 항상 동적으로 렌더링되도록 보장합니다. 이는 내보내기 const 동적 = "force-dynamic";을 사용하여 실시간 데이터에 중요합니다.
• 이 API 경로에 대한 POST 요청을 처리하는 비동기 함수를 정의합니다. 이 함수는 먼저 제품 ID가 제공되었는지 확인합니다. 그렇지 않은 경우 오류 메시지를 반환합니다.
• 다음으로 Lemonsqueezy에 대한 Api 호출을 수행하여 매장 ID 및 제품 변형과 같은 세부정보를 포함하여 새로운 결제 세션을 생성합니다.
• 상점 ID를 얻으려면 해당 설정으로 이동하세요.

• Api 호출 후 응답에서 결제 URL을 추출합니다.

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

• 마지막으로 다음 URL이 응답으로 반환됩니다.

NextResponse.json({ checkoutUrl })을 반환합니다.

API가 올바르게 작동하는지 확인하려면 테스트해야 합니다. 저는 이를 위해 Postman이라는 도구를 사용합니다. 시작하기 전에 제품의 변형 ID가 필요합니다. LemonSqueezy 대시보드에서 찾을 수 있습니다.

모든 것이 올바르게 작동하면 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! ?

위 내용은 Lemon Squeezy를 통한 간편한 결제 | Next.js 통합이 간편해졌습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!