TL;DR Bu eğitimde, Stripe ödeme ağ geçidini tam yığın uygulamalarımıza nasıl sorunsuz bir şekilde entegre edeceğimizi ve bunları FL0'da zahmetsizce nasıl barındıracağımızı keşfedeceğiz. 🚀 giriiş İster e-ticaret ister SaaS uygulaması olsun, ödeme ağ geçitleri projelerimizin merkezi bir bileşenidir. 💳 Bu kılavuzda, özellikle çevrimiçi için Stripe Checkout'a odaklanarak bu entegrasyonların nasıl basitleştirileceğini keşfedeceğiz. ödeme işlemleri Stripe'ın geliştirici dostu API'si, geliştirme süremizi kısaltırken güvenli ve verimli işlemler sağlar. Örnek olarak, SaaS uygulamalarının ödeme sayfasını ele aldık. Arka uç için ve veritabanımız olarak Postgres'i kullanacağız. Ön uçta ile kullanıyoruz. NodeJs ReactJs vite Daha sonra devam edip projemizi FL0'da zahmetsizce barındıracaktık. ⬆️ O halde bir tutam mizahla başlayalım: Genel Bakış 🧑💻 Bu eğitimde kullanıcının kaydolabileceği, planını seçebileceği ve kredi kartıyla ödeme yapabileceği basit bir demo uygulaması oluşturacağız. Bunun için biri , diğeri için olmak üzere 2 ayrı depo oluşturmamız gerekecek. backend frontend Klasör Yapısı 🗂️ Referans olması açısından her iki klasör yapımız da şu şekilde görünecektir: Şimdi başlayalım. 1. Adım: Arka Uç Kurulumu Verimlilik adına bu eğitimde " " şablonundan yararlanacağız. fl0zone/blog-express-pg-sequelize Daha sonra projemiz için önemli olmayan tüm dosya veya klasörleri kaldırırdık. 🧑💻 Öğreticinin daha kapsamlı anlaşılması için blog gönderisine başvurmak isteyebilirsiniz. bu Şablonumuz temel bir uygulamasını ve yerleşik bir veritabanını kapsar. Node.js PostgreSQL İşte kurulumumuza karşılık gelen dosyası 🐳: 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: Şimdi devam edip bazı temel paketleri kuracağız 📦 npm install bcrypt cookie-parser cors jsonwebtoken pg-hstore stripe Şimdi Stripe API anahtarlarımızı 🔑 almamız gerekiyor. Bunun için Stripe'ta yeni bir hesap oluşturmamız gerekecek. Burada demo için kullanıyor olacağız. Test Mode İşte bu proje için ihtiyaç duyacağımız ortam değişkenlerinin listesi. .env.example STRIPE_PUBLISHABLE_KEY= STRIPE_SECRET_KEY= POSTGRES_DB_URI= secretKey= CLIENT_URL= Adım 2: Veritabanı Modelleri Oluşturma Şimdi veritabanımızı kurarak başlayalım. 🐘 Sequelize ORM'yi kullandığımız için kullanıcı verilerimiz için bir model oluşturmamız gerekecek. İşte modelimizin kodu 👇 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. Adım: Rotaları Ayarlama Şimdi devam edelim ve rotalarımızı oluşturalım - Kullanıcının oturum açmasına ve oturumu kaydetmesine yardımcı olur POST /login - Yeni bir hesap oluşturmaya yardımcı olur POST /signup - Şerit ödeme sayfası bağlantısını oluşturur ve döndürür POST /create-checkout-session Bu 3 rota aşağıdaki gibi 2 dosyaya ayrılmıştır: 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. Adım: Kullanıcı Profilini Ayarlama 🧑💻 Kullanıcı profilini ayarlamak için öncelikle kayıt sırasında yeni bir kullanıcının e-posta adresinin veritabanında mevcut olup olmadığını kontrol edecek bir ara katman yazılımı tanımlayacağız. 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, }; Daha sonra devam edip giriş ve kayıt fonksiyonlarımızı tanımlayacağız 👇 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, }; Adım 4: Stripe Checkout'u Ayarlama uygulamamıza entegre edeceğimiz yer burasıdır. Stripe Checkout Ödemeleri yönetmek ve kullanıcı aboneliklerini yönetmek için kullanacağız. Stripe API Aşağıdaki kod yeni bir Stripe ödeme oturumu oluşturur. 💳 Ödeme yöntemi türünü, ürün verilerini ve miktarını sağlayacağız. Ayrıca, başarılı bir ödeme durumunda veya işlemin iptal edilmesi durumunda kullanıcının yönlendirileceği URL'leri de belirtmemiz gerekir. Ve eğer her şey yolundaysa sunucu Stripe Oturumunun URL'siyle yanıt verecektir. ✅ 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, }; Son olarak tüm rotalarımızı giriş noktamız olan eklememiz gerekecek. 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) {} }); Ve arka uçla işimiz bitti ✅ Şimdi devam edelim ve bunu üzerinde konuşlandırmayı deneyelim. 🔼 FL0 Adım 5: FL0 ile dağıtım 🚀 Projemizi FL0'a dağıtmak için öncelikle başlayacağız. repo'muzu yeni bir GitHub deposuna iterek Referans için depomuzun bağlantısı budur: https://github.com/dalefl0/stripe-fl0-backend Şimdi dağıtıma başlamak için gideceğiz. app.fl0.dev'e Burada yeni bir proje oluşturmamız gerekecek, örneğin adını verelim. stripe-fl0 Şimdi yeni bir Postgres örneği oluşturmamız gerekecek. Fl0 ile bu işlem 30 saniyeden kısa sürer! ⏳ Veritabanımızın tamamını kurduktan sonra, devam edip arka ucumuzu aynı projede konuşlandırmamız gerekecek. Arka uç konuşlandırıldıktan sonra veritabanı bağlantı dizemizi yukarıda gösterildiği gibi içe aktarmamız gerekir ☝️ 🙌 Artık arka ucumuz çalışır durumda. Kullanıcı arayüzü zamanı ✨ Adım 6: Ön Uç Kurulumu Ön ucu ayarlamak için ile başlayacağız. ⚡️ şablon-react-vite Bu, projemizi çalışır duruma getirmek için ihtiyacımız olan her şeyi içerir. React-Vite Şimdi devam edip birkaç paket kuracağız. npm install @heroicons/react axios react-router-dom npm install postcss tailwindcss autoprefixer --save-dev Adım 7: Ön Ucu Ayarlama Kullanıcı arayüzü bileşenlerimizi hızlı bir şekilde oluşturmak için, ve yardım alırız. arka rüzgar kullanıcı arayüzündeki Fiyatlandırma Bölümü Bileşeni Oturum Açma ve Kayıt Bileşeninden Kısalık olması açısından sadece ön yüzün önemli işlevlerine bakacağız. Projenin tamamı şu adreste bulunabilir: https://github.com/dalefl0/stripe-fl0-frontend Şimdi şerit kontrollerini yönetecek bir fonksiyon eklememiz gerekecek 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")); }; ... Bu işlev arka uçumuzun rotasını çağırır, bir bağlantı alır ve kullanıcıyı ödeme sayfasına yönlendirir. 📄 /create-checkout-session Bunun dışında ve sayfalarımızı da ilgili rotalara bağlamamız ve kullanıcı verilerini saklamamız gerekiyor. signup login localstorage Adım 8: Ön Ucu Dağıtma Ön uç için tekrar yeni bir oluşturmamız ve onu aynı projede benzer şekilde dağıtmamız gerekecek. depo Daha sonra, arka ucumuzun URL'sine ayarlanması gereken ön uç dağıtımına ortam değişkenini eklememiz gerekir. VITE_APP_API_BASE_URL Ayrıca arka uçtaki ortam değişkenini ön ucun barındırılan URL'sine ayarlamamız gerekir. CLIENT_URL Tamamlandığında FL0 projemiz şöyle görünecek 👇 Şimdi devam edelim ve bu canlı demo bağlantısını kullanarak uygulamamızı deneyelim: https://stripe-fl0-frontend-q8oo-dev.fl0.io/ Kapanıyor Sonuna kadar sadık kaldığınız için teşekkürler! Bu eğitimde tam kapsamlı uygulamalarımıza kolayca entegre ederek ödeme sayfalarının nasıl oluşturulacağını öğrendik. 🎉 Stripe Checkout Ayrıca projemizin dağıtımlarını FL0 kullanarak inanılmaz hızlı bir şekilde gerçekleştirdik. Ödeme özelliklerine sahip kendi uygulamalarınızı oluşturmaya başlamak için fl0.com'a gidin 🚀
