مقدمة

بالنسبة للعديد من رواد الأعمال، تبدو عملية الدفع وكأنها الاختبار النهائي للصبر. فقط عندما تعتقد أنك قد فككت كل شيء أخيرًا، تظهر طبقة أخرى من التعقيدات، مما يذكرك بأن الإبحار السلس لا يزال حلماً بعيد المنال.

هل تشعر بنفس الشعور؟ عصارة الليمون هي الأسبرين!
تعمل طريقة الدفع السحرية هذه على تبسيط كل شيء، لذا يمكنك التخلص من دراما الدفع والتركيز على الأشياء الممتعة. لا حاجة لمزيد من التشوهات الترميز. إنه مثل وجود وحيد القرن في فريقك.

لماذا ليمونسكويزي؟

حسنًا، تخيل إدارة أعمال SaaS الخاصة بك دون الحاجة إلى درجة الدكتوراه في الامتثال الضريبي أو إمدادات لا نهاية لها من الأسبرين لمشاكل الدفع. يعمل LemonSqueezy على تبسيط كل شيء، بدءًا من المدفوعات والاشتراكات وحتى الامتثال الضريبي العالمي ومنع الاحتيال.

بالإضافة إلى ذلك، فهو يدعمك بدعم متعدد العملات وواجهة متجر جاهزة لجميع أنواع المنتجات الرقمية. يشبه الأمر وجود شريك تجاري ماهر في مجال التكنولوجيا يتعامل مع كل الأشياء المملة حتى تتمكن من التركيز على ما تفعله بشكل أفضل وهو الإبداع! مثالي للمبدعين الرقميين ورجال الأعمال وأي شخص يفضل النقر على الأزرار لحلول البرمجة.

إعداد المشروع

قبل أن نتعمق، أريد فقط أن أقول إنه يمكنك العثور على الكود الكامل في مستودع GitHub الخاص بي والحصول على العرض التوضيحي على Instagram الخاص بي. الآن، فيما يتعلق بهذا المشروع على GitHub، هناك خياران للدفع: أولاً، الدفع الكلاسيكي لمرة واحدة؛ ثانيًا، نموذج الاشتراك المتميز دائمًا.

ولكن بالنسبة لهذا البرنامج التعليمي، سنعمل على الدفع مرة واحدة. أوه، وعلى سبيل المثال، أستخدم خدمة تنظيف المنزل الشهرية كدراسة حالة. قد يبدو الأمر سخيفًا بعض الشيء، ولكن هذا كله جزء من تدريبنا على البرمجة! ?

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";
• تحديد وظيفة غير متزامنة تتعامل مع طلبات POST لمسار واجهة برمجة التطبيقات (API) هذا، وتتحقق الوظيفة أولاً من توفير معرف المنتج. إذا لم يكن الأمر كذلك، فإنه يقوم بإرجاع رسالة خطأ.
• بعد ذلك، نقوم باستدعاء Api إلى Lemonsqueezy لإنشاء جلسة دفع جديدة، بما في ذلك تفاصيل مثل معرف المتجر ومتغير المنتج.
• للحصول على معرف المتجر، انتقل إلى الإعدادات لذلك

• بعد استدعاء API، يقوم باستخراج عنوان URL الخاص بالخروج من الاستجابة:

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

• أخيرًا، يُرجع عنوان URL هذا في الرد:

return NextResponse.json({ checkoutUrl });

للتأكد من أن واجهة برمجة التطبيقات الخاصة بنا تعمل بشكل صحيح، نحتاج إلى اختبارها. أستخدم أداة تسمى Postman لهذا الغرض. قبل أن نبدأ، نحتاج إلى المعرف المتغير لمنتجنا. يمكنك العثور عليه في لوحة معلومات LemonSqueezy.

إذا كان كل شيء يعمل بشكل صحيح، فيجب أن تحصل على رد يتضمن checkoutUrl

3. إنشاء واجهة المستخدم واستدعاء بيانات العنصر

الآن بعد أن وضعنا الأساس، خطوتنا التالية هي الوقت لجعل الواجهة الأمامية تبدو جيدة، أنا معجب كبير بـ TailwindCSS لذا قمت بإعداد بطاقة التسعير معهم

الكود متاح هنا

يتيح لك التالي إعداد وظيفة غير متزامنة تستدعي مسار واجهة برمجة التطبيقات (API) الذي أنشأناه للتو. سترسل الوظيفة طلب 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
• أرسل بعد ذلك طلبًا إلى الخادم الخاص بك باستخدام معرف منتج محدد، إذا نجح الأمر، فافتح علامة تبويب متصفح جديدة باستخدام عنوان URL الخاص بالخروج
• إذا حدث أي خطأ أثناء العملية، فإنه يكتشف المشكلة ويسجلها ويظهر تنبيهًا للمستخدم يفيد بفشل عملية الشراء.

4. إعداد Webhook

أخيرًا وليس آخرًا، نقوم بإعداد خطافات على الويب لتتبع الطلبات. عد إلى لوحة تحكم LemonSqueezy وقم بإعداد خطاف على الويب.

بالنسبة لعنوان URL، ستحتاج إلى شيء يمكن الوصول إليه بشكل عام، وهو أمر صعب أثناء التطوير المحلي. هذا هو المكان الذي يكون فيه ngrok مفيدًا.

سيمنحك ngrok عنوان URL عامًا مؤقتًا يعيد التوجيه إلى جهازك المحلي، ويمكنك التحقق من هذا الرابط لإعداد ngrok في جهازك:
https://dashboard.ngrok.com/get-started/setup/

تمامًا كما كان من قبل، تم بالفعل تنفيذ التعليمات البرمجية للتعامل مع خطاف الويب نيابةً عنك. كل ما عليك فعله هو إعداده في معالج المسار الخاص بك والاستمتاع بالحلاوة

دعونا نبقى على اتصال على Instagram وTwitter وGitHub - حيث يحدث السحر الحقيقي.

شكرًا على تواجدك! ?