Einführung

Für viele Unternehmer fühlt sich der Bezahlvorgang wie die ultimative Geduldsprobe an. Gerade als Sie denken, dass Sie endlich alles entwirrt haben, taucht eine weitere Ebene von Komplikationen auf und erinnert Sie daran, dass ein reibungsloses Segeln immer noch ein ferner Traum ist.

Dir geht es genauso? Lemon Squeezy ist Ihr Aspirin!
Dieser magische Zahlungstrank vereinfacht alles, sodass Sie das Zahlungsdrama hinter sich lassen und sich auf die lustigen Dinge konzentrieren können. Keine Codierungsverzerrungen mehr erforderlich. Es ist, als hätte man ein Zahlungseinhorn in seinem Team.

Warum LemonSqueezy?

Nun, stellen Sie sich vor, Sie würden Ihr SaaS-Geschäft führen, ohne einen Doktortitel in Steuerkonformität oder einen endlosen Vorrat an Aspirin gegen Zahlungsprobleme zu benötigen. LemonSqueezy optimiert alles, von Zahlungen und Abonnements bis hin zur globalen Steuerkonformität und Betrugsprävention.

Außerdem unterstützt es Sie mit der Unterstützung mehrerer Währungen und einer Storefront, die für alle Arten digitaler Produkte bereit ist. Es ist, als hätte man einen technisch versierten Geschäftspartner, der sich um all die langweiligen Dinge kümmert, sodass Sie sich auf das konzentrieren können, was Sie am besten können – das Schaffen! Perfekt für digitale Entwickler, Unternehmer und alle, die lieber auf Schaltflächen klicken als auf Codierungslösungen.

Projekt-Setup

Bevor wir eintauchen, möchte ich nur sagen, dass Sie den vollständigen Code in meinem GitHub-Repo finden und die Demo auf meinem Instagram ansehen können. Nun zu diesem Projekt auf GitHub: Es gibt zwei Zahlungsoptionen: erstens die klassische Einmalzahlung und zweitens die klassische Einmalzahlung. Zweitens das immer ausgefallene Abonnementmodell.

Aber für dieses Tutorial setzen wir auf eine einmalige Zahlung. Oh, und für mein Beispiel verwende ich als Fallstudie einen monatlichen Hausreinigungsdienst. Es klingt vielleicht etwas absurd, aber hey, es ist alles Teil unseres Programmiertrainings! ?

1. Richten Sie LemonSqueezy ein

Um loszulegen, sollten Sie einen Shop in Lemon Squeezy sowie einige Produkte und Varianten erstellt haben.

Stellen Sie sicher, dass der Testmodus aktiviert ist. Beim Veröffentlichen des Shops wird dieser ausgeschaltet; Überprüfen Sie unten links.

So sieht mein Produkt aus

Als nächstes generieren wir einen API-Schlüssel unter https://app.lemonsqueezy.com/settings/api, um eine Verbindung zu unserem Shop herzustellen:

Fügen Sie dies als Umgebungsvariable zu Ihrem Next.js-Projekt hinzu:

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. Richten Sie den Routenhandler ein

Als nächstes erstellen Sie eine API-Route zur Abwicklung des Zahlungsvorgangs. In diesem Teil möchten wir als Endergebnis eine checkoutUrl erhalten, die wir später an den Frontend-Bereich übergeben.

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

Hier ist eine einfache Erklärung für diesen Code:

• Zuerst stellen wir sicher, dass die Seite immer dynamisch gerendert wird, was für Echtzeitdaten wichtig ist, indem wir export constdynamic = "force-dynamic";
• Definieren Sie eine asynchrone Funktion, die POST-Anfragen an diese API-Route verarbeitet. Die Funktion prüft zunächst, ob eine Produkt-ID bereitgestellt wird. Wenn nicht, wird eine Fehlermeldung zurückgegeben.
• Als nächstes führen wir einen API-Aufruf bei Lemonsqueezy durch, um eine neue Checkout-Sitzung zu erstellen, einschließlich Details wie der Store-ID und der Produktvariante.
• Um die StoreId zu erhalten, gehen Sie zu den Einstellungen dafür

• Nach dem API-Aufruf wird die Checkout-URL aus der Antwort extrahiert:

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

• Schließlich wird diese URL in der Antwort zurückgegeben:

return NextResponse.json({ checkoutUrl });

Um sicherzustellen, dass unsere API ordnungsgemäß funktioniert, müssen wir sie testen. Ich verwende dafür ein Tool namens Postman. Bevor wir beginnen, benötigen wir die Varianten-ID unseres Produkts. Diese finden Sie in Ihrem LemonSqueezy-Dashboard.

Wenn alles korrekt funktioniert, sollten Sie eine Antwort erhalten, die eine checkoutUrl enthält

3. Erstellen der Benutzeroberfläche und Aufrufen der Artikeldaten

Da wir nun den Grundstein gelegt haben, ist es unser nächster Schritt, das Frontend gut aussehen zu lassen. Ich bin ein großer Fan von TailwindCSS, also erstelle ich die Preiskarte mit ihnen

Der Code ist hier verfügbar

Als nächstes richten wir eine asynchrone Funktion ein, die die soeben erstellte API-Route aufruft. Die Funktion sendet eine POST-Anfrage mit der Produkt-ID und erhält im Gegenzug die Checkout-URL. Sobald Sie die URL haben, öffnen Sie sie in einem neuen Tab, um den Benutzer zur Zahlungsseite weiterzuleiten.

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

Dieser Code handelt von

• Definiert eine asynchrone Funktion namens buyProduct1
• Senden Sie als Nächstes eine Anfrage mit einer bestimmten Produkt-ID an Ihren Server. Bei Erfolg wird ein neuer Browser-Tab mit der Checkout-URL geöffnet
• Wenn während des Vorgangs etwas schiefgeht, erkennt es das Problem, protokolliert es und zeigt dem Benutzer eine Warnung an, dass der Kauf fehlgeschlagen ist.

4. Webhook einrichten

Zu guter Letzt richten wir Webhooks ein, um den Überblick über Bestellungen zu behalten. Gehen Sie zurück zu Ihrem LemonSqueezy-Dashboard und richten Sie einen Webhook ein.

Für die URL benötigen Sie etwas öffentlich zugängliches, was bei der lokalen Entwicklung schwierig ist. Hier kommt ngrok zum Einsatz.

ngrok gibt Ihnen eine temporäre öffentliche URL, die an Ihren lokalen Computer weiterleitet. Sie können diesen Link überprüfen, um ngrok auf Ihrem Gerät einzurichten:
https://dashboard.ngrok.com/get-started/setup/

Wie zuvor ist der Code zur Handhabung des Webhooks bereits für Sie erstellt. Alles, was Sie tun müssen, ist es in Ihrem Routenhandler einzurichten und das süße

Lassen Sie uns auf Instagram, Twitter und GitHub in Kontakt bleiben – dort, wo die wahre Magie passiert.

Vielen Dank fürs Bleiben! ?