TL; DR Trong hướng dẫn này, chúng ta sẽ khám phá cách tích hợp liền mạch cổng thanh toán Stripe vào các ứng dụng toàn ngăn xếp của mình và dễ dàng lưu trữ chúng trên FL0. 🚀 Giới thiệu Cho dù đó là ứng dụng thương mại điện tử hay SaaS, cổng thanh toán là thành phần trung tâm trong các dự án của chúng tôi. 💳 Trong hướng dẫn này, chúng tôi sẽ khám phá cách đơn giản hóa các tích hợp này, đặc biệt tập trung vào Stripe Checkout để trực tuyến . xử lý thanh toán API thân thiện với nhà phát triển của Stripe đảm bảo các giao dịch an toàn và hiệu quả đồng thời cắt giảm thời gian phát triển của chúng tôi. Ví dụ: chúng tôi đã lấy trường hợp trang thanh toán ứng dụng SaaS. Chúng tôi sẽ sử dụng cho phần phụ trợ và Postgres làm cơ sở dữ liệu của chúng tôi. Trên giao diện người dùng, chúng tôi đang sử dụng với . NodeJs ReactJs vite Sau đó, chúng tôi sẽ tiếp tục và dễ dàng tổ chức dự án của mình trên FL0. ⬆️ Vì vậy, hãy bắt đầu với một chút hài hước: Tổng quan 🧑💻 Trong hướng dẫn này, chúng ta sẽ tạo một ứng dụng demo đơn giản để người dùng có thể đăng ký, chọn gói và thanh toán bằng thẻ tín dụng của họ. Đối với điều này, chúng tôi sẽ cần tạo 2 kho lưu trữ riêng biệt, một kho lưu trữ cho của chúng tôi và một kho lưu trữ khác cho . backend frontend Cấu trúc thư mục 🗂️ Đây là cách cả hai cấu trúc thư mục của chúng ta trông như thế nào, chỉ để tham khảo: Bây giờ, hãy bắt đâù. Bước 1: Thiết lập phụ trợ Vì mục đích hiệu quả, trong hướng dẫn này, chúng tôi sẽ tận dụng mẫu " ". fl0zone/blog-express-pg-sequelize Sau đó, chúng tôi sẽ xóa mọi tệp hoặc thư mục không quan trọng đối với dự án của chúng tôi. 🧑💻 Để hiểu toàn diện hơn về hướng dẫn, bạn có thể muốn tham khảo bài đăng trên blog . này Mẫu của chúng tôi đóng gói một ứng dụng cơ bản và cơ sở dữ liệu dockerized. Node.js PostgreSQL Đây là tệp tương ứng cho thiết lập của chúng ta 🐳: 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: Bây giờ chúng ta sẽ tiếp tục và cài đặt một số gói cần thiết 📦 npm install bcrypt cookie-parser cors jsonwebtoken pg-hstore stripe Bây giờ, chúng tôi sẽ cần lấy các khóa API Stripe của mình 🔑. Đối với điều này, chúng tôi sẽ cần tạo một tài khoản mới trên Stripe. Ở đây chúng tôi sẽ sử dụng cho bản demo. Test Mode Dưới đây là danh sách các biến môi trường chúng ta sẽ cần cho dự án này. .env.example STRIPE_PUBLISHABLE_KEY= STRIPE_SECRET_KEY= POSTGRES_DB_URI= secretKey= CLIENT_URL= Bước 2: Tạo mô hình cơ sở dữ liệu Hãy bắt đầu bằng cách thiết lập cơ sở dữ liệu của chúng tôi ngay bây giờ. 🐘 Vì chúng tôi đang sử dụng ORM Sequelize, nên chúng tôi sẽ cần tạo một mô hình cho dữ liệu người dùng của mình. Đây là mã cho mô hình của chúng tôi 👇 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; }; Bước 2: Thiết lập các tuyến đường Bây giờ, hãy tiếp tục và tạo các tuyến đường của chúng tôi - Giúp đăng nhập người dùng và lưu trữ phiên POST /login - Giúp tạo tài khoản mới POST /signup - Tạo và trả về liên kết trang thanh toán sọc POST /create-checkout-session 3 route này được tách thành 2 file như sau: 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; Bước 3: Thiết lập hồ sơ người dùng 🧑💻 Để thiết lập hồ sơ người dùng, trước tiên, chúng tôi sẽ xác định một phần mềm trung gian để kiểm tra xem địa chỉ email của người dùng mới đã tồn tại trong cơ sở dữ liệu trong quá trình đăng ký hay chưa. 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, }; Sau đó, chúng tôi sẽ tiếp tục và xác định các chức năng đăng nhập và đăng ký của mình 👇 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, }; Bước 4: Thiết lập Stripe Checkout Đây là nơi chúng tôi sẽ tích hợp vào ứng dụng của mình. Stripe Checkout Chúng tôi sẽ sử dụng để quản lý các khoản thanh toán và xử lý đăng ký của người dùng. Stripe API Đoạn mã sau tạo phiên thanh toán Stripe mới. 💳 Chúng tôi sẽ cung cấp cho nó loại phương thức thanh toán, dữ liệu sản phẩm và số lượng. Chúng tôi cũng cần chỉ định các URL nơi người dùng sẽ được chuyển hướng khi thanh toán thành công hoặc nếu họ hủy giao dịch. Và, máy chủ sẽ phản hồi lại bằng URL cho Phiên Stripe nếu mọi thứ đều ổn. ✅ 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, }; Cuối cùng, chúng tôi sẽ cần thêm tất cả các tuyến đường vào điểm vào của chúng tôi, đó là 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) {} }); Và chúng ta đã hoàn thành phần phụ trợ ✅ Bây giờ hãy tiếp tục và thử triển khai nó trên . 🔼 FL0 Bước 5: Triển khai với FL0 🚀 Để triển khai dự án của chúng tôi lên FL0, trước tiên, chúng tôi sẽ bắt đầu bằng sang kho lưu trữ GitHub mới. việc đẩy kho lưu trữ của mình Đây là liên kết đến kho lưu trữ của chúng tôi để tham khảo: https://github.com/dalefl0/stripe-fl0-backend Bây giờ chúng ta sẽ truy cập để bắt đầu triển khai. app.fl0.dev Ở đây chúng ta cần tạo một dự án mới, đặt tên là chẳng hạn. stripe-fl0 Bây giờ chúng ta sẽ cần tạo một phiên bản Postgres mới. Với Fl0, việc này chỉ mất chưa đầy 30 giây! ⏳ Sau khi chúng tôi đã thiết lập xong cơ sở dữ liệu, chúng tôi sẽ cần tiếp tục và triển khai chương trình phụ trợ của mình trong cùng một dự án. Sau khi phần phụ trợ được triển khai, chúng tôi sẽ cần nhập chuỗi kết nối cơ sở dữ liệu của mình như hình trên ☝️ 🙌 Bây giờ chúng tôi đã thiết lập và chạy phần phụ trợ của mình. Thời gian cho giao diện người dùng ✨ Bước 6: Thiết lập giao diện người dùng Để thiết lập giao diện người dùng, chúng ta sẽ bắt đầu với . ⚡️ template-react-vite Điều này bao gồm mọi thứ chúng tôi cần để khởi động và chạy dự án của mình. React-Vite Bây giờ chúng ta sẽ tiếp tục và cài đặt một vài gói. npm install @heroicons/react axios react-router-dom npm install postcss tailwindcss autoprefixer --save-dev Bước 7: Thiết lập giao diện người dùng Để xây dựng các thành phần giao diện người dùng của chúng tôi một cách nhanh chóng, chúng tôi sẽ nhờ sự trợ giúp của và từ . Thành phần phần định giá Thành phần đăng nhập và đăng ký giao diện người dùng tailwind Để cho ngắn gọn, chúng ta sẽ chỉ xem xét các chức năng quan trọng của giao diện người dùng. Dự án hoàn chỉnh có thể được tìm thấy tại: https://github.com/dalefl0/stripe-fl0-frontend Bây giờ, chúng ta sẽ cần thêm một chức năng để xử lý kiểm tra sọc 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")); }; ... Hàm này gọi tuyến của phần phụ trợ của chúng tôi, nhận một liên kết và chuyển hướng người dùng đến trang thanh toán. 📄 /create-checkout-session Ngoài ra, chúng tôi cũng cần kết nối các trang và của mình với các tuyến tương ứng và lưu trữ dữ liệu người dùng trong . signup login localstorage Bước 8: Triển khai Frontend Đối với giao diện người dùng, chúng tôi sẽ cần tạo lại một mới và triển khai nó trong cùng một dự án theo cách tương tự. kho lưu trữ Sau đó, chúng tôi sẽ cần thêm biến môi trường vào triển khai giao diện người dùng. Biến này sẽ được đặt thành URL của chương trình phụ trợ của chúng tôi. VITE_APP_API_BASE_URL Chúng tôi cũng cần đặt biến môi trường trong phần phụ trợ thành URL được lưu trữ của giao diện người dùng. CLIENT_URL Sau khi hoàn thành, project FL0 của chúng ta sẽ như thế này 👇 Bây giờ, hãy tiếp tục và dùng thử ứng dụng của chúng tôi bằng liên kết demo trực tiếp này: https://stripe-fl0-frontend-q8oo-dev.fl0.io/ kết thúc Cảm ơn vì đã gắn bó cho đến cuối cùng! Trong hướng dẫn này, chúng ta đã học cách xây dựng các trang thanh toán bằng cách dễ dàng tích hợp vào các ứng dụng toàn ngăn của mình. 🎉 Stripe Checkout Chúng tôi cũng đã triển khai dự án của mình cực nhanh bằng FL0. Để bắt đầu xây dựng ứng dụng của riêng bạn với khả năng thanh toán, hãy truy cập fl0.com 🚀
