टीएल;डीआर इस ट्यूटोरियल में, हम यह पता लगाएंगे कि कैसे स्ट्राइप पेमेंट गेटवे को हमारे पूर्ण-स्टैक अनुप्रयोगों में सहजता से एकीकृत किया जाए, और उन्हें आसानी से FL0 पर होस्ट किया जाए। 🚀 परिचय चाहे वह ई-कॉमर्स हो या SaaS एप्लिकेशन, पेमेंट गेटवे हमारी परियोजनाओं का एक केंद्रीय घटक हैं। 💳 इस गाइड में, हम यह पता लगाएंगे कि इन एकीकरणों को कैसे सरल बनाया जाए, विशेष रूप से ऑनलाइन के लिए स्ट्राइप चेकआउट पर ध्यान केंद्रित किया जाए। भुगतान प्रसंस्करण स्ट्राइप का डेवलपर-अनुकूल एपीआई हमारे विकास के समय में कटौती करते हुए सुरक्षित और कुशल लेनदेन सुनिश्चित करता है। उदाहरण के लिए, हमने SaaS एप्लिकेशन भुगतान पृष्ठ का मामला लिया है। हम बैकएंड के लिए और अपने डेटाबेस के रूप में Postgres का उपयोग करेंगे। फ्रंटएंड पर हम के साथ उपयोग कर रहे हैं। NodeJs vite ReactJs बाद में हम आगे बढ़ेंगे और आसानी से अपने प्रोजेक्ट को FL0 पर होस्ट करेंगे। ⬆️ तो, आइए एक चुटकी हास्य के साथ शुरुआत करें: अवलोकन 🧑💻 इस ट्यूटोरियल में, हम एक सरल डेमो एप्लिकेशन बनाएंगे जहां उपयोगकर्ता साइन अप कर सकता है, अपनी योजना का चयन कर सकता है और अपने क्रेडिट कार्ड से चेकआउट कर सकता है। इसके लिए हमें 2 अलग-अलग रिपॉजिटरी बनाने की आवश्यकता होगी, एक हमारे के लिए और दूसरा के लिए। backend frontend फ़ोल्डर संरचना 🗂️ यहां बताया गया है कि हमारी दोनों फ़ोल्डर संरचनाएं कैसी दिखेंगी, केवल संदर्भ के लिए: अब, चलिए शुरू करते हैं। चरण 1: बैकएंड की स्थापना दक्षता के लिए, इस ट्यूटोरियल में, हम " " टेम्पलेट का लाभ उठाएँगे। fl0zone/blog-express-pg-sequelize फिर हम अपने प्रोजेक्ट के लिए महत्वपूर्ण नहीं होने वाली किसी भी फाइल या फ़ोल्डर को हटा देंगे। 🧑💻 ट्यूटोरियल की अधिक व्यापक समझ के लिए, आप ब्लॉग पोस्ट को देखना चाह सकते हैं। इस हमारा टेम्प्लेट एक बुनियादी एप्लिकेशन और एक डॉकराइज्ड डेटाबेस को समाहित करता है। Node.js PostgreSQL यहां हमारे सेटअप के लिए संबंधित फ़ाइल है: docker-compose.yaml version: "3" services: app: build: context: . target: development env_file: .env volumes: - ./src:/usr/src/app/src ports: - 8081:80 depends_on: - db db: image: postgres:14 restart: always environment: POSTGRES_USER: admin POSTGRES_PASSWORD: admin POSTGRES_DB: my-startup-db volumes: - postgres-data:/var/lib/postgresql/data ports: - 5432:5432 volumes: postgres-data: अब हम आगे बढ़ेंगे और कुछ आवश्यक पैकेज स्थापित करेंगे npm install bcrypt cookie-parser cors jsonwebtoken pg-hstore stripe अब, हमें अपनी स्ट्राइप एपीआई कुंजी प्राप्त करने की आवश्यकता होगी। इसके लिए हमें स्ट्राइप पर एक नया अकाउंट बनाना होगा। यहां हम डेमो के लिए उपयोग करेंगे। Test Mode यहां उन पर्यावरण चरों की सूची दी गई है जिनकी हमें इस परियोजना के लिए आवश्यकता होगी। .env.example STRIPE_PUBLISHABLE_KEY= STRIPE_SECRET_KEY= POSTGRES_DB_URI= secretKey= CLIENT_URL= चरण 2: डेटाबेस मॉडल बनाना आइए अब अपना डेटाबेस स्थापित करके शुरुआत करें। 🐘 चूँकि हम Sequelize ORM का उपयोग कर रहे हैं, हमें अपने उपयोगकर्ता डेटा के लिए एक मॉडल बनाने की आवश्यकता होगी। यहां हमारे मॉडल का कोड है 👇 models/userModel.js module.exports = (sequelize, DataTypes) => { const User = sequelize.define( "user", { email: { type: DataTypes.STRING, unique: true, isEmail: true, //checks for email format allowNull: false, }, password: { type: DataTypes.STRING, allowNull: false, }, tier: { type: DataTypes.STRING, allowNull: true, }, }, { timestamps: true } ); return User; }; चरण 2: रूट स्थापित करना अब, आइए आगे बढ़ें और अपने मार्ग बनाएं - उपयोगकर्ता को लॉग इन करने और सत्र को संग्रहीत करने में मदद करता है POST /login - एक नया खाता बनाने में मदद करता है POST /signup - स्ट्राइप चेकआउट पेज लिंक जेनरेट और लौटाता है POST /create-checkout-session इन 3 मार्गों को 2 फ़ाइलों में इस प्रकार विभाजित किया गया है: routes/userRoutes.js const express = require("express"); const userController = require("../controllers/userController"); const { signup, login } = userController; const userAuth = require("../middleware/userAuth"); const router = express.Router(); router.post("/signup", userAuth.saveUser, signup); router.post("/login", login); module.exports = router; routes/stripeRoute.js const express = require("express"); const { updatePlan } = require("../controllers/stripeController"); const router = express.Router(); router.post("/create-checkout-session", updatePlan); module.exports = router; चरण 3: उपयोगकर्ता प्रोफ़ाइल सेट करना 🧑💻 उपयोगकर्ता प्रोफ़ाइल सेट करने के लिए, पहले हम यह जांचने के लिए एक मिडलवेयर परिभाषित करेंगे कि साइनअप के दौरान किसी नए उपयोगकर्ता का ईमेल पता पहले से ही डेटाबेस में मौजूद है या नहीं। middleware/userAuth.js //importing modules const express = require("express"); const db = require("../models"); const User = db.users; const saveUser = async (req, res, next) => { console.log("here"); try { const checkEmail = await User.findOne({ where: { email: req.body.email, }, }); if (checkEmail) { return res.json(409).send("Authentication failed"); } next(); } catch (error) { console.log(error); } }; module.exports = { saveUser, }; फिर हम आगे बढ़ेंगे और अपने लॉगिन और साइनअप कार्यों को परिभाषित करेंगे controllers/userController.js const bcrypt = require("bcrypt"); const db = require("../models"); const jwt = require("jsonwebtoken"); const User = db.users; const signup = async (req, res) => { try { const { email, password } = req.body; console.log(email); const data = { email, password: await bcrypt.hash(password, 10), }; //saving the user const user = await User.create(data); if (user) { let token = jwt.sign({ id: user.id }, process.env.secretKey, { expiresIn: 1 * 24 * 60 * 60 * 1000, }); res.cookie("jwt", token, { maxAge: 1 * 24 * 60 * 60, httpOnly: true }); console.log("user", JSON.stringify(user, null, 2)); console.log(token); return res.status(201).send(user); } else { return res.status(409).send("Details are not correct"); } } catch (error) { console.log(error); } }; // Login Authentication const login = async (req, res) => { try { const { email, password } = req.body; const user = await User.findOne({ where: { email: email, }, }); if (user) { const isSame = await bcrypt.compare(password, user.password); if (isSame) { let token = jwt.sign({ id: user.id }, process.env.secretKey, { expiresIn: 1 * 24 * 60 * 60 * 1000, }); res.cookie("jwt", token, { maxAge: 1 * 24 * 60 * 60, httpOnly: true }); //send user data return res.status(201).send(user); } else { return res.status(401).send("Authentication failed"); } } else { return res.status(401).send("Authentication failed"); } } catch (error) { console.log(error); } }; module.exports = { signup, login, }; चरण 4: स्ट्राइप चेकआउट सेट करना यहीं पर हम अपने एप्लिकेशन में एकीकृत करेंगे। Stripe Checkout हम भुगतान प्रबंधित करने और उपयोगकर्ता सदस्यताएँ संभालने के लिए उपयोग करेंगे। Stripe API निम्नलिखित कोड एक नया स्ट्राइप चेकआउट सत्र बनाता है। 💳 हम इसे भुगतान विधि प्रकार, उत्पाद डेटा और मात्रा प्रदान करेंगे। हमें उन यूआरएल को भी निर्दिष्ट करने की आवश्यकता है जहां उपयोगकर्ता को सफल भुगतान पर या लेनदेन रद्द करने पर पुनर्निर्देशित किया जाएगा। और, यदि सब कुछ ठीक रहा तो सर्वर स्ट्राइप सत्र के लिए यूआरएल के साथ जवाब देगा। ✅ controllers/stripeController.js const db = require("../models"); const Stripe = require("stripe"); const User = db.users; require("dotenv").config(); const stripe = Stripe(process.env.STRIPE_SECRET_KEY); const updatePlan = async (req, res) => { try { const { email, product } = req.body; const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: [ { price_data: { currency: "usd", product_data: { name: product.name, }, unit_amount: product.price * 100, }, quantity: product.quantity, }, ], mode: "payment", success_url: `${process.env.CLIENT_URL}/success`, cancel_url: `${process.env.CLIENT_URL}/`, }); //find a user by their email const user = await User.findOne({ where: { email: email, }, }); if (user) { await user.update({ tier: product.name }); return res.send({ url: session.url }); } else { return res.status(401).send("User not found"); } } catch (error) { console.log(error); } }; module.exports = { updatePlan, }; अंत में, हमें अपने सभी मार्गों को अपने प्रवेश बिंदु, जो कि है, में जोड़ना होगा server.js server.js const cors = require("cors"); const express = require("express"); require("dotenv").config(); const cookieParser = require("cookie-parser"); const db = require("./models"); const userRoutes = require("./routes/userRoutes"); const PORT = process.env.PORT || 8080; const stripeRoute = require("./routes/stripeRoute"); const app = express(); // Middlewares app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser()); app.use(cors()); // Routes app.use("/api/v1/users", userRoutes); app.use("/api/v1/stripe", stripeRoute); app.listen(PORT, () => { console.log("Server started at port 8080"); try { db.sequelize.sync({ force: true }).then(() => { console.log("db has been re sync"); }); } catch (error) {} }); और हमारा बैकएंड ✅ पूरा हो गया है अब आगे बढ़ते हैं और इसे पर तैनात करने का प्रयास करते हैं। 🔼 FL0 चरण 5: FL0 के साथ परिनियोजन 🚀 अपने प्रोजेक्ट को FL0 पर तैनात करने के लिए हम पहले शुरू करेंगे। अपने रेपो को एक नए GitHub रिपॉजिटरी में धकेलना संदर्भ के लिए यह हमारे भंडार का लिंक है: https://github.com/dalefl0/stripe-fl0-backend अब हम तैनाती शुरू करने के लिए पर जाएंगे। app.fl0.dev यहां हमें एक नया प्रोजेक्ट बनाने की आवश्यकता होगी, उदाहरण के लिए इसे नाम दें। stripe-fl0 अब हमें एक नया पोस्टग्रेज़ इंस्टेंस बनाने की आवश्यकता होगी। Fl0 के साथ, इसमें 30 सेकंड से भी कम समय लगता है! ⏳ हमारा डेटाबेस पूरी तरह तैयार हो जाने के बाद, हमें आगे बढ़ना होगा और अपने बैकएंड को उसी प्रोजेक्ट में तैनात करना होगा। बैकएंड तैनात होने के बाद हमें अपनी डेटाबेस कनेक्शन स्ट्रिंग को आयात करने की आवश्यकता होगी जैसा कि ऊपर दिखाया गया है ☝️ 🙌 अब हमारा बैकएंड तैयार है और चल रहा है। यूआई के लिए समय ✨ चरण 6: फ्रंटएंड की स्थापना फ्रंटएंड स्थापित करने के लिए हम से शुरुआत करेंगे। ⚡️ टेम्पलेट-रिएक्शन-वाइट इसमें वह सब कुछ शामिल है जो हमें अपने प्रोजेक्ट को शुरू करने और चलाने के लिए चाहिए। React-Vite अब हम आगे बढ़ेंगे और कुछ पैकेज स्थापित करेंगे। npm install @heroicons/react axios react-router-dom npm install postcss tailwindcss autoprefixer --save-dev चरण 7: फ्रंटएंड की स्थापना अपने यूआई घटकों को शीघ्रता से बनाने के लिए हम से और की मदद लेंगे। टेलविंड यूआई मूल्य निर्धारण अनुभाग घटक साइन-इन और पंजीकरण घटक संक्षिप्तता के लिए, हम केवल फ्रंटएंड के महत्वपूर्ण कार्यों को देखेंगे। पूरा प्रोजेक्ट यहां पाया जा सकता है: https://github.com/dalefl0/stripe-fl0-frontend अब, हमें स्ट्राइप चेकआउट को संभालने के लिए एक फ़ंक्शन जोड़ने की आवश्यकता होगी src/components/PricingPlans.jsx ... const handleCheckout = (product) => { axios .post( `https://stripe-fl0-backend-dev.fl0.io/api/v1/stripe/create-checkout-session`, { email, product, } ) .then((res) => { if (res.data.url) { setTier(product.name); localStorage.setItem("tier", product.name); window.location.href = res.data.url; } }) .catch((err) => navigate("/cancel")); }; ... यह फ़ंक्शन हमारे बैकएंड के रूट को कॉल करता है, एक लिंक प्राप्त करता है, और उपयोगकर्ता को चेकआउट पेज पर रीडायरेक्ट करता है। 📄 /create-checkout-session इसके अलावा, हमें अपने और पेजों को संबंधित मार्गों से कनेक्ट करने और उपयोगकर्ता डेटा को में संग्रहीत करने की भी आवश्यकता है। signup login localstorage चरण 8: फ्रंटएंड को तैनात करना फ्रंटएंड के लिए हमें फिर से एक नया बनाने और उसी प्रोजेक्ट में उसी तरीके से तैनात करने की आवश्यकता होगी। रिपॉजिटरी फिर हमें फ्रंटएंड परिनियोजन में पर्यावरण चर जोड़ने की आवश्यकता होगी जिसे हमारे बैकएंड के URL पर सेट किया जाना चाहिए। VITE_APP_API_BASE_URL हमें फ्रंटएंड के होस्टेड यूआरएल के बैकएंड में पर्यावरण चर भी सेट करने की आवश्यकता होगी। CLIENT_URL एक बार पूरा हो जाने पर, हमारा FL0 प्रोजेक्ट इस तरह दिखेगा 👇 अब, आइए आगे बढ़ें और इस लाइव डेमो लिंक का उपयोग करके हमारे एप्लिकेशन को आज़माएं: https://stripe-fl0-frontend-q8oo-dev.fl0.io/ ऊपर लपेटकर अंत तक बने रहने के लिए धन्यवाद! इस ट्यूटोरियल में, हमने सीखा कि हमारे फुल-स्टैक एप्लिकेशन में आसानी से एकीकृत करके भुगतान पेज कैसे बनाया जाए। 🎉 Stripe Checkout हमने FL0 का उपयोग करके अपने प्रोजेक्ट का अत्यंत तीव्र गति से परिनियोजन भी किया। भुगतान क्षमताओं के साथ अपने स्वयं के एप्लिकेशन बनाना शुरू करने के लिए, fl0.com 🚀 पर जाएं
