Introduction

Pour de nombreux entrepreneurs, le processus de paiement apparaît comme l'ultime test 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 des paiements 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 une prise en charge 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 de 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 plus 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 certains 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 en tant que 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'ID du magasin et la variante du produit.
• Pour obtenir l'ID 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. Création de l'interface utilisateur et appel des données de l'article

Maintenant que nous avons jeté les bases, notre prochaine étape est de donner une belle apparence au frontend, je suis un grand fan de TailwindCSS donc je crée la carte de tarification avec eux

le code est disponible ici

Ensuite, configurons une fonction asynchrone qui appelle la route API que nous venons de créer. La fonction enverra une requête POST avec le productId et, en retour, obtiendra l'URL de paiement. Une fois que vous avez l'URL, ouvrez-la dans un nouvel onglet pour diriger l'utilisateur vers la page de paiement.

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

Ce code concerne environ

• Définit une fonction asynchrone appelée buyProduct1
• Envoyez ensuite une demande à votre serveur avec un identifiant de produit spécifique. En cas de succès, un nouvel onglet de navigateur s'ouvre avec l'URL de paiement
• Si quelque chose ne va pas pendant le processus, il détecte le problème, l'enregistre et affiche une alerte à l'utilisateur l'informant que l'achat a échoué.

4. Configurer le webhook

Enfin et surtout, nous mettons en place des webhooks pour suivre les commandes. Revenez à votre tableau de bord LemonSqueezy et configurez un webhook.

Pour l'URL, vous aurez besoin de quelque chose d'accessible au public, ce qui est délicat lors du développement local. C'est là que ngrok s'avère utile.

ngrok vous donnera une URL publique temporaire qui sera redirigée vers votre ordinateur local. Vous pouvez consulter ce lien pour configurer ngrok sur votre appareil :
https://dashboard.ngrok.com/get-started/setup/

Comme avant, le code pour gérer le webhook est déjà fait pour vous. Tout ce que vous avez à faire est de le configurer dans votre gestionnaire d'itinéraire et de profiter du doux

Restons en contact sur Instagram, Twitter et GitHub, là où la vraie magie opère.

Merci d'être resté dans les parages ! ?