導入

多くの起業家にとって、支払いプロセスは究極の忍耐力の試練のように感じられます。ようやくすべてが解けたと思った瞬間、さらに複雑な層が現れ、順風満帆はまだ遠い夢であることを思い出させます。

あなたも同じように感じますか？レモンスクイージーはあなたのアスピリンです!
この魔法のような支払いポーションはすべてを簡素化するので、支払いの煩わしさを忘れて楽しいことに集中できます。コーディングを複雑にする必要はもうありません。それは、チームに決済ユニコーンがいるようなものです。

なぜレモンスクイーズなのか？

そうですね、税務コンプライアンスの博士号を取得したり、支払いの頭痛のために際限なく供給されるアスピリンを必要とせずに SaaS ビジネスを運営できることを想像してみてください。 LemonSqueezy は、支払いやサブスクリプションから世界的な税務コンプライアンスや不正防止に至るまで、すべてを合理化します。

さらに、複数通貨のサポートと、あらゆる種類のデジタル製品を扱う店頭の準備が整っています。それは、退屈な作業をすべて引き受けてくれるテクノロジーに精通したビジネス パートナーがいるようなもので、あなたは最も得意なこと、つまり創造に集中できるのです。デジタル クリエイター、起業家、コーディング ソリューションよりもボタンをクリックすることを好む人に最適です。

プロジェクトのセットアップ

本題に入る前に、完全なコードは私の GitHub リポジトリにあり、デモは私の Instagram でご覧いただけることだけをお伝えしておきます。さて、GitHub 上のこのプロジェクトについてですが、支払いオプションが 2 つあります。1 つ目は、従来の 1 回限りの支払いです。 2 つ目は、これまでにない豪華なサブスクリプション モデルです。

ただし、このチュートリアルでは、一括して 1 回限りの支払いで進めます。ああ、私の例では、ケーススタディとして毎月のハウスクリーニング サービスを使用しています。少しばかげているように聞こえるかもしれませんが、まあ、これはすべてコーディングのトレーニングの一部です。 ?

1.LemonSqueezyのセットアップ

始めるには、Lemon Squeezy にストアといくつかの製品とバリエーションを作成しておく必要があります。

テストモードがオンになっていることを確認してください。ストアを公開すると、オフになります。左下にチェックを入れてください。

私の製品は次のようになります

次に、ストアに接続するための API キーを https://app.lemonsqueezy.com/settings/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 });
  }
}

このコードの簡単な説明は次のとおりです:

• まず、export constdynamic = "force-dynamic"; を使用して、ページが常に動的にレンダリングされることを保証します。これはリアルタイム データにとって重要です。
• この API ルートへの POST リクエストを処理する非同期関数を定義します。この関数は、最初に製品 ID が提供されているかどうかを確認します。そうでない場合は、エラー メッセージが返されます。
• 次に、lemonsqueezy への API 呼び出しを実行して、ストア ID や製品バリエーションなどの詳細を含む新しいチェックアウト セッションを作成します。
• storeId を取得するには、その設定に移動します

• API 呼び出し後、応答からチェックアウト URL を抽出します:

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

• 最後に、応答で次の URL を返します:

return NextResponse.json({ checkoutUrl });

API が正しく動作していることを確認するには、テストする必要があります。これには Postman というツールを使用します。始める前に、製品のvariantIdが必要です。これはLemonSqueezyダッシュボードで見つけることができます。

すべてが正しく動作している場合は、checkoutUrl

3. UIの作成とアイテムデータの呼び出し

基礎を築いたので、次のステップはフロントエンドの見栄えを良くすることです。私は TailwindCSS の大ファンなので、価格表も彼らと一緒に作成しています

コードはここから入手できます

次に、作成した API ルートを呼び出す非同期関数を設定します。この関数は、productId を含む POST リクエストを送信し、その返信としてチェックアウト URL を取得します。 URL を取得したら、新しいタブで開き、ユーザーを支払いページに誘導します。

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

そのコードは

• buyProduct1 という非同期関数を定義します
• 次に、特定の productId を使用してリクエストをサーバーに送信します。成功すると、チェックアウト URL を含む新しいブラウザ タブが開きます
• プロセス中に何か問題が発生した場合、問題を検出してログに記録し、購入が失敗したことを示すアラートをユーザーに表示します。

4.Webhookのセットアップ

最後になりましたが、注文を追跡するために Webhook を設定しています。 LemonSqueezy ダッシュボードに戻り、Webhook を設定します。

URL にはパブリックにアクセスできるものが必要ですが、ローカル開発ではこれが困難です。ここで ngrok が役に立ちます。

ngrok は、ローカル マシンに転送する一時的なパブリック URL を提供します。このリンクをチェックして、デバイスに ngrok をセットアップできます:
https://dashboard.ngrok.com/get-started/setup/

前と同様に、Webhook を処理するコードはすでに完成しています。必要なのは、ルート ハンドラーで設定して、甘い

Instagram、Twitter、GitHub で連絡を取り合いましょう。ここでは本当の魔法が起こります。

最後までお付き合いいただきありがとうございました！ ?