स्ट्राइप और FL0 के साथ निर्बाध भुगतान इंटरफेस बनाना

टीएल;डीआर

इस ट्यूटोरियल में, हम यह पता लगाएंगे कि कैसे स्ट्राइप पेमेंट गेटवे को हमारे पूर्ण-स्टैक अनुप्रयोगों में सहजता से एकीकृत किया जाए, और उन्हें आसानी से FL0 पर होस्ट किया जाए। 🚀

परिचय

चाहे वह ई-कॉमर्स हो या SaaS एप्लिकेशन, पेमेंट गेटवे हमारी परियोजनाओं का एक केंद्रीय घटक हैं। 💳

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

स्ट्राइप का डेवलपर-अनुकूल एपीआई हमारे विकास के समय में कटौती करते हुए सुरक्षित और कुशल लेनदेन सुनिश्चित करता है।

उदाहरण के लिए, हमने SaaS एप्लिकेशन भुगतान पृष्ठ का मामला लिया है।

हम बैकएंड के लिए NodeJs और अपने डेटाबेस के रूप में Postgres का उपयोग करेंगे। फ्रंटएंड पर हम vite के साथ ReactJs उपयोग कर रहे हैं।

बाद में हम आगे बढ़ेंगे और आसानी से अपने प्रोजेक्ट को FL0 पर होस्ट करेंगे। ⬆️

तो, आइए एक चुटकी हास्य के साथ शुरुआत करें:

अवलोकन

🧑‍💻 इस ट्यूटोरियल में, हम एक सरल डेमो एप्लिकेशन बनाएंगे जहां उपयोगकर्ता साइन अप कर सकता है, अपनी योजना का चयन कर सकता है और अपने क्रेडिट कार्ड से चेकआउट कर सकता है।

इसके लिए हमें 2 अलग-अलग रिपॉजिटरी बनाने की आवश्यकता होगी, एक हमारे backend के लिए और दूसरा frontend के लिए।

फ़ोल्डर संरचना

🗂️ यहां बताया गया है कि हमारी दोनों फ़ोल्डर संरचनाएं कैसी दिखेंगी, केवल संदर्भ के लिए:

अब, चलिए शुरू करते हैं।

चरण 1: बैकएंड की स्थापना

दक्षता के लिए, इस ट्यूटोरियल में, हम " " टेम्पलेट का लाभ उठाएँगे।

फिर हम अपने प्रोजेक्ट के लिए महत्वपूर्ण नहीं होने वाली किसी भी फाइल या फ़ोल्डर को हटा देंगे। 🧑‍💻

ट्यूटोरियल की अधिक व्यापक समझ के लिए, आप ब्लॉग पोस्ट को देखना चाह सकते हैं।

हमारा टेम्प्लेट एक बुनियादी 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 पर तैनात करने के लिए हम पहले शुरू करेंगे।

संदर्भ के लिए यह हमारे भंडार का लिंक है:

अब हम तैनाती शुरू करने के लिए पर जाएंगे।

• यहां हमें एक नया प्रोजेक्ट बनाने की आवश्यकता होगी, उदाहरण के लिए इसे stripe-fl0 नाम दें।

• अब हमें एक नया पोस्टग्रेज़ इंस्टेंस बनाने की आवश्यकता होगी। Fl0 के साथ, इसमें 30 सेकंड से भी कम समय लगता है! ⏳

  
  

  

  
  

• हमारा डेटाबेस पूरी तरह तैयार हो जाने के बाद, हमें आगे बढ़ना होगा और अपने बैकएंड को उसी प्रोजेक्ट में तैनात करना होगा।

  
  

  

  
  

• बैकएंड तैनात होने के बाद हमें अपनी डेटाबेस कनेक्शन स्ट्रिंग को आयात करने की आवश्यकता होगी जैसा कि ऊपर दिखाया गया है ☝️

• 
  

🙌 अब हमारा बैकएंड तैयार है और चल रहा है। यूआई के लिए समय ✨

चरण 6: फ्रंटएंड की स्थापना

फ्रंटएंड स्थापित करने के लिए हम से शुरुआत करेंगे। ⚡️

इसमें वह सब कुछ शामिल है जो हमें अपने React-Vite प्रोजेक्ट को शुरू करने और चलाने के लिए चाहिए।

अब हम आगे बढ़ेंगे और कुछ पैकेज स्थापित करेंगे।

 npm install @heroicons/react axios react-router-dom npm install postcss tailwindcss autoprefixer --save-dev 

चरण 7: फ्रंटएंड की स्थापना

अपने यूआई घटकों को शीघ्रता से बनाने के लिए हम से और की मदद लेंगे।

संक्षिप्तता के लिए, हम केवल फ्रंटएंड के महत्वपूर्ण कार्यों को देखेंगे।

पूरा प्रोजेक्ट यहां पाया जा सकता है: अब, हमें स्ट्राइप चेकआउट को संभालने के लिए एक फ़ंक्शन जोड़ने की आवश्यकता होगी

src/components/PricingPlans.jsx

 ... const handleCheckout = (product) => { axios .post( `//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: फ्रंटएंड को तैनात करना

फ्रंटएंड के लिए हमें फिर से एक नया बनाने और उसी प्रोजेक्ट में उसी तरीके से तैनात करने की आवश्यकता होगी।

फिर हमें फ्रंटएंड परिनियोजन में VITE_APP_API_BASE_URL पर्यावरण चर जोड़ने की आवश्यकता होगी जिसे हमारे बैकएंड के URL पर सेट किया जाना चाहिए।

हमें फ्रंटएंड के होस्टेड यूआरएल के बैकएंड में CLIENT_URL पर्यावरण चर भी सेट करने की आवश्यकता होगी।

एक बार पूरा हो जाने पर, हमारा FL0 प्रोजेक्ट इस तरह दिखेगा 👇

अब, आइए आगे बढ़ें और इस लाइव डेमो लिंक का उपयोग करके हमारे एप्लिकेशन को आज़माएं:

ऊपर लपेटकर

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

इस ट्यूटोरियल में, हमने सीखा कि Stripe Checkout हमारे फुल-स्टैक एप्लिकेशन में आसानी से एकीकृत करके भुगतान पेज कैसे बनाया जाए। 🎉

हमने FL0 का उपयोग करके अपने प्रोजेक्ट का अत्यंत तीव्र गति से परिनियोजन भी किया।

भुगतान क्षमताओं के साथ अपने स्वयं के एप्लिकेशन बनाना शुरू करने के लिए, fl0.com 🚀 पर जाएं