परिचय

कई उद्यमियों के लिए, भुगतान प्रक्रिया धैर्य की अंतिम परीक्षा की तरह लगती है। जब आप सोचते हैं कि आपने अंततः सब कुछ सुलझा लिया है, तो जटिलताओं की एक और परत सामने आ जाती है, जो आपको याद दिलाती है कि सहजता अभी भी एक दूर का सपना है।

क्या आप भी ऐसा ही महसूस करते हैं? लेमन स्क्वीज़ी आपकी एस्पिरिन है!
यह जादुई भुगतान औषधि हर चीज़ को सरल बनाती है, जिससे आप भुगतान नाटक को छोड़ सकते हैं और मज़ेदार चीज़ों पर ध्यान केंद्रित कर सकते हैं। अब और कोडिंग विकृतियों की आवश्यकता नहीं है। यह आपकी टीम पर भुगतान यूनिकॉर्न रखने जैसा है।

लेमनस्क्वीज़ी क्यों?

ठीक है, कर अनुपालन में पीएचडी या भुगतान सिरदर्द के लिए एस्पिरिन की अंतहीन आपूर्ति की आवश्यकता के बिना अपना SaaS व्यवसाय चलाने की कल्पना करें। लेमनस्क्वीज़ी भुगतान और सदस्यता से लेकर वैश्विक कर अनुपालन और धोखाधड़ी की रोकथाम तक सब कुछ सुव्यवस्थित करता है।

साथ ही, इसमें बहु-मुद्रा समर्थन और सभी प्रकार के डिजिटल उत्पादों के लिए तैयार स्टोरफ्रंट भी है। यह एक तकनीक-प्रेमी व्यवसाय भागीदार की तरह है जो सभी उबाऊ चीजों को संभालता है ताकि आप उस पर ध्यान केंद्रित कर सकें जो आप सबसे अच्छा करते हैं - निर्माण! डिजिटल रचनाकारों, उद्यमियों और कोडिंग समाधानों के बजाय बटन क्लिक करने वाले किसी भी व्यक्ति के लिए बिल्कुल सही।

प्रोजेक्ट सेटअप

इससे पहले कि हम आगे बढ़ें, मैं बस इतना कहना चाहता हूं कि आप मेरे GitHub रेपो में पूरा कोड पा सकते हैं और मेरे इंस्टाग्राम पर डेमो देख सकते हैं। अब, GitHub पर इस प्रोजेक्ट के बारे में - इसमें दो भुगतान विकल्प हैं: पहला, क्लासिक एकमुश्त भुगतान; दूसरा, हमेशा से फैंसी सदस्यता मॉडल।

लेकिन इस ट्यूटोरियल के लिए, हम एक बार भुगतान पर जा रहे हैं। ओह, और मेरे उदाहरण के लिए, मैं केस स्टडी के रूप में मासिक गृह सफ़ाई सेवा का उपयोग कर रहा हूँ। यह थोड़ा बेतुका लग सकता है, लेकिन अरे, यह सब हमारे कोडिंग वर्कआउट का हिस्सा है! ?

1. लेमनस्क्वीज़ी सेटअप करें

शुरुआत करने के लिए आपको लेमन स्क्वीज़ी के साथ-साथ कुछ उत्पादों और प्रकारों में एक स्टोर बनाना चाहिए था।

सुनिश्चित करें कि आपके पास परीक्षण मोड चालू है। स्टोर प्रकाशित करने पर, यह बंद हो जाएगा; नीचे बाईं ओर जांचें।

मेरा उत्पाद इस तरह दिखता है

इसके बाद, आइए अपने स्टोर से जुड़ने के लिए https://app.lemonsqueezy.com/settings/api पर एक एपीआई कुंजी बनाएं:

इसे अपने Next.js प्रोजेक्ट में एक पर्यावरण चर के रूप में जोड़ें:

LEMONSQUEEZY_API_KEY="[YOUR API KEY]"

2. रूट हैंडलर सेटअप करें

इसके बाद, भुगतान प्रक्रियाओं को संभालने के लिए एक एपीआई मार्ग बनाएं, इस भाग में, हम जो अंतिम परिणाम चाहते हैं वह एक चेकआउटयूआरएल प्राप्त करना है जिसे हम बाद में फ्रंटएंड अनुभाग में भेज देंगे।

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

यहां इस कोड के लिए एक सरल स्पष्टीकरण दिया गया है:

• पहले हम यह सुनिश्चित करते हैं कि पृष्ठ हमेशा गतिशील रूप से प्रस्तुत किया जाए, जो कि निर्यात स्थिरांक गतिशील = "बल-गतिशील" का उपयोग करके वास्तविक समय डेटा के लिए महत्वपूर्ण है;
• एसिंक फ़ंक्शन को परिभाषित करें जो इस एपीआई रूट पर POST अनुरोधों को संभालता है, फ़ंक्शन पहले जांच करता है कि कोई उत्पाद आईडी प्रदान की गई है या नहीं। यदि नहीं, तो यह एक त्रुटि संदेश देता है।
• इसके बाद हम एक नया चेकआउट सत्र बनाने के लिए लेमनस्क्वीज़ी पर एपीआई कॉल करते हैं, जिसमें स्टोर आईडी और उत्पाद प्रकार जैसे विवरण शामिल होते हैं।
• स्टोरआईडी प्राप्त करने के लिए, उसके लिए सेटिंग्स पर जाएं

• एपीआई कॉल के बाद, यह प्रतिक्रिया से चेकआउट यूआरएल निकालता है:

const checkoutUrl = प्रतिक्रिया.डेटा.डेटा.विशेषताएं.url;

• अंत में, यह प्रतिक्रिया में यह यूआरएल लौटाता है:

वापसी NextResponse.json({ checkoutUrl });

यह सुनिश्चित करने के लिए कि हमारा एपीआई सही ढंग से काम कर रहा है, हमें इसका परीक्षण करने की आवश्यकता है। मैं इसके लिए पोस्टमैन नामक टूल का उपयोग करता हूं। शुरू करने से पहले, हमें अपने उत्पाद की वैरिएंटआईडी की आवश्यकता है। आप इसे अपने लेमनस्क्वीज़ी डैशबोर्ड में पा सकते हैं।

यदि सब कुछ सही ढंग से काम कर रहा है, तो आपको एक प्रतिक्रिया मिलनी चाहिए जिसमें एक चेकआउटयूआरएल शामिल है

3. यूआई बनाना और आइटम डेटा को कॉल करना

अब जब हमने जमीनी कार्य कर लिया है, तो हमारा अगला कदम फ्रंटएंड को अच्छा दिखाने का है, मैं टेलविंडसीएसएस का बहुत बड़ा प्रशंसक हूं, इसलिए मैं उनके साथ मूल्य निर्धारण कार्ड बनाता हूं

कोड यहां उपलब्ध है

अगला एक एसिंक फ़ंक्शन सेट करने देता है जो हमारे द्वारा अभी बनाए गए एपीआई रूट को कॉल करता है। फ़ंक्शन productId के साथ एक POST अनुरोध भेजेगा और बदले में, चेकआउट 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 नामक एक अतुल्यकालिक फ़ंक्शन को परिभाषित करता है
• इसके बाद एक विशिष्ट उत्पाद आईडी के साथ अपने सर्वर पर एक अनुरोध भेजें, यदि सफलता मिलती है तो चेकआउट यूआरएल के साथ एक नया ब्राउज़र टैब खुलता है
• यदि प्रक्रिया के दौरान कुछ भी गलत होता है, तो यह समस्या को पकड़ता है, उसे लॉग करता है, और उपयोगकर्ता को खरीदारी विफल होने का अलर्ट दिखाता है।

4. वेबहुक सेटअप करें

अंतिम लेकिन महत्वपूर्ण बात, हम ऑर्डर का ट्रैक रखने के लिए वेबहुक स्थापित कर रहे हैं। अपने लेमनस्क्वीज़ी डैशबोर्ड पर वापस जाएं और एक वेबहुक सेट करें।

यूआरएल के लिए, आपको सार्वजनिक रूप से सुलभ कुछ की आवश्यकता होगी, जो स्थानीय विकास के दौरान मुश्किल है। यहीं पर ngrok काम आता है।

ngrok आपको एक अस्थायी सार्वजनिक यूआरएल देगा जो आपकी स्थानीय मशीन पर अग्रेषित होगा, आप अपने डिवाइस में ngrok सेटअप करने के लिए इस लिंक को देख सकते हैं:
https://dashboard.ngrok.com/get-started/setup/

पहले की तरह, वेबहुक को संभालने के लिए कोड आपके लिए पहले ही तैयार किया जा चुका है। आपको बस इसे अपने रूट हैंडलर में सेट करना है और मीठे का आनंद लेना है

आइए इंस्टाग्राम, ट्विटर और गिटहब पर संपर्क में रहें-जहां असली जादू होता है।

बने रहने के लिए धन्यवाद! ?