- अपने ऐप में एकमुश्त भुगतान प्राप्त करने के लिए पेमेंट चेकआउट सेशन को एकीकृत करें।
- आवर्ती राजस्व मॉडल (recurring revenue model) के लिए सदस्यता बिलिंग लागू करें
- विश्वसनीय भुगतान सत्यापन के लिए वेबहुक हैंडलर कॉन्फ़िगर करें
- भुगतान सुरक्षा के सर्वोत्तम तरीकों को अपनाएं
- भुगतान प्रक्रिया: एक "भुगतान करें" बटन जो एक सुरक्षित भुगतान पृष्ठ खोलता है
- सदस्यता भुगतान: एकमुश्त और आवर्ती भुगतान विकल्प
- वेबहुक हैंडलर – आपके MVP में एक सुरक्षित और विश्वसनीय भुगतान हैंडलर
- छात्रों ने अपने प्रोजेक्ट के लिए एक मूल्य निर्धारण रणनीति और एक सरल बजट विकसित किया है।
- छात्रों के पास कोडस्पेस वातावरण के साथ एक एमवीपी गिटहब रिपॉजिटरी है।
- छात्रों ने अपने एमवीपी में उपयोगकर्ता प्रमाणीकरण लागू किया है।
आपका ऐप काम कर रहा है। उपयोगकर्ताओं ने इसका परीक्षण कर लिया है और आपने बग्स ठीक कर दिए हैं। आपने इसे वर्सेल जैसे प्लेटफॉर्म पर डिप्लॉय कर दिया है, इसलिए यह सार्वजनिक रूप से उपलब्ध है। अब एक सवाल आता है जिसका सामना हर स्टार्टअप करता है:
हमें भुगतान कैसे मिलेगा?
वित्तीय साक्षरता पाठ में, आपने राजस्व अनुमानों के साथ एक सरल बजट बनाया और अपने उद्यम के लिए मूल्य निर्धारण रणनीति का चयन किया। आपने अनुमान लगाया कि आपको कितने उपयोगकर्ताओं की आवश्यकता है, कितना शुल्क लेना है और कब तक आप लाभ-हानि तक पहुँचने की उम्मीद करते हैं। ये संख्याएँ अनुमान मात्र थीं। इस इकाई में, आप इन अनुमानों को एक वास्तविक भुगतान प्रणाली में परिवर्तित करेंगे।
नोट: इस एक्सेलेरेटर प्रोग्राम के लिए भुगतान लेना अनिवार्य नहीं है। हालांकि, इसे एक आवश्यक अगले कदम के रूप में विचार किया जाना चाहिए।
हम Stripe का उपयोग करेंगे, जो 40 से अधिक देशों में व्यवसायों द्वारा उपयोग किया जाने वाला एक भुगतान प्लेटफॉर्म है। Stripe भुगतान प्रक्रिया के जटिल और संवेदनशील पहलुओं जैसे कार्ड सत्यापन, धोखाधड़ी का पता लगाना, मुद्रा रूपांतरण और नियामक अनुपालन एवं सुरक्षा का प्रबंधन करता है— इसलिए आपको इसकी चिंता करने की आवश्यकता नहीं है। आपका काम केवल अपने ऐप को Stripe से जोड़ना, उसे शुल्क की जानकारी देना और परिणाम को संभालना है।
Stripe 40 से अधिक देशों में व्यवसायों को सहायता प्रदान करता है, लेकिन उपलब्धता क्षेत्र के अनुसार भिन्न होती है। यदि Stripe आपके देश में उपलब्ध नहीं है, तो आपके पास अन्य विकल्प हैं। उपलब्धता और बेहतर काम करने वाले विकल्पों के लिए अपने क्षेत्र की जाँच करें। यहाँ कुछ सुझाव दिए गए हैं:
- नाइजीरिया: Paystack का उपयोग करें — यह समान API के साथ उन्हीं अवधारणाओं (चेकआउट सेशन, वेबहुक, सब्सक्रिप्शन) का उपयोग करता है। उनके Accept Payments quickstart को देखें।
- भारत: स्ट्राइप उपलब्ध है, लेकिन इसके लिए व्यवसाय सत्यापन आवश्यक है। यदि आपके एमवीपी के लिए यह संभव नहीं है, तो इसके बजाय रेज़रपे का उपयोग करें — उनके स्टैंडर्ड चेकआउट क्विकस्टार्ट को देखें।
- मेक्सिको: यहां स्ट्राइप अच्छा काम करता है, लेकिन कोनेक्टा एक मजबूत स्थानीय विकल्प है जो OXXO (नकद) भुगतान को बेहतर ढंग से संभालता है।
इस यूनिट में दिए गए कोड पैटर्न – चेकआउट सेशन बनाना, वेबहुक और सब्सक्रिप्शन बिलिंग – अधिकांश पेमेंट प्लेटफॉर्म पर एक ही तरह से काम करते हैं, इसलिए आप यहाँ जो कुछ भी सीखेंगे वह सीधे तौर पर लागू होगा। अवधारणाओं को समझने के लिए गतिविधियों का अनुसरण करें, फिर अपने प्लेटफॉर्म के दस्तावेज़ों का उपयोग करके उन्हें अनुकूलित करें।
इस यूनिट में हम ट्यूटरमैच को मार्गदर्शक उदाहरण के रूप में इस्तेमाल करना जारी रखेंगे। इस यूनिट में, ट्यूटरमैच एक ट्यूशन सत्र के लिए भुगतान करने या मासिक प्लान की सदस्यता लेने की सुविधा जोड़ता है।
आप ट्यूटरमैच के उदाहरणों का अनुसरण करेंगे, और अपने स्वयं के एमवीपी के लिए पैटर्न को अनुकूलित करेंगे।
इस यूनिट के अंत तक, आपका MVP वास्तविक भुगतान प्राप्त करने में सक्षम हो जाएगा। आप पूरे समय टेस्ट मोड का उपयोग करेंगे, इसलिए कोई वास्तविक धनराशि का लेन-देन नहीं होगा, लेकिन आपके द्वारा लिखा गया कोड बाद में भुगतान प्राप्त करने का निर्णय लेने पर उपयोग किया जा सकता है।
अपने भुगतान प्लेटफ़ॉर्म के साथ शुरुआत करना
पिछले पाठों में, आपने GitHub को अपने कोड के लिए मुख्य केंद्र के रूप में स्थापित किया। आपने Supabase को अपने क्लाउड डेटाबेस के रूप में भी स्थापित किया। अब आप Stripe (या देश के अनुसार कोई वैकल्पिक प्लेटफ़ॉर्म) को अपने भुगतान प्लेटफ़ॉर्म के रूप में स्थापित करेंगे। प्रक्रिया वही है:
- खाता बनाएं
- API कुंजी प्राप्त करें
- इसे अपने ऐप से कनेक्ट करें
भुगतान के क्षेत्र में Stripe वही भूमिका निभाता है जो डेटाबेस स्टोरेज के क्षेत्र में Supabase निभाता है — यह सारे मुश्किल काम संभाल लेता है ताकि आप अपने उत्पाद पर ध्यान केंद्रित कर सकें। जब कोई उपयोगकर्ता Stripe के माध्यम से भुगतान करता है, तो Stripe:
- कार्ड नंबर को सत्यापित करता है और धोखाधड़ी की जांच करता है।
- भुगतान संबंधी विवरणों को एन्क्रिप्ट करता है ताकि वे कभी भी सार्वजनिक न हों।
- लेनदेन शुल्क काटकर आपके खाते में पैसे भेज दिए जाते हैं।
- यदि आपका उपयोगकर्ता किसी अन्य मुद्रा में भुगतान करता है तो यह मुद्रा रूपांतरण को संभालता है।
- प्रत्येक देश में नियामक अनुपालन का प्रबंधन करता है
स्ट्राइप जैसे प्लेटफॉर्म के बिना, आपको यह सब खुद ही बनाना पड़ता, जिसमें महीनों लग जाते और सुरक्षा प्रमाणपत्रों की आवश्यकता होती। स्ट्राइप इन सभी जटिलताओं को संभालता है, जिससे आप कम कोड के साथ अपने ऐप में भुगतान सुविधा जोड़ सकते हैं।
कई भुगतान प्लेटफॉर्म उपलब्ध हैं। MVP बनाने वाले व्यक्ति के लिए इनकी तुलना इस प्रकार है:
प्लेटफार्म
स्थापित करना
शुरू करने के लिए निःशुल्क
लेनदेन शुल्क
के लिए सर्वश्रेष्ठ
Stripe
सरल
हाँ
प्रति लेनदेन लगभग 2.9% + शुल्क (देश के अनुसार भिन्न होता है)
एमवीपी, वेब ऐप्स, सदस्यताएँ
Paypal
सरल
हाँ
लगभग 3.49% + शुल्क
बाज़ार, खरीदार सुरक्षा
वर्ग
सरल
हाँ
लगभग 2.6% + शुल्क
व्यक्तिगत भुगतान, खुदरा बिक्री
अपना खुद Payment app बनाएं
बहुत जटिल
लागू नहीं
कोई शुल्क नहीं (केवल सर्वर शुल्क)
MVP के लिए कभी भी अनुशंसित नहीं।
इन गतिविधियों के लिए हम स्ट्राइप का उपयोग करेंगे क्योंकि:
- यह डेवलपर्स के लिए डिज़ाइन किया गया है और Express.js (पिछले पाठों में आपके द्वारा उपयोग किया गया बैकएंड) के साथ एकीकृत होता है।
- यह निःशुल्क संस्करण परीक्षण और प्रारंभिक चरण के MVP के लिए उपयुक्त है और इसमें कोई मासिक शुल्क नहीं है।
- आपको लेन-देन शुल्क तभी देना होता है जब आप वास्तविक भुगतान प्राप्त करते हैं।
- यह कोड 40 से अधिक देशों और 135 से अधिक मुद्राओं में काम करता है।
- यह आवर्ती राजस्व मॉडल के लिए अंतर्निर्मित सदस्यता बिलिंग की सुविधा प्रदान करता है।
फिर से, अपने क्षेत्र या देश में उपलब्ध सर्वोत्तम भुगतान प्रसंस्करण विकल्प की जांच करें और अपने चुने हुए प्लेटफॉर्म के लिए भी यही प्रक्रिया अपनाएं।
अपने ऐप को पेमेंट प्लेटफॉर्म से कनेक्ट करना
भुगतान प्रक्रिया को एकीकृत करने के कई तरीके हैं। विकल्पों को समझने से आपको अपने एमवीपी के लिए सही विकल्प चुनने में मदद मिलती है।
दृष्टिकोण
इसका क्या मतलब है
सेटअप समय
सुरक्षा
अनुकूलन
के लिए सर्वश्रेष्ठ
होस्टेड चेकआउट
प्लेटफ़ॉर्म भुगतान पृष्ठ को होस्ट करता है। आप उपयोगकर्ताओं को वहां रीडायरेक्ट करते हैं।
लगभग 30 मिनट
उच्चतम — प्लेटफ़ॉर्म सब कुछ संभालता है
लो — प्लेटफ़ॉर्म लुक को नियंत्रित करता है
एमवीपी और स्टार्टअप (हमारी पसंद)
एम्बेडेड चेकआउट
प्लेटफ़ॉर्म यूआई आपके पेज के अंदर एक कंपोनेंट के रूप में दिखाई देता है।
लगभग 1 घंटा
उच्च — प्लेटफ़ॉर्म अभी भी कार्ड डेटा को संभालता है
मध्यम — आपके पेज लेआउट के अनुसार फिट बैठता है
ऐसे ऐप्स जिन्हें ब्रांड की निरंतरता की आवश्यकता होती है
भुगतान तत्व
भुगतान प्लेटफॉर्म द्वारा प्रदान किया गया एक सुरक्षित, पूर्वनिर्मित यूआई घटक (एक आईफ्रेम) जिसे आप अपने फ्रंटएंड कोड में "ड्रॉप" कर सकते हैं।
लगभग 2 घंटे
उच्च स्तर — लेकिन प्रबंधन के लिए और अधिक कोड की आवश्यकता है
उच्च — पूर्ण लेआउट नियंत्रण
ऐसे ऐप्स जिन्हें एक अद्वितीय चेकआउट प्रक्रिया की आवश्यकता है
कस्टम फॉर्म
सब कुछ शुरू से बनाएं
दिन
आप पीसीआई अनुपालन का प्रबंधन करते हैं।
पूर्ण नियंत्रण
एमवीपी के लिए अनुशंसित नहीं है
आप होस्टेड चेकआउट का उपयोग करेंगे। इसका कारण यह है:
सबसे तेजी से निर्माण
आप अपने सर्वर पर एक चेकआउट सेशन बनाते हैं, और पेमेंट प्लेटफॉर्म बाकी सब कुछ संभालता है - पेमेंट पेज, कार्ड वैलिडेशन, एरर मैसेज और रसीद।
सबसे सुरक्षित
आपका ऐप कार्ड नंबरों को कभी नहीं छूता। प्लेटफ़ॉर्म उन्हें अपने पेज पर स्वयं एकत्र करता है, जिसका अर्थ है कि आप स्वचालित रूप से पीसीआई-अनुरूप हैं।
उपयोगकर्ताओं द्वारा विश्वसनीय
पेमेंट प्लेटफॉर्म के चेकआउट पेज पर उनकी ब्रांडिंग दिखाई देती है, जिसे उपयोगकर्ता पहचानते हैं और उस पर भरोसा करते हैं।
अंतर्निर्मित सुविधाएँ
स्ट्राइप का होस्टेड पेज ग्राहक के स्थान के आधार पर स्वचालित रूप से कई मुद्राओं, एप्पल पे, गूगल पे, यूपीआई और अन्य भुगतान विधियों का समर्थन करता है। अधिकांश भुगतान प्लेटफॉर्म में समान सुविधाएं होती हैं।
आपकी पहली किस्त का भुगतान
हर भुगतान प्रणाली एक लेन-देन से शुरू होती है। इस पहले चरण में, आप अपने ऐप में चेकआउट प्रक्रिया का निर्माण करेंगे।
निम्नलिखित गतिविधियों के माध्यम से आपको यह समझने में मदद मिलेगी कि अपने ऐप में एक भुगतान बटन कैसे जोड़ा जाए जो उपयोगकर्ताओं को स्ट्राइप के होस्ट किए गए चेकआउट पेज पर रीडायरेक्ट करता है - एक पेशेवर, सुरक्षित पेज जहां उपयोगकर्ता अपने भुगतान विवरण दर्ज करते हैं।
जब वे भुगतान पूरा कर लेते हैं, तो वे आपके सफलता पृष्ठ पर वापस आ जाते हैं जो उनकी खरीदारी की पुष्टि करता है।
भुगतान से पहले, भुगतान के दौरान और भुगतान के बाद क्या होता है, इसकी रूपरेखा तैयार करने से बाद में होने वाले अनावश्यक काम से बचा जा सकता है। यदि आप ऐसा नहीं करते हैं, तो हो सकता है कि आप अपने साधारण बजट से एक ऐसा चेकआउट फ्लो बना लें जो आपके मूल्य निर्धारण मॉडल से मेल न खाता हो, और आपको इसे दोबारा बनाना पड़ेगा।
जो लोग किसी वैकल्पिक भुगतान प्लेटफॉर्म का उपयोग कर रहे हैं, वे अपने प्लेटफॉर्म के काम करने के तरीके के अनुसार खुद को ढाल सकते हैं, लेकिन उनके निर्देशों का पालन करना आवश्यक है।
वित्तीय साक्षरता पाठ से अपना सरल बजट खोलें और अपनी मूल्य निर्धारण रणनीति देखें।
इन प्रश्नों के उत्तर दें:
- आप किस चीज़ के लिए शुल्क ले रहे हैं? (किसी उत्पाद, सेवा या किसी फ़ीचर तक पहुंच के लिए?)
- क्या यह एकमुश्त भुगतान है या आवर्ती भुगतान? (हम इस गतिविधि में एकमुश्त भुगतान से शुरू करते हैं, फिर गतिविधि 3 में सदस्यताएँ जोड़ते हैं)
- कितना? (अपने सरल बजट राजस्व अनुमानों से मूल्य का उपयोग करें)
- भुगतान के बाद क्या होता है? (क्या उपयोगकर्ता को तुरंत एक्सेस मिल जाता है? एक पुष्टिकरण ईमेल? डाउनलोड?)
हमारे ट्यूटरमैच उदाहरण के लिए, उत्तर इस प्रकार हैं:
- शुल्क लेना: ट्यूशन सत्र के लिए एकमुश्त भुगतान
- प्रकार: एकमुश्त भुगतान (हम गतिविधि 3 में जोड़ी गई सदस्यताएँ भी शामिल करेंगे)
- कीमत: अपने बाजार के अनुसार समायोजित करें
अपने उत्तर लिख लें। इनका उपयोग नीचे दी गई गतिविधि में किया जाएगा।
ध्यान दें: Stripe का उपयोग करने के लिए, आपको अपनी वेबसाइट, सोशल मीडिया प्रोफ़ाइल या मोबाइल एप्लिकेशन का URL देना होगा जिसका उपयोग आप अपने व्यवसाय को बढ़ावा देने या उत्पाद बेचने के लिए करते हैं। इसके अलावा, आपको एक बैंक खाता भी देना होगा और अपनी पहचान सत्यापित करनी होगी । नीचे दी गई गतिविधि के लिए आप इसे छोड़ सकते हैं, लेकिन वास्तविक भुगतान प्राप्त करने के लिए आपको ये चरण पूरे करने होंगे।
गतिविधि 1
भुगतान प्राप्त करने के लिए स्ट्राइप सेटअप करें
अनुमानित समय: 20 मिनट
1. अपना स्ट्राइप खाता बनाएं
- stripe.com पर जाएं और अपने ईमेल का उपयोग करके एक निःशुल्क खाता बनाने के लिए ' अभी शुरू करें' पर क्लिक करें।
- अपना ईमेल सत्यापित करें और स्ट्राइप डैशबोर्ड में लॉग इन करें।
- अपने भुगतान विकल्पों में गैर-आवर्ती भुगतान चुनें। आप इसे किसी भी समय बदल सकते हैं।
- फिलहाल सैंडबॉक्स विकल्प चुनें। अपना खाता सक्रिय करने और भुगतान प्राप्त करने के लिए, आपको एक बैंक खाता, वेबसाइट या मोबाइल ऐप का यूआरएल देना होगा और अपनी पहचान सत्यापित करनी होगी।
- आप डैशबोर्ड के होम पेज पर पहुंच जाएंगे - कृपया कुछ देर रुककर चारों ओर देखें।
स्ट्राइप डैशबोर्ड आपके भुगतान नियंत्रण का केंद्र है। यहां वे मुख्य क्षेत्र दिए गए हैं जिनका आप उपयोग करेंगे:
- भुगतान: सभी लेनदेन देखें (परीक्षण और लाइव)
- सदस्यताएँ: आवर्ती बिलिंग का प्रबंधन करें (आप इसका उपयोग गतिविधि 3 में करेंगे)
- डेवलपर्स → एपीआई कुंजी: आपके एपीआई क्रेडेंशियल
- डेवलपर्स → वेबहुक्स: आपके सर्वर पर भुगतान सूचनाएं (आप इसे गतिविधि 2 में सेट करेंगे)
2. अपनी एपीआई कुंजी प्राप्त करें
स्ट्राइप आपको एपीआई कुंजी के दो सेट देता है - जो सुपाबेस की प्रकाशन योग्य और गुप्त कुंजी के समान हैं। प्रकाशन योग्य कुंजी का उपयोग फ्रंटएंड में सुरक्षित रूप से किया जा सकता है, जबकि गुप्त कुंजी का उपयोग केवल बैकएंड में ही किया जाना चाहिए।
- स्ट्राइप डैशबोर्ड में, बाईं ओर के साइडबार में डेवलपर्स पर क्लिक करें।
- क्लिक एपीआई कुंजी
- दोनों कुंजियों की प्रतिलिपि बना लें — आपको दोनों की आवश्यकता होगी।
कुंजी उपसर्ग में " टेस्ट" का अर्थ है कि आप परीक्षण मोड में हैं। कोई वास्तविक धनराशि नहीं ली जाएगी। जब आप वास्तविक भुगतान स्वीकार करने के लिए तैयार हों, तो आप लाइव कुंजियों ( pk_live_, sk_live_ ) पर स्विच कर सकते हैं।
3. अपने उत्पाद और कीमतें जोड़ें
हम आपके ऐप में उन चीजों के लिए उत्पाद जोड़ देंगे जिनके लिए आप शुल्क लेने की योजना बना रहे हैं।
ट्यूटरमैच के लिए, हम ट्यूशन सत्रों के लिए एकमुश्त भुगतान और ऐप सदस्यता के लिए आवर्ती भुगतान जोड़ने जा रहे हैं।
- मुख्य मेनू से उत्पाद सूची पर जाएं।
- क्लिक एक उत्पाद बनाएं.
- अपने उत्पाद का नाम बताइए
- एक विवरण जोड़ दो
- आवर्ती या एकमुश्त विकल्प चुनें
- कीमत दर्ज करें और अपनी मुद्रा चुनें।
- उत्पाद जोड़ें।
- जब उत्पाद सूची में दिखाई दे, तो उसे देखने के लिए उस पर क्लिक करें।
- मूल्य सूची पर, 3 बिंदुओं पर क्लिक करें और 'मूल्य आईडी कॉपी करें' चुनें।
- प्राइस आईडी सेव कर लें। ऐप को कोड करते समय आपको इसकी आवश्यकता होगी।
3. अन्य उत्पादों के लिए भी यही प्रक्रिया दोहराएं।
आप जिन अन्य चीजों के लिए शुल्क ले रहे हैं, उन्हें भी जोड़ें, मूल्य आईडी को कॉपी करना सुनिश्चित करें और यह भी बताएं कि यह किस उत्पाद के लिए उपयोग किया जाता है।
अब जबकि आपने अपना स्ट्राइप खाता और उत्पाद सेट अप कर लिया है, तो आप अपने ऐप में भुगतान प्रक्रिया जोड़ने पर काम कर सकते हैं।
सबसे पहले, आपको अपने ऐप में उपयोगकर्ता प्रवाह पर विचार करना चाहिए।
हम अपने ऐप में निम्नलिखित प्रक्रिया का पालन करेंगे:
- उपयोगकर्ता साइन अप करता है या लॉग इन करता है।
- मुख्य स्क्रीन पर, ट्यूशन सत्र के लिए भुगतान करें नामक एक नया बटन दिखाई देता है।
- उपयोगकर्ता बटन पर क्लिक करता है और उसे स्ट्राइप प्लेटफॉर्म पर ले जाया जाता है।
- उपयोगकर्ता भुगतान संबंधी जानकारी दर्ज करता है।
- उपयोगकर्ता को ऐप पर वापस भेज दिया जाता है।
- उपयोगकर्ता को एक संदेश प्राप्त होता है कि भुगतान की पुष्टि हो गई है।
- यदि उपयोगकर्ता स्ट्राइप प्लेटफॉर्म के भीतर भुगतान रद्द करता है:
- उन्हें ऐप पर वापस भेज दिया जाता है
- रद्द करने का संदेश दिखाई देता है
आगे की गतिविधियों के लिए, हम यह मानकर चल रहे हैं कि आपने अपने ऐप को Vercel के साथ डिप्लॉय किया है। इसका मतलब है कि एक नया सर्वरलेस आर्किटेक्चर है, इसलिए कोड को एडिट करना और उसे Codespace में चलाना थोड़ा अलग होगा। पहले, हम फ्रंटएंड को Express बैकएंड से अलग Codespace में चलाते थे। दो प्रोसेस, दो एनवायरनमेंट।
वर्सेल सर्वरलेस के साथ:
- कोई स्थायी सर्वर प्रक्रिया नहीं है
- api/index.js में मौजूद प्रत्येक फ़ंक्शन अनुरोध प्राप्त होने पर आवश्यकतानुसार सक्रिय हो जाता है।
- Vercel रूट .env (स्थानीय रूप से) या Vercel डैशबोर्ड (उत्पादन) से पर्यावरण चर को सीधे प्रत्येक फ़ंक्शन आह्वान में इंजेक्ट करता है।
- फ्रंटएंड (Vite) भी उसी रूट .env फ़ाइल से डेटा पढ़ता है, लेकिन केवल VITE_ उपसर्ग वाले वैरिएबल ही ब्राउज़र को दिखाई देते हैं। अन्य सभी पर्यावरण वैरिएबल सुरक्षित रहते हैं।
गतिविधि 2
अपने ऐप में भुगतान स्वीकार करें
अनुमानित समय: 45 मिनट
1. भुगतान स्वीकार करने के नमूना आर्किटेक्चर का अध्ययन करें
कोड लिखने से पहले, आप Stripe के ओपन-सोर्स सैंपल एप्लिकेशन का अध्ययन करेंगे। ये github.com/stripe-samples पर प्रकाशित संदर्भ कार्यान्वयन हैं — वही कोड पैटर्न जो Stripe प्रोडक्शन एप्लिकेशन के लिए सुझाता है। इन सैंपल का अध्ययन करने से आपको भुगतान एकीकरण की कार्यप्रणाली का आर्किटेक्चरल मैप मिलेगा, जिससे आपका अपना कार्यान्वयन तेज़ होगा और कुछ गड़बड़ होने पर आपको डीबगिंग के लिए एक आधारभूत संरचना मिलेगी।
कोई भी कोड लिखने से पहले, यह अध्ययन करें कि स्ट्राइप के अपने इंजीनियर भुगतान एकीकरण कैसे बनाते हैं।
- इस रिपॉजिटरी को अपने ब्राउज़र में खोलें: github.com/stripe-samples/accept-a-payment
- prebuilt-checkout-page फोल्डर में जाएं और दो फाइलों को देखें:
- सर्वर ( server/node/server.js ) — कुल मिलाकर लगभग 100 लाइनें। मूल पैटर्न इस प्रकार है:
// The sample creates a Checkout Session on the server
app.post('/create-checkout-session', async (req, res) => {
const session = await stripe.checkout.sessions.create({
mode: 'payment',
line_items: [{ price: process.env.PRICE, quantity: 1 }],
success_url: `${domainURL}/success.html?session_id={CHECKOUT_SESSION_ID}`,
cancel_url: `${domainURL}/canceled.html`,
});
return res.redirect(303, session.url);
});
- ग्राहक — दो अलग-अलग भाग
- भुगतान ट्रिगर एक सिंगल फॉर्म बटन है।
- ग्राहक — दो अलग-अलग भाग
- मुख्य App.jsx फ़ाइल को Stripe से प्राप्त प्रतिक्रियाओं को रूट करना होगा।
function App() {
return (
} />
} />
} />
);
}
यह पेमेंट बटन के लिए पूरा क्लाइंट-साइड कोड है। इसका फ्लो इस प्रकार है:
- आपका ऐप आपके सर्वर को अनुरोध भेजता है →
- आपका सर्वर चेकआउट सेशन बनाता है →
- स्ट्राइप एक होस्टेड भुगतान पृष्ठ तैयार करता है →
- उपयोगकर्ता को वहां पुनर्निर्देशित किया जाता है →
- भुगतान करने के बाद, वे आपके ऐप पर वापस आ जाते हैं →
- ऐप सफलता या रद्द होने के आधार पर उपयोगकर्ता को उचित मार्ग पर ले जाता है।
इस वास्तुकला के बारे में तीन बातों पर ध्यान दें:
- आपका ऐप कार्ड डेटा को कभी नहीं छूता। Stripe का होस्टेड चेकआउट पेज भुगतान विवरण एकत्र करता है। इससे आप स्वचालित रूप से PCI-अनुरूप बने रहते हैं — आपको क्रेडिट कार्ड सुरक्षा मानकों के बारे में कभी चिंता करने की आवश्यकता नहीं है।
- सर्वर ही शुल्क तय करता है। उत्पाद, कीमत और मुद्रा सर्वर पर ही निर्धारित होते हैं, जहां उपयोगकर्ता उनमें कोई बदलाव नहीं कर सकते।
- सफलता URL में एक सेशन ID शामिल होता है। इससे आपका सफलता पृष्ठ भुगतान विवरण प्राप्त कर सकता है और उचित पुष्टि प्रदर्शित कर सकता है।
यह आपका संदर्भ कोड है। यदि आप अपना स्ट्राइप इंटीग्रेशन बनाते समय कुछ गड़बड़ पाते हैं, तो आप अंतर जानने के लिए अपने कोड की तुलना इस नमूने से कर सकते हैं।
2. कोडस्पेस सीक्रेट्स में कुंजी और कीमत जोड़ें
आप अपनी कुंजियों को कोडस्पेस में अपनी .env फ़ाइलों में जोड़ सकते हैं, लेकिन अपने रिपॉज़िटरी के लिए कोडस्पेस सीक्रेट्स में जितना हो सके उतना जोड़ें।
- GitHub पर जाएं और ऊपरी दाएं कोने में अपनी प्रोफ़ाइल पर क्लिक करें।
- सेटिंग्स पर क्लिक करें
- बाईं ओर के मेनू में, कोडस्पेस पर क्लिक करें।
- नया रहस्य खोजें पर क्लिक करें।
- स्ट्राइप से प्राप्त कुंजी को कॉपी करके अपनी STRIPE_SECRET_KEY जोड़ें।
- अपने PRICE_ID के लिए एक और गुप्त आईडी जोड़ें। इसे वर्णनात्मक नाम दें। उदाहरण के लिए, ट्यूटरमैच के लिए, हमारी गुप्त आईडी का नाम STRIPE_PRICE_ID_TUTOR है।
3. अपने रिपॉजिटरी में एक नई ब्रांच खोलें
- अपने GitHub रिपॉजिटरी पर जाएं और एक नई ब्रांच बनाएं। याद रखें, अब जब आपने Vercel के माध्यम से डिप्लॉय कर दिया है, तो आप कोई भी नया डेवलपमेंट मुख्य ब्रांच से अलग ब्रांच पर करना चाहेंगे।
- अपना कोडस्पेस (या एक नया) खोलें और अपनी नई ब्रांच पर स्विच करें।
4. vite.config.js को अपडेट करें
जब आपने अपना ऐप डिप्लॉय किया था, तब आपने फ्रंटएंड और बैकएंड सर्वर दोनों के साथ लोकल डेवलपमेंट की सुविधा देने के लिए vite.config.js फ़ाइल जोड़ी थी। अब जब हम Vercel के साथ सर्वरलेस आर्किटेक्चर पर आ गए हैं, तो हम vite.config.js में मौजूद प्रॉक्सी कोड को हटा देंगे।
फ़ाइल को अपडेट करें। अब आवश्यक सभी कोड यहाँ है:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
5. ऐप को कॉन्फ़िगर करें और पर्यावरण चर जोड़ें
भुगतान के लिए आपको कुछ पर्यावरण चरों की आवश्यकता होगी। Stripe को सफल भुगतान होने पर वापस जाने वाले URL की जानकारी होनी चाहिए। यही हमारा मुख्य फ्रंटएंड URL है।
- Vercel को इंस्टॉल करें ताकि आप Vercel डेवलपमेंट एनवायरनमेंट चला सकें। टर्मिनल विंडो में टाइप करें:
npm install -g vercel
vercel link - आपको अपने GitHub खाते और रिपॉजिटरी को लिंक करने के लिए कहा जाएगा।
प्रोजेक्ट को लिंक करने और पर्यावरण चर प्राप्त करने के लिए हां कहें। - आपको अपने कोडस्पेस में नोड मॉड्यूल को पुनः स्थापित करने के लिए npm install कमांड चलाने की भी आवश्यकता हो सकती है।
- आपके रूट .env फ़ाइल में यह पंक्ति जोड़ें:FRONTEND_URL=आपका_गिटहब_URL
हम रूट .env फ़ाइल का उपयोग कर सकते हैं क्योंकि हम वर्सेल सर्वरलेस आर्किटेक्चर पर चले गए हैं। GitHub URL प्राप्त करने के लिए ऐप चलाएँ और उसे यहाँ डालें।महत्वपूर्ण: URL के अंत में मौजूद किसी भी / को हटा दें!
- हमने कोडस्पेस सीक्रेट्स में स्ट्राइप कुंजी और price_id जोड़ दिए हैं, फिर भी आइए उन्हें इसमें जोड़ते हैं। .पर्यावरण परीक्षण के लिए भी। साथ ही जोड़ें
STRIPE_SECRET_KEY=आपकी_स्ट्राइप_सीक्रेट_की
STRIPE_PRICE_ID_TUTOR=आपका_भुगतान_मूल्य_आईडी
को .पर्यावरणअपने PRICE_ID का नाम उचित रूप से रखें।स्ट्राइप कुंजी और price_id को रूट .env फ़ाइल में जोड़ना सुरक्षित है। जब तक वेरिएबल में VITE_ शामिल नहीं है, तब तक यह सुरक्षित रहता है।
सुनिश्चित करें कि Codespace Secrets और .env फ़ाइल में पर्यावरण मान मेल खाते हों। Codespace Secrets को .env फ़ाइल पर प्राथमिकता दी जाती है। यदि आप एक जगह कुंजी को अपडेट करते हैं, तो उसे दूसरी जगह भी अपडेट करें — मानों का मेल न होना अक्सर ऐसी त्रुटियों का कारण बनता है जिन्हें डीबग करना मुश्किल होता है।
6. राउटर लाइब्रेरी जोड़ें
यह सुनिश्चित करने के लिए कि ऐप उपयोगकर्ता को सही पेज पर ले जाए, इस आधार पर कि वे लॉग इन हैं या नहीं, उन्होंने पहले ही भुगतान कर दिया है या नहीं, और भुगतान सफल हुआ है या नहीं, हम राउटर लाइब्रेरी का उपयोग करेंगे।
- अपने टर्मिनल विंडो में npm install react-router-dom टाइप करें।
7. अपने ऐप में स्ट्राइप को एकीकृत करने में मदद के लिए कोपायलट से अनुरोध करें।
इसमें बहुत कुछ शामिल है, इसलिए हम इसे चरण दर चरण करेंगे, खासकर कोपायलट (या किसी अन्य एलएलएम) से आपके लिए कोड जनरेट करने का अनुरोध करेंगे।
- LLM से कहें कि वे बैकएंड api/index.js (या आपकी बैकएंड सर्वर फ़ाइल का नाम जो भी हो) को अपडेट करें। याद रखें, प्रोडक्शन में जाने पर हम बैकएंड कोड को यहीं स्थानांतरित करते हैं।
हम एलएलएम से स्ट्राइप को पोस्ट अनुरोध लिखने के लिए कहेंगे, जिसमें आपकी विशिष्ट भुगतान संरचना के लिए आवश्यक जानकारी दी जाएगी।
api/index.js में मेरे एक्सप्रेस सर्वर में एक स्ट्राइप पेमेंट चेकआउट एंडपॉइंट जोड़ें।
- .env फ़ाइल से STRIPE_SECRET_KEY का उपयोग करें
- /api/create-checkout-session नाम से एक POST रूट बनाएं।
- इसमें .env फ़ाइल से STRIPE_PRICE_ID_TUTOR का उपयोग करके एक प्राइस आईडी का उपयोग किया जाना चाहिए।
- stripe.checkout.sessions.create का उपयोग निम्न प्रकार से करें:
- line_items: एक ऐरे जिसमें .env से STRIPE_PRICE_ID_TUTOR और quantity: 1 शामिल है।
- मोड: इसे 'भुगतान' पर सेट करें (क्योंकि यह एक बार का ट्यूशन सत्र है)।
- success_url: Construct the base URL using:
const baseURL = process.env.FRONTEND_URL || `https://${process.env.VERCEL_URL}`
Then use baseURL + ‘/success’ for the success_url - cancel_url: baseURL का उपयोग करें (वही बेस यूआरएल, कोई पथ नहीं)
- सेशन URL को JSON फॉर्मेट में वापस भेजें ताकि फ्रंटएंड उपयोगकर्ता को रीडायरेक्ट कर सके। अभी फ्रंटएंड कोड में कोई बदलाव न करें।
नोट: इसे सरल रखें—अभी तक कोई डेटाबेस या सुपाबेस कोड शामिल न करें।
महत्वपूर्ण: payment_method_types को शामिल न करें (स्ट्राइप को इसे गतिशील रूप से चुनने दें)
एलएलएम को index.js में कोड को अपडेट करना चाहिए।
- परिवर्तनों को देखें और उन्हें स्वीकार करें (या आवश्यकता पड़ने पर संपादन या स्पष्टीकरण के लिए अनुरोध करें)।
- एलएलएम से अनुरोध करें कि वह भुगतान संबंधी कार्यों को संभालने के लिए मुख्य App.jsx फ्रंटएंड फ़ाइल को अपडेट करे।
- कोपायलट आपके लिए यह कर सकता है, लेकिन आपको स्ट्राइप इंस्टॉल करना होगा, npm install stripe ।
ध्यान दें: देखें कि हमने कोपायलट को सफलता और रद्दीकरण के लिए रीडायरेक्ट यूआरएल हेतु बेस यूआरएल बनाने के लिए कैसे निर्देशित किया। हमने इसे FRONTEND_URL या process.env.VERCEL_URL के रूप में उपयोग करने के लिए निर्दिष्ट किया है। FRONTEND_URL हमारा एनवायरनमेंट वेरिएबल है, और इसका उपयोग यहां कोडस्पेस में परीक्षण के लिए किया जाता है। जब हम इसे प्रोडक्शन में ले जाएंगे, तो रीडायरेक्ट हमारे वर्सेल ऐप यूआरएल पर आधारित होना चाहिए। वर्सेल स्वचालित रूप से वह वेरिएबल बना देता है। हमें बस इसे अपने कोड में जोड़ना होगा ताकि यह परीक्षण और प्रोडक्शन दोनों में काम करे।
अपनी index.js फ़ाइल की जाँच करें और सुनिश्चित करें कि इसमें FRONTEND_URL और VERCEL_URL शामिल हैं।
एलएलएम को index.js में कोड को अपडेट करना चाहिए।
- परिवर्तनों को देखें और उन्हें स्वीकार करें (या आवश्यकता पड़ने पर संपादन या स्पष्टीकरण के लिए अनुरोध करें)।
- एलएलएम से अनुरोध करें कि वह भुगतान संबंधी कार्यों को संभालने के लिए मुख्य App.jsx फ्रंटएंड फ़ाइल को अपडेट करे।
- कोपायलट आपके लिए यह कर सकता है, लेकिन आपको स्ट्राइप इंस्टॉल करना होगा, npm install stripe ।
कृपया भुगतान संबंधी प्रक्रियाओं को संभालने के लिए मेरी App.jsx फ़ाइल को अपडेट करें। कृपया निम्नलिखित जोड़ें:
- बेसिक राउटिंग और पेमेंट ट्रिगर को संभालने के लिए मेरी App.jsx फ़ाइल को अपडेट करें।
- दो रूट सेट करें: / (होम) और /success (सफलता पृष्ठ)।
- / रूट पर, यदि कोई उपयोगकर्ता लॉग इन है, तो 'एक सत्र बुक करें ($60)' बटन दिखाएं।
- उस बटन के लिए एक handlePay फ़ंक्शन बनाएं। इसमें निम्नलिखित कार्य होने चाहिए:
- मेरे बैकएंड (/api/create-checkout-session) से स्ट्राइप यूआरएल प्राप्त करें।
- सर्वर द्वारा लौटाए गए URL पर रीडायरेक्ट करें।
- यदि उपयोगकर्ता लॉग इन नहीं है, तो डिफ़ॉल्ट प्रमाणीकरण फ़ॉर्म दिखाएँ।
- स्ट्राइप से वापसी होने पर एलएलएम को सफलता और रद्द करने वाले पृष्ठ बनाने के लिए प्रेरित करें।
Success.jsx नाम से एक साधारण React पेज बनाएं और उसे सक्सेस रूट बनाएं।
- इसमें 'भुगतान सफल!' शीर्षक प्रदर्शित होना चाहिए।
- एक संक्षिप्त संदेश शामिल करें: 'ट्यूशन सेशन बुक करने के लिए धन्यवाद। हम आपको जल्द ही ईमेल द्वारा विवरण भेज देंगे।'
- एक 'डैशबोर्ड पर वापस जाएं' बटन जोड़ें जो उपयोगकर्ता को / रूट पर वापस भेजने के लिए react-router-dom से useNavigate का उपयोग करता है।
Cancel.jsx नाम का एक सरल React पेज बनाएं।
- इसमें इस तरह का संदेश प्रदर्शित होना चाहिए: 'भुगतान रद्द कर दिया गया है। आपके कार्ड से कोई शुल्क नहीं लिया गया है।'
- एक 'पुनः प्रयास करें' बटन जोड़ें जो उपयोगकर्ता को मुख्य डैशबोर्ड (/) पर वापस भेजने के लिए useNavigate का उपयोग करता है।
- स्टाइलिंग को इस तरह रखें कि उपयोगकर्ता को यह महसूस न हो कि उन्होंने कुछ गलत किया है।
8. भुगतान प्रक्रिया का परीक्षण करें
- अपने टर्मिनल विंडो में vercel dev कमांड से अपना ऐप शुरू करें। यह पहले के npm run dev कमांड की जगह लेता है और आपके फ्रंटएंड और बैकएंड दोनों को एक ही पोर्ट पर एक साथ चलाता है।
- अपने "अभी भुगतान करें" बटन पर क्लिक करें। आपको स्ट्राइप द्वारा होस्ट किए गए चेकआउट पेज पर ले जाया जाएगा, जहां आपके उत्पाद का नाम और कीमत दिखाई देगी।
- भुगतान पूरा करने के लिए स्ट्राइप के टेस्ट कार्ड का उपयोग करें:
- कार्ड नंबर: 4242 4242 4242 4242
- समाप्ति तिथि: कोई भी भविष्य की तिथि (उदाहरण के लिए, 30/12)
- सीवीसी: कोई भी 3 अंक (उदाहरण के लिए 123)
- नाम: कोई भी नाम
सबमिट करने के बाद, आपको सफलता पृष्ठ पर ले जाया जाएगा जहाँ भुगतान के लिए धन्यवाद दिया जाएगा।
भुगतान सफल हुआ है या नहीं, यह सत्यापित करने के लिए, स्ट्राइप डैशबोर्ड पर जाएं और भुगतान पर क्लिक करें। आपको वहां अपना परीक्षण भुगतान दिखाई देगा।
- दोबारा जांच करें। इस बार, स्ट्राइप पेमेंट पेज पर रहते हुए पेमेंट रद्द करें।
- यह आपको रद्द करने वाले पृष्ठ पर ले जाएगा, जिससे आप दोबारा प्रयास कर सकेंगे।
9. अपना कोड सबमिट करें
एक बार जब आप यह सुनिश्चित कर लें कि आपकी भुगतान प्रक्रिया सही ढंग से काम कर रही है, तो अपने काम को कमिट करें - वेबहुक जोड़ने से पहले यह एक अच्छा चेकपॉइंट है।
आप सोर्स कंट्रोल पैनल का उपयोग करके (बाईं ओर के साइडबार में सोर्स कंट्रोल आइकन पर क्लिक करें, एक कमिट संदेश जोड़ें और चेक मार्क पर क्लिक करें) या टर्मिनल का उपयोग करके कमिट कर सकते हैं:
वेबहुक
आपका चेकआउट प्रोसेस सही चल रहा है और सक्सेस पेज पर पेमेंट डिटेल्स दिख रही हैं। लेकिन समस्या यह है: सक्सेस पेज पेमेंट कन्फर्मेशन का भरोसेमंद तरीका नहीं है।
सोचिए क्या-क्या गलत हो सकता है:
- सफलता पृष्ठ लोड होने से पहले ही उपयोगकर्ता ब्राउज़र बंद कर देता है।
- रीडायरेक्ट के दौरान नेटवर्क बाधित हो जाता है
- उपयोगकर्ता सफलता पृष्ठ से बाहर निकल जाता है।
इन सभी मामलों में, स्ट्राइप ने भुगतान संसाधित कर दिया, लेकिन आपके ऐप को इसकी जानकारी नहीं मिली। उपयोगकर्ता ने भुगतान कर दिया, लेकिन आपके सर्वर के पास इसका कोई रिकॉर्ड नहीं है।
वेबहुक इस समस्या का समाधान करते हैं। वेबहुक एक संदेश है जिसे स्ट्राइप सीधे आपके सर्वर को भेजता है जब कोई घटना घटती है — जैसे कि भुगतान पूरा होना। आपके सर्वर को स्ट्राइप से यह पूछने की आवश्यकता नहीं होती कि "क्या उन्होंने भुगतान किया?" — स्ट्राइप आपके सर्वर को स्वयं ही सूचित कर देता है।
वेबहुक फ्लो को समझें
फर्जी भुगतान पुष्टिकरणों को रोकना बेहद जरूरी है। वेबहुक सत्यापन के बिना, कोई व्यक्ति आपके सर्वर पर भुगतान होने का दावा करते हुए अनुरोध भेज सकता है, जबकि वास्तव में भुगतान नहीं हुआ होता।
यहां बताया गया है कि आपके भुगतान प्रवाह में वेबहुक कैसे काम करते हैं:
उपयोगकर्ता "भुगतान करें" पर क्लिक करता है → स्ट्राइप चेकआउट → उपयोगकर्ता भुगतान करता है → दो चीजें होती हैं:
- उपयोगकर्ता को सफलता पृष्ठ दिखाई देता है (अविश्वसनीय)
- स्ट्राइप आपके सर्वर पर वेबहुक भेजता है (विश्वसनीय)
उपयोगकर्ता अपने ब्राउज़र पर जो भी गतिविधि करे, आपका सर्वर वेबहुक प्राप्त कर लेता है। यही कारण है कि भुगतान की पुष्टि के लिए वेबहुक एक विश्वसनीय स्रोत है।
गतिविधि 3
एक वेबहुक हैंडलर बनाएं
अनुमानित समय: 30 मिनट
आप अपने एक्सप्रेस सर्वर पर एक एंडपॉइंट बनाएंगे जो स्ट्राइप से भुगतान पुष्टिकरण प्राप्त करेगा, उनकी प्रामाणिकता को सत्यापित करेगा और सफल और असफल भुगतान परिदृश्यों का परीक्षण करेगा।
1. कोपायलट को वेबहुक एंडपॉइंट जोड़ने के लिए संकेत दें
आपको अपने बैकएंड सर्वर में वेबहुक एंडपॉइंट जोड़ना होगा। वेबहुक एंडपॉइंट की एक विशिष्ट आवश्यकता है: हस्ताक्षर सत्यापन के लिए इसे रॉ रिक्वेस्ट बॉडी की आवश्यकता होती है। यदि एक्सप्रेस पहले बॉडी को JSON के रूप में पार्स करता है, तो हस्ताक्षर जांच विफल हो जाएगी।
महत्वपूर्ण: यदि आपके सर्वर में app.use(express.json()) है, तो वेबहुक रूट को उस लाइन से पहले परिभाषित किया जाना चाहिए। अन्यथा, वेबहुक हैंडलर द्वारा बॉडी को देखे जाने से पहले ही एक्सप्रेस उसे JSON के रूप में पार्स कर लेगा, और हस्ताक्षर सत्यापन विफल हो जाएगा।
- कोपायलट चैट पैनल खोलें और पूछें:
api/index.js में मेरे एक्सप्रेस सर्वर में एक स्ट्राइप वेबहुक एंडपॉइंट जोड़ें।
आवश्यकताएं:
– /webhook पर POST एंडपॉइंट
– इस रूट के लिए केवल express.raw() मिडलवेयर का उपयोग करें (express.json() का नहीं)
– STRIPE_WEBHOOK_SECRET का उपयोग करके वेबहुक हस्ताक्षर को सत्यापित करें
– checkout.session.completed और checkout.session.expired इवेंट्स को हैंडल करें
– भुगतान संबंधी विवरण (सेशन आईडी, राशि, ग्राहक का ईमेल) कंसोल में लॉग करें।
– रसीद की पुष्टि के लिए 200 लौटाएँ
– महत्वपूर्ण: इस रूट में रॉ बॉडी पार्सिंग का उपयोग होना चाहिए, JSON पार्सिंग का नहीं।
- अपनी index.js फ़ाइल की जाँच करें और यदि आवश्यक हो तो उसका क्रम बदलें। आपका वेबहुक रूट सबसे पहले आना चाहिए।
// 1. Webhook route FIRST (needs raw body)
app.post('/webhook', express.raw({ type: 'application/json' }), webhookHandler);
// 2. JSON parsing for all other routes AFTER
app.use(express.json());
// 3. Your other routes
app.post('/create-checkout-session', ...);
app.get('/success', ...);
2. स्ट्राइप सीएलआई चलाएँ
कोडस्पेस से वेबहुक चलाना थोड़ा मुश्किल है। आपको अपने सर्वर पोर्ट को सार्वजनिक करना होगा, और इसके बावजूद भी कभी-कभी त्रुटियाँ आ सकती हैं। परीक्षण को आसान बनाने के लिए, हम स्ट्राइप CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करेंगे। यह आपके ऐप से स्ट्राइप तक एक टनल बनाता है जिससे सीधा संचार संभव हो पाता है।
- एक नए कोडस्पेस टर्मिनल में स्ट्राइप इंस्टॉल करें।
brew install stripe/stripe-cli/stripe
नहीं तोयदि इससे भी काम नहीं बनता (मैन्युअल तरीका):
कुंजी जोड़ें: curl -s https://packages.stripe.dev/api/security/keypair/stripe-cli-gpg/public | gpg –dearmor | sudo tee /usr/share/keyrings/stripe.gpg > /dev/null
रिपॉजिटरी जोड़ें: echo “deb [signed-by=/usr/share/keyrings/stripe.gpg] https://packages.stripe.dev/stripe-cli-debian-local stable main” | sudo tee /etc/apt/sources.list.d/stripe.list
इंस्टॉल करें: sudo apt update && sudo apt install stripe
लॉगिन करें। टाइप करें
स्ट्राइप लॉगिनइससे आपको एक पेयरिंग कोड और लिंक मिलेगा। लिंक पर क्लिक करें, स्ट्राइप में लॉग इन करें और कनेक्शन की अनुमति दें।
- जांचें कि आपका ऐप किस पोर्ट पर चल रहा है। पोर्ट्स टैब पर जाएं और अपने ऐप के लिए सूचीबद्ध पोर्ट देखें। यह संभवतः 3000 होगा, लेकिन कोई दूसरा पोर्ट भी हो सकता है।
सुनना शुरू करें। टाइप करें:
stripe listen –forward-to localhost:[YOUR_PORT]/api/webhookएक बार जब यह सुनना शुरू कर देगा, तो आपको एक संदेश दिखाई देगा:
तैयार! आपका वेबहुक साइनिंग सीक्रेट whsec_xxxxxxxx हैसाइनिंग सीक्रेट को कॉपी करें और इसे तुरंत अपने रूट .env फ़ाइल में STRIPE_WEBHOOK_SECRET के लिए कॉपी करें।
- परिवर्तनों को प्रभावी होने के लिए अपने ऐप को पुनः आरंभ करें।
4. एक नए भुगतान का परीक्षण करें
- अपने ऐप में "अभी भुगतान करें" बटन पर क्लिक करके परीक्षण करें।
- टेस्ट कार्ड 4242 4242 4242 4242 का उपयोग करके भुगतान पूरा करें।
- अपने कोडस्पेस टर्मिनल में कंसोल लॉगिंग की जाँच करें— आपको निम्नलिखित दिखाई देना चाहिए:
भुगतान की पुष्टि हो गई है!
सत्र आईडी: cs_test_…
राशि: 1500
ग्राहक का ईमेल पता: [email protected] - यदि वह दिखाई नहीं देता है, तो किसी भी त्रुटि की जांच करें, और कोपायलट से यह सुनिश्चित करने के लिए कहें कि console.log कोड मौजूद है और काम कर रहा है।
4. अस्वीकृत कार्ड की जांच करें
वास्तविक उपयोगकर्ताओं के कार्ड कभी-कभी अस्वीकृत हो जाते हैं। इस परिदृश्य का परीक्षण करने से आपको यह समझने में मदद मिलती है कि भुगतान विफल होने पर क्या होता है।
- चेकआउट प्रक्रिया को दोबारा दोहराएं, लेकिन इस बार अस्वीकृति परीक्षण कार्ड का उपयोग करें:
- कार्ड नंबर: 4000 0000 0000 0002
- अन्य मान: वैध भुगतान के समान
स्ट्राइप चेकआउट पेज पर उपयोगकर्ता को "आपका कार्ड अस्वीकृत हो गया" संदेश दिखाएगा। उपयोगकर्ता स्ट्राइप चेकआउट पेज पर ही रहेगा और किसी दूसरे कार्ड से कोशिश कर सकता है।
ध्यान दें कि आपके सर्वर पर क्या होता है: कोई वेबहुक सक्रिय नहीं होता । चेकआउट.सेशन.कंप्लीटेड इवेंट केवल भुगतान सफल होने पर ही सक्रिय होता है। यह सही व्यवहार है - आपके सर्वर को केवल सफल भुगतानों पर ही कार्रवाई करने की आवश्यकता है।
5. अपने बदलावों को स्थायी करें
सोर्स कंट्रोल पैनल या टर्मिनल का उपयोग करके कमिट करें। इससे भुगतान कार्यान्वयन के प्रत्येक चरण को अलग-अलग कमिट में रखा जा सकेगा।
महत्वपूर्ण: हमने Codespaces में परीक्षण के लिए Stripe CLI का उपयोग किया। अपने प्रोडक्शन ऐप पर जाने से पहले, आपको Stripe डैशबोर्ड में वेबहुक सेट अप करना होगा। आपको एक अलग सीक्रेट साइनिंग कुंजी असाइन की जाएगी जिसे आपको अपने प्रोडक्शन प्लेटफॉर्म सीक्रेट्स में जोड़ना होगा और वेबहुक को अपने प्रोडक्शन URL पर रीडायरेक्ट करना होगा। निर्देश नीचे दिए गए हैं।
1. उत्पादन के लिए स्ट्राइप में वेबहुक सेट अप करें
- अपने स्ट्राइप डैशबोर्ड पर जाएं।
- सबसे ऊपर वेबहुक्स खोजें। वेबहुक्स पर क्लिक करें। यह आपको वर्कबेंच पर ले जाएगा।
- वर्कबेंच के अंदर, वेबहुक्स टैब पर जाएं।
- क्लिक करें + गंतव्य जोड़ें बटन।
- इवेंट्स यहां से: ड्रॉपडाउन में चेकआउट ढूंढें
- इवेंट चुनें: checkout.session.completed और checkout.session.expired चुनें
- गंतव्य प्रकार: वेबहुक एंडपॉइंट चुनें।
- एंडपॉइंट यूआरएल: अपना प्रोडक्शन यूआरएल पेस्ट करें (उदाहरण के लिए, https://your-vercel.app/api/webhook )।
- एंडपॉइंट बनाने के बाद, अपना वेबहुक सीक्रेट (जो whsec_ से शुरू होता है) प्राप्त करने के लिए साइनिंग सीक्रेट के नीचे रिवील पर क्लिक करें।
- अपनी प्रोडक्शन सीक्रेट्स में कुंजी जोड़ें (स्ट्राइप एपीआई कुंजी के समान प्रक्रिया):
- नाम: STRIPE_WEBHOOK_SECRET
- मान: अपना whsec_… गुप्त कोड पेस्ट करें
आपके कोड में किसी भी प्रकार का बदलाव करने की आवश्यकता नहीं है।
सदस्यता बिलिंग
हर व्यवसाय एक बार में शुल्क नहीं लेता। यदि आपकी मूल्य निर्धारण रणनीति में आवर्ती राजस्व शामिल है — जैसे मासिक सदस्यता, वार्षिक योजनाएँ या सदस्यता शुल्क — तो आपको सदस्यता आधारित बिलिंग की आवश्यकता होगी।
अच्छी खबर यह है कि Stripe में एकमुश्त भुगतान से सदस्यता प्रणाली में बदलने के लिए आपके द्वारा पहले से लिखे गए कोड में केवल कुछ बदलाव करने होंगे। उपयोगकर्ता के लिए चेकआउट का अनुभव लगभग एक जैसा ही रहेगा। इस भाग में, आप यह भी जानेंगे कि Stripe का अपना सदस्यता नमूना ऐप मूल्य निर्धारण विकल्प कैसे प्रस्तुत करता है और सदस्यताओं का प्रबंधन कैसे करता है।
अगली गतिविधि में, आप सीखेंगे कि अपने ऐप में सदस्यता भुगतान विकल्प कैसे जोड़ा जाए। हम एक ही भुगतान विकल्प रखेंगे, उदाहरण के लिए ट्यूशन सत्र के लिए, लेकिन ऐप सुविधाओं की वार्षिक सदस्यता के लिए दूसरा भुगतान विकल्प जोड़ेंगे।
गतिविधि 4
सदस्यता भुगतान जोड़ें
अनुमानित समय: 45 मिनट
आप अपने ऐप में एक दूसरा भुगतान प्रकार, आवर्ती सदस्यता, जोड़ेंगे। सफलता मिलने पर, आप अपने सुपाबेस डेटाबेस को अपडेट करके उस उपयोगकर्ता को भुगतानकर्ता के रूप में चिह्नित करेंगे।
1. चेकआउट-सिंगल-सब्सक्रिप्शन सैंपल का अध्ययन करें
- इस रिपॉजिटरी को अपने ब्राउज़र में खोलें: github.com/stripe-samples/checkout-single-subscription
The सर्वर कोड (~120 पंक्तियाँ) गतिविधि 1 में आपके द्वारा बनाए गए मॉडल से काफी मिलती-जुलती है। मुख्य अंतर निम्नलिखित हैं:- मोड 'भुगतान' के बजाय 'सदस्यता ' है।
- इस सैंपल में एक कस्टमर पोर्टल एंडपॉइंट भी शामिल है - इससे सब्सक्राइबर आपसे संपर्क किए बिना अपनी सदस्यता (रद्द करना, प्लान बदलना) स्वयं प्रबंधित कर सकते हैं।
मेरे एक्सप्रेस सर्वर में एक स्ट्राइप वेबहुक एंडपॉइंट जोड़ें।
आवश्यकताएं:
– /webhook पर POST एंडपॉइंट
– इस रूट के लिए केवल express.raw() मिडलवेयर का उपयोग करें (express.json() का नहीं)
– STRIPE_WEBHOOK_SECRET का उपयोग करके वेबहुक हस्ताक्षर को सत्यापित करें
– checkout.session.completed और checkout.session.expired इवेंट्स को हैंडल करें
– भुगतान संबंधी विवरण (सेशन आईडी, राशि, ग्राहक का ईमेल) कंसोल में लॉग करें।
– रसीद की पुष्टि के लिए 200 लौटाएँ
– महत्वपूर्ण: इस रूट में रॉ बॉडी पार्सिंग का उपयोग होना चाहिए, JSON पार्सिंग का नहीं।
- अपनी server.js फ़ाइल की जाँच करें और यदि आवश्यक हो तो उसका क्रम बदलें। आपका वेबहुक रूट सबसे पहले आना चाहिए।
// 1. Webhook route FIRST (needs raw body)
app.post('/webhook', express.raw({ type: 'application/json' }), webhookHandler);
// 2. JSON parsing for all other routes AFTER
app.use(express.json());
// 3. Your other routes
app.post('/create-checkout-session', ...);
app.get('/success', ...);
2. स्ट्राइप में उत्पाद जोड़ें
- यदि आपने अभी तक ऐसा नहीं किया है, तो अपने स्ट्राइप खाते में एक सदस्यता उत्पाद जोड़ें।
मुख्य मेनू से उत्पाद सूची पर जाएं।
- उत्पाद बनाएं पर क्लिक करें
- अपने उत्पाद का नाम बताइए
- एक विवरण जोड़ दो
- आवर्ती विकल्प चुनें
- कीमत दर्ज करें और अपनी मुद्रा चुनें।
- उत्पाद जोड़ें।
- जब उत्पाद सूची में दिखाई दे, तो उसे देखने के लिए उस पर क्लिक करें।
- मूल्य सूची पर, 3 बिंदुओं पर क्लिक करें और 'मूल्य आईडी कॉपी करें' चुनें।
3. कोडस्पेस और .env फ़ाइल में नई मूल्य आईडी जोड़ें
- GitHub अकाउंट पर वापस जाएं और एक नया Codespace सीक्रेट जोड़ें।
- अपनी प्रोफ़ाइल से, सेटिंग्स → कोडस्पेस पर क्लिक करें।
- एक नया सीक्रेट जोड़ें, इसे STRIPE_PRICE_ID_SUBSCRIPTION या कोई अन्य उपयुक्त नाम दें।
- स्ट्राइप से कॉपी की गई प्राइस आईडी को पेस्ट करें।
- अपने कोडस्पेस में जाकर इसे .env फ़ाइल में जोड़ें। यह बैकअप आपको नए कोडस्पेस सीक्रेट को एकीकृत करने के लिए कोडस्पेस को दोबारा बनाने से बचाता है। नीचे दिया गया नोट देखें।
ध्यान दें: नए सीक्रेट को पहचानने के लिए आपको अपने कोडस्पेस कंटेनर को रीबिल्ड करना पड़ सकता है। आप इसे कोडस्पेस से कर सकते हैं, इसके लिए कमांड पैलेट खोलने के लिए F1 दबाएं और "कोडस्पेस: रीबिल्ड कंटेनर" खोजें। आप इसे बैकअप के रूप में server/.env में भी जोड़ सकते हैं, ताकि आपको इस सेशन के लिए कंटेनर को रीबिल्ड न करना पड़े।
4. सुपाबेस में प्रोफाइल टेबल जोड़ें
यदि हम अपने ऐप के उपयोगकर्ताओं से भुगतान लेने जा रहे हैं, तो हम इसे सुपाबेस में ट्रैक करना चाहते हैं। वर्तमान में, उपयोगकर्ता सुपाबेस प्रमाणीकरण और गूगल लॉगिन के आधार पर साइन अप कर सकते हैं।
हम सुपाबेस यूजर ऑथेंटिकेशन प्रक्रिया में कोई बदलाव नहीं कर सकते, इसलिए हम भुगतान संबंधी जानकारी रखने के लिए एक नई प्रोफाइल टेबल जोड़ेंगे।
- अपने Supabase प्रोजेक्ट पर जाएं → प्रमाणीकरण → उपयोगकर्ता ।
आपको उन सभी उपयोगकर्ताओं की सूची दिखाई देगी जिन्होंने आपके ऐप के लिए साइन अप किया है। - मुख्य मेनू से SQL एडिटर पर जाएं।
- प्रोफाइल टेबल बनाने के लिए इस SQL कमांड को पेस्ट करें। यह कमांड यूजर ऑथेंटिकेशन टेबल को उस टेबल से यूजर आईडी के साथ लिंक करता है।
create table profiles (
id uuid references auth.users not null primary key,
email text,
is_paid boolean default false
);
प्रोफाइल टेबल बनाई जानी चाहिए।
- टेबल एडिटर पर जाएं और आपको एक खाली प्रोफाइल टेबल दिखाई देगी।
यदि आपके पास पहले से ही उपयोगकर्ता हैं, तो हमें उन मौजूदा उपयोगकर्ताओं को प्रोफाइल तालिका में जोड़ने के लिए एक कमांड चलाने की आवश्यकता है। - SQL एडिटर पर वापस जाएं और इस कमांड को चलाएं।
INSERT INTO public.profiles (id, email)
SELECT id, email
FROM auth.users
ON CONFLICT (id) DO NOTHING;
- टेबल एडिटर पर वापस जाएं।
- यह सुनिश्चित करें कि प्रोफाइल टेबल में कोई उपयोगकर्ता जोड़ा गया हो।
- स्क्रीन के ऊपरी भाग में एक बटन देखें जिस पर लिखा हो आरएलएस नीति नहीं तो आरएलएस अक्षम.
- यदि वहां " RLS अक्षम" लिखा हो, तो बटन पर क्लिक करें और "इस टेबल के लिए RLS सक्षम करें" चुनें।
- अगर वहां RLS पॉलिसी लिखा हो, तो उस पर क्लिक करें। वहां लिखा होना चाहिए, उपयोगकर्ता अपनी प्रोफ़ाइल अपडेट कर सकते हैं।
5. नए उपयोगकर्ताओं के लिए फ़ंक्शन और ट्रिगर जोड़ें
सुपाबेस को यह जानना आवश्यक है कि जब कोई नया उपयोगकर्ता पंजीकरण करता है, तो उसे प्रोफ़ाइल तालिका में एक नई पंक्ति जोड़नी होगी। आप सुपाबेस में ट्रिगर सेट करके ऐसा कर सकते हैं।
- सुपाबेस में SQL एडिटर पर जाएं और निम्नलिखित कोड पेस्ट करें।
create or replace function public.handle_new_user()
returns trigger as $$
begin
insert into public.profiles (id, email)
values (new.id, new.email);
return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
ट्रिगर बनाया जाना चाहिए।
- यह जांचने के लिए कि यह मौजूद है या नहीं, डेटाबेस → फ़ंक्शन पर जाएं। आपको वहां handle_new_user सूचीबद्ध दिखाई देगा।
6. ऐप में सुपाबेस सीक्रेट कुंजी जोड़ें
Supabase के साथ आपका उपयोगकर्ता प्रमाणीकरण फ्रंटएंड से हुआ और इसमें प्रकाशन योग्य कुंजी का उपयोग किया गया। प्रोफाइल टेबल का अपडेट बैकएंड से होगा, और इसके लिए हम Supabase की गुप्त कुंजी का उपयोग करेंगे। इसका मतलब है कि हमें इसे अपने ऐप में एक पर्यावरण चर के रूप में जोड़ना होगा।
- अपने सुपाबेस प्रोजेक्ट पर जाएं और प्रोजेक्ट सेटिंग्स पर क्लिक करें।
- एपीआई कुंजी पर क्लिक करें।
- नीचे स्क्रॉल करें और गुप्त कुंजी ढूंढें। इसे कॉपी करें।
- अपने GitHub डैशबोर्ड में, अपनी प्रोफ़ाइल → कोडस्पेस पर जाएं।
- एक नया सीक्रेट जोड़ें, उसका नाम SUPABASE_SERVICE_ROLE_KEY रखें, और कुंजी को मान के रूप में पेस्ट करें।
- अब इसे जोड़ें SUPABASE_URL यह कोडस्पेस का एक और गुप्त रहस्य है। हो सकता है कि यह पहले से ही आपकी रूट फ़ोल्डर में मौजूद हो। .पर्यावरण यह फ़ाइल मौजूद नहीं है, लेकिन आप इसे सुपाबेस डैशबोर्ड में दोबारा पा सकते हैं।
- प्रोजेक्ट सेटिंग्स → डेटा एपीआई पर जाएं।
- एपीआई यूआरएल को कॉपी करें और इसे अपने कोडस्पेस सीक्रेट वैल्यू के रूप में पेस्ट करें।
- अपने कोडस्पेस कंटेनर को दोबारा बनाने से बचने के लिए (नीचे दिए गए नोट को देखें), इन दोनों वेरिएबल्स को कोडस्पेस में अपनी रूट .env फ़ाइल में भी जोड़ें।
ध्यान दें: नए सीक्रेट्स को पहचानने के लिए आपको अपने कोडस्पेस कंटेनर को रीबिल्ड करना पड़ सकता है। आप इसे कोडस्पेस से कर सकते हैं, कमांड पैलेट के लिए F1 दबाएं और "कोडस्पेस: रीबिल्ड कंटेनर" खोजें। आप इसे बैकअप के रूप में server/.env में भी जोड़ सकते हैं, ताकि आपको इस सेशन के लिए कंटेनर को रीबिल्ड न करना पड़े।
7. ऐप में सदस्यता भुगतान जोड़ें
हम कोपायलट में आवश्यक कोड जोड़ने के लिए इस प्रक्रिया को चरणबद्ध तरीके से आगे बढ़ाएंगे।
- अपने कोडस्पेस वातावरण में वापस जाएं। सुनिश्चित करें कि पिछले अपडेट कमिट हो चुके हैं, ताकि आप एक नए कमिट से शुरुआत कर सकें।
- कोपायलट को बैकएंड सर्वर अपडेट करने के लिए कहें। यहाँ एक नमूना प्रॉम्प्ट दिया गया है:
मेरे मौजूदा ट्यूटरिंग सेशन के स्ट्राइप पेमेंट एंडपॉइंट को बनाए रखें और api/index.js में सब्सक्रिप्शन के लिए एक नया एंडपॉइंट जोड़ें।
मोड सदस्यता है और कीमत STRIPE_PRICE_ID_SUBSCRIPTION है।
कोपायलट को api/index.js में एक नया app/post जेनरेट करना चाहिए। ट्यूटरमैच के लिए जेनरेट किया गया कोड देखने के लिए नीचे क्लिक करें।
कोड देखें
app.post('/api/create-subscription-session', async (req, res) => {
try {
const priceId = process.env.STRIPE_PRICE_ID_SUBSCRIPTION;
if (!priceId) {
return res.status(400).json({ error: 'Subscription Price ID not configured' });
}
if (!process.env.FRONTEND_URL) {
return res.status(500).json({ error: 'FRONTEND_URL not configured' });
}
const session = await stripe.checkout.sessions.create({
line_items: [
{
price: priceId,
quantity: 1,
},
],
mode: 'subscription',
success_url: process.env.FRONTEND_URL + '/success',
cancel_url: process.env.FRONTEND_URL,
});
res.json({ url: session.url });
} catch (error) {
console.error('Stripe subscription error:', error);
res.status(500).json({ error: error.message });
}
});
- कोपायलट से अनुरोध करें कि वह वेबहुक हैंडलर में सदस्यता विकल्प जोड़ दे, ताकि यह सशुल्क सदस्यता के लिए सुपाबेस को अपडेट कर सके।
यहां एक नमूना प्रश्न दिया गया है:
इसे मेरे वेबहुक हैंडलर में जोड़ें ताकि यह भुगतान मोड को उसी तरह से संभाले जैसे यह वर्तमान में करता है।
यदि यह सदस्यता मोड है, तो उस उपयोगकर्ता के लिए सुपाबेस में प्रोफ़ाइल तालिका को अपडेट करें। is_paid को true पर सेट करें। SUPABASE_URL प्रोजेक्ट URL है और गुप्त कुंजी SUPABASE_SERVICE_ROLE_KEY है।
इसके अलावा subscription.deleted को भी हैंडल करें और उस उपयोगकर्ता के लिए प्रोफाइल को अपडेट करें ताकि is_paid का मान false हो जाए।
ट्यूटरमैच वेबहुक हैंडलर का कोड देखने के लिए नीचे क्लिक करें। ध्यान दें, हमने इसमें काफी सारा console.log कोड शामिल किया है, ताकि यह सुनिश्चित हो सके कि वेबहुक सही ढंग से काम कर रहा है और भुगतान प्राप्त हो रहे हैं।
कोड देखें
app.post('/api/webhook', express.raw({ type: 'application/json' }), (req, res) => {
const sig = req.headers['stripe-signature'];
let event;
try {
// This verifies the message actually came from Stripe
event = stripe.webhooks.constructEvent(
req.body,
sig,
process.env.STRIPE_WEBHOOK_SECRET // This is your whsec_ key
);
} catch (err) {
console.error(`Webhook Error: ${err.message}`);
return res.status(400).send(`Webhook Error: ${err.message}`);
}
// 2. HANDLE THE EVENT
if (event.type === 'checkout.session.completed') {
const session = event.data.object;
const mode = session.mode;
const email = session.customer_details?.email;
console.log('Session mode:', mode);
console.log('Session email:', email);
console.log('Session details:', session);
if (mode === 'payment') {
console.log('Payment Successful!');
console.log('Customer Email:', email);
console.log('Amount Paid:', session.amount_total / 100); // Stripe uses cents
// This is where you would update your database (e.g., User.paid = true)
} else if (mode === 'subscription') {
console.log('Subscription Successful!');
console.log('Customer Email:', email);
// Update Supabase profiles table: set is_paid true for this user
if (email) {
const supabaseUrl = `${process.env.SUPABASE_URL}/rest/v1/profiles?email=eq.${encodeURIComponent(email)}`;
const supabaseHeaders = {
'Content-Type': 'application/json',
'apikey': process.env.SUPABASE_SERVICE_ROLE_KEY,
'Authorization': `Bearer ${process.env.SUPABASE_SERVICE_ROLE_KEY}`,
};
const supabaseBody = JSON.stringify({ is_paid: true });
console.log('Supabase PATCH URL:', supabaseUrl);
console.log('Supabase PATCH Headers:', supabaseHeaders);
console.log('Supabase PATCH Body:', supabaseBody);
fetch(supabaseUrl, {
method: 'PATCH',
headers: supabaseHeaders,
body: supabaseBody
})
.then(res => {
console.log('Supabase PATCH response status:', res.status);
return res.json();
})
.then(data => {
console.log('Supabase update (is_paid true):', data);
})
.catch(err => {
console.error('Supabase update error:', err);
});
} else {
console.log('No email found for subscription session. Supabase not updated.');
}
}
} else if (event.type === 'checkout.session.expired') {
const session = event.data.object;
console.log('Session expired. Releasing the tutor slot for:', session.id);
} else if (event.type === 'subscription.deleted') {
const subscription = event.data.object;
const email = subscription.customer_email || subscription.customer?.email;
console.log('Subscription deleted. Email:', email);
console.log('Subscription details:', subscription);
// Update Supabase profiles table: set is_paid false for this user
if (email) {
const supabaseUrl = `${process.env.SUPABASE_URL}/rest/v1/profiles?email=eq.${encodeURIComponent(email)}`;
const supabaseHeaders = {
'Content-Type': 'application/json',
'apikey': process.env.SUPABASE_SERVICE_ROLE_KEY,
'Authorization': `Bearer ${process.env.SUPABASE_SERVICE_ROLE_KEY}`,
};
const supabaseBody = JSON.stringify({ is_paid: false });
console.log('Supabase PATCH URL:', supabaseUrl);
console.log('Supabase PATCH Headers:', supabaseHeaders);
console.log('Supabase PATCH Body:', supabaseBody);
fetch(supabaseUrl, {
method: 'PATCH',
headers: supabaseHeaders,
body: supabaseBody
})
.then(res => {
console.log('Supabase PATCH response status:', res.status);
return res.json();
})
.then(data => {
console.log('Supabase update (is_paid false):', data);
})
.catch(err => {
console.error('Supabase update error:', err);
});
} else {
console.log('No email found for deleted subscription. Supabase not updated.');
}
}
// Return a 200 response to acknowledge receipt
res.json({ received: true });
});
अब फ्रंटएंड की बारी। हमने प्रॉम्प्ट को 2 भागों में बांटा। पहले भाग में सब्सक्रिप्शन भुगतान के लिए बटन जोड़ा गया, और दूसरे भाग में सब्सक्रिप्शन का भुगतान होने या न होने के आधार पर सुविधाओं को सक्षम/अक्षम करने का लॉजिक जोड़ा गया।
- कोपायलट से एक नया सब्सक्रिप्शन भुगतान बटन जोड़ने का अनुरोध करें। यहाँ एक नमूना प्रॉम्प्ट दिया गया है।
फ्रंटएंड में, App.jsx में, $9.99/वर्ष के लिए सदस्यता लें नामक एक नया बटन जोड़ें।
बटन पर क्लिक करने से create_subscription_session पोस्ट ट्रिगर होना चाहिए।
- कोपायलट से अनुरोध करें कि वह ऐसी व्यवस्था जोड़े जिससे उपयोगकर्ता द्वारा भुगतान न किए जाने पर सुविधाएं अक्षम हो जाएं और भुगतान किए जाने पर सक्षम हो जाएं।
यदि उपयोगकर्ता का मूल्य भुगतान false है तो 'सलाह प्राप्त करें' और 'ट्यूटर ढूंढें' बटन अक्षम होने चाहिए, और यदि मूल्य true है तो सक्षम होने चाहिए।
एक सूचना लेबल जोड़ें – “सदस्यता लेकर इन सुविधाओं को अनलॉक करें” और इसे 2 फीचर बटनों के ऊपर रखें।
ट्यूटरमैच के फ्रंटएंड कोड को देखने के लिए नीचे क्लिक करें।
कोड देखें
function Home({ user, setUser }) {
const [screen, setScreen] = useState('advice');
const [isPaid, setIsPaid] = useState(false);
const navigate = useNavigate();
useEffect(() => {
async function fetchProfile() {
if (user && user.email) {
try {
const res = await fetch(`${import.meta.env.VITE_SUPABASE_URL}/rest/v1/profiles?email=eq.${encodeURIComponent(user.email)}`, {
headers: {
'apikey': import.meta.env.VITE_SUPABASE_KEY,
'Authorization': `Bearer ${import.meta.env.VITE_SUPABASE_KEY}`,
},
});
if (res.ok) {
const data = await res.json();
// Supabase may return booleans or truthy strings; normalize to boolean
setIsPaid(Boolean(data[0]?.is_paid));
} else {
setIsPaid(false);
}
} catch {
setIsPaid(false);
}
} else {
setIsPaid(false);
}
}
fetchProfile();
}, [user]);
const handlePay = async () => {
try {
const res = await fetch('/api/create-checkout-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
if (!res.ok) {
const text = await res.text();
alert('Payment error: ' + text);
return;
}
const data = await res.json();
if (data.url) {
window.location.href = data.url;
} else {
alert('Could not start payment session.');
}
} catch (err) {
alert('Payment error: ' + err.message);
}
};
const handleSubscribe = async () => {
try {
const res = await fetch('/api/create-subscription-session', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
});
if (!res.ok) {
const text = await res.text();
alert('Subscription error: ' + text);
return;
}
const data = await res.json();
if (data.url) {
window.location.href = data.url;
} else {
alert('Could not start subscription session.');
}
} catch (err) {
alert('Subscription error: ' + err.message);
}
};
const handleLogout = async () => {
await supabase.auth.signOut();
setUser(null);
};
return (
TutorMatch
Get Personalized Tutor Advice
{!user ? (
{
supabase.auth.getSession().then(({ data }) => {
setUser(data?.session?.user || null);
});
}} />
) : (
<>
{!isPaid && (
Unlock these features by subscribing
)}
{screen === 'advice' ? : }
>
)}
);
}
function App() {
const [user, setUser] = useState(null);
useEffect(() => {
const { subscription } = supabase.auth.onAuthStateChange((event, session) => {
setUser(session?.user || null);
});
supabase.auth.getSession().then(({ data }) => {
setUser(data?.session?.user || null);
});
return () => {
subscription?.unsubscribe && subscription.unsubscribe();
};
}, []);
return (
} />
} />
} />
);
}
export default App
8. भुगतान प्रक्रिया का परीक्षण करें
- एकमुश्त भुगतान का परीक्षण करें : एकमुश्त भुगतान विकल्प पर क्लिक करें, टेस्ट कार्ड 4242 4242 4242 4242 का उपयोग करें और भुगतान पूरा करें।
- सदस्यता परीक्षण: सदस्यता विकल्प पर क्लिक करें, उसी परीक्षण कार्ड का उपयोग करें और भुगतान पूरा करें।
- अपने टर्मिनल की जाँच करें — वेबहुक को प्रत्येक मोड के लिए अलग-अलग संदेश लॉग करने चाहिए।
- स्ट्राइप डैशबोर्ड में, यहां जाएं:
- अपना एकमुश्त भुगतान देखने के लिए भुगतान करें
- अपनी नई सदस्यता देखने के लिए सदस्यता अनुभाग पर जाएँ (यह अनुभाग सदस्यता बनाने के बाद दिखाई देता है)
- सुपाबेस पर जाएं और प्रोफाइल टेबल देखें। जिस उपयोगकर्ता ने भुगतान किया है, उसके लिए is_paid का मान true पर सेट होना चाहिए।
- अपने ऐप में यह सुनिश्चित करें कि भुगतान करने वाले उपयोगकर्ता को अनलॉक की गई सुविधाओं तक पहुंच प्राप्त हो।
- लॉग आउट करें और फिर से लॉग इन करें। जांच लें कि उन्हें अभी भी सभी सुविधाओं का लाभ मिल रहा है या नहीं।
- लॉग आउट करें और बिना भुगतान वाले उपयोगकर्ता के रूप में लॉग इन करें। जांच लें कि सुविधाएं लॉक हैं या नहीं।
9. अपने बदलावों को स्थायी करें
जब आप संतुष्ट हो जाएं कि आपका कोड दोनों प्रकार के भुगतानों के लिए सही ढंग से काम करता है, तो परिवर्तनों को अपनी रिपॉजिटरी शाखा में कमिट करें।
इसके बाद आप GitHub पर वापस जाकर अपने पेमेंट प्रोसेसिंग कोड को मुख्य ब्रांच के साथ मर्ज कर सकते हैं। इससे आपके बदलाव तुरंत Vercel पर डिप्लॉय हो जाएंगे।
10. वर्सेल सीक्रेट्स को अपडेट करें
आपने कोडस्पेस सीक्रेट्स में कई नए एनवायरनमेंट वैरिएबल जोड़े हैं। आपको इन्हें वर्सेल में भी जोड़ना होगा ताकि ये प्रोडक्शन में काम करते रहें।
- अपने वर्सेल प्रोजेक्ट डैशबोर्ड पर जाएं।
- सेटिंग्स → पर्यावरण चर पर क्लिक करें।
- निम्नलिखित पर्यावरण चरों को उनके संबंधित मानों के साथ जोड़ें:
- धारी_गुप्त_कुंजी
- STRIPE_PRICE_ID_TUTOR (या आपने अपनी मूल्य आईडी का जो भी नाम रखा हो)
- STRIPE_PRICE_ID_SUBSCRIPTION (या आपका मूल्य आईडी नाम)
- स्ट्राइप_वेबहुक_सीक्रेट
- SUPABASE_URL
- SUPABASE_SERVICE_ROLE_KEY
आपको Vercel में FRONTEND_URL जोड़ने की आवश्यकता नहीं है, env वेरिएबल VERCEL_URL स्वचालित रूप से Vercel द्वारा सेट किया जाता है, और हमने इसे अपने Success और Cancel पेजों (Activity 2) के कोड में जोड़ा है।
11. सुपाबेस रीडायरेक्ट यूआरएल की जाँच करें
यदि आपने परिनियोजन पाठ में ऐसा नहीं किया है, तो सुनिश्चित करें कि आपका Vercel URL Supabase के अनुमत रीडायरेक्ट URL में जोड़ा गया है - निर्देशों के लिए परिनियोजन पाठ देखें।
प्रतिबिंब
भुगतान प्रक्रिया आपके व्यवसाय की सफलता का एक महत्वपूर्ण हिस्सा है, इसलिए आप यह सुनिश्चित करना चाहेंगे कि यह सही ढंग से काम करे। इन प्रश्नों पर विचार करें:
मूल्य निर्धारण रणनीति
नमूना कोड
व्यापार मॉडल
महत्वपूर्ण पदों
होस्टेड चेकआउट — स्ट्राइप द्वारा प्रदान किया गया एक भुगतान पृष्ठ जिस पर आपका ऐप उपयोगकर्ताओं को रीडायरेक्ट करता है, जहां स्ट्राइप भुगतान विवरण एकत्र करता है, इसलिए आपका ऐप कभी भी कार्ड डेटा को नहीं छूता है।
चेकआउट सेशन — यह एक सर्वर-साइड ऑब्जेक्ट है जिसे आप स्ट्राइप में बनाते हैं और जो यह परिभाषित करता है कि क्या चार्ज करना है, कितना चार्ज करना है और भुगतान के बाद उपयोगकर्ता को कहां रीडायरेक्ट करना है।
वेबहुक — एक HTTP अनुरोध जो स्ट्राइप भुगतान होने पर सीधे आपके सर्वर पर भेजता है, जिससे उपयोगकर्ता द्वारा अपने ब्राउज़र में की जाने वाली गतिविधि से स्वतंत्र रूप से विश्वसनीय भुगतान पुष्टिकरण प्रदान किया जाता है।
express.raw() — एक्सप्रेस मिडलवेयर जो अनुरोध के अपरिवर्तित निकाय को संरक्षित करता है, जो वेबहुक हस्ताक्षर सत्यापन के सही ढंग से काम करने के लिए आवश्यक है।
बिजनेस सैंडबॉक्स — एक स्ट्राइप वातावरण जहां परीक्षण कार्ड नंबरों का उपयोग करके भुगतान का अनुकरण किया जाता है, इसलिए विकास के दौरान कोई वास्तविक धन का शुल्क नहीं लिया जाता है।
