Paiements sans effort avec Lemon Squeezy | L'intégration Next.js simplifiée

Introduction

Pour de nombreux entrepreneurs, le processus de paiement ressemble à l’épreuve ultime de patience. Juste au moment où vous pensez avoir enfin tout démêlé, une autre couche de complications surgit, vous rappelant que naviguer en douceur est encore un rêve lointain.

Vous ressentez la même chose ? Lemon Squeezy est votre aspirine !
Cette potion de paiement magique simplifie tout, vous pouvez donc abandonner le drame du paiement et vous concentrer sur les choses amusantes. Plus besoin de contorsions de codage. C'est comme avoir une licorne de paiement dans votre équipe.

Pourquoi LemonSqueezy ?

Eh bien, imaginez gérer votre entreprise SaaS sans avoir besoin d'un doctorat en conformité fiscale ou d'une réserve inépuisable d'aspirine pour les problèmes de paiement. LemonSqueezy rationalise tout, des paiements et abonnements à la conformité fiscale mondiale et à la prévention de la fraude.

De plus, il vous soutient avec un support multidevises et une vitrine prête pour toutes sortes de produits numériques. C'est comme avoir un partenaire commercial féru de technologie qui s'occupe de toutes les choses ennuyeuses afin que vous puissiez vous concentrer sur ce que vous faites le mieux : créer ! Parfait pour les créateurs numériques, les entrepreneurs et tous ceux qui préfèrent cliquer sur des boutons plutôt que des solutions de codage.

Configuration du projet

Avant de plonger dans le vif du sujet, je veux juste dire que vous pouvez trouver le code complet dans mon dépôt GitHub et voir la démo sur mon Instagram. Maintenant, à propos de ce projet sur GitHub, il propose deux options de paiement : premièrement, le paiement unique classique ; deuxièmement, le modèle d'abonnement toujours sophistiqué.

Mais pour ce tutoriel, nous optons pour le paiement unique. Oh, et pour mon exemple, j'utilise un service de ménage mensuel comme étude de cas. Cela peut paraître un peu absurde, mais bon, tout cela fait partie de notre entraînement de codage ! ?

1. Configurer LemonSqueezy

Pour commencer, vous devez avoir créé une boutique dans Lemon Squeezy ainsi que quelques produits et variantes.

Assurez-vous que le mode test est activé. Lors de la publication de la boutique, elle s'éteindra ; vérifiez en bas à gauche.

Voici à quoi ressemble mon produit

Ensuite, générons une clé API sur https://app.lemonsqueezy.com/settings/api pour nous connecter à notre boutique :

Ajoutez ceci comme variable d'environnement à votre projet Next.js :

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. Configurez le gestionnaire de route

Ensuite, créez une route API pour gérer le processus de paiement. Dans cette partie, le résultat final que nous souhaitons est d'obtenir une URL de paiement que nous transmettrons plus tard à la section Frontend.

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

Voici une explication simple pour ce code :

• Tout d'abord, nous nous assurons que la page est toujours rendue dynamiquement, ce qui est important pour les données en temps réel en utilisant export const Dynamic = "force-dynamic" ;
• Définissez la fonction asynchrone qui gère les requêtes POST vers cette route API. La fonction vérifie d'abord si un ID de produit est fourni. Sinon, il renvoie un message d'erreur.
• Ensuite, nous effectuons un appel Api à Lemonsqueezy pour créer une nouvelle session de paiement, y compris des détails tels que l'identifiant du magasin et la variante du produit.
• Pour obtenir l'identifiant du magasin, accédez aux paramètres correspondants

• Après l'appel de l'API, il extrait l'URL de paiement de la réponse :

const checkoutUrl = réponse.data.data.attributes.url;

• Enfin, il renvoie cette URL dans la réponse :

retourner NextResponse.json({ checkoutUrl });

Pour nous assurer que notre API fonctionne correctement, nous devons la tester. J'utilise un outil appelé Postman pour cela. Avant de commencer, nous avons besoin du variantId de notre produit. Vous pouvez le trouver dans votre tableau de bord LemonSqueezy.

Si tout fonctionne correctement, vous devriez recevoir une réponse incluant une URL de paiement

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! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!