Tạo giao diện thanh toán liền mạch với Stripe và FL0

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 để xử lý thanh toán trực tuyế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 NodeJs 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 ReactJs với 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 backend của chúng tôi và một kho lưu trữ khác cho 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 Node.js cơ bản và cơ sở dữ liệu PostgreSQL dockerized.

Đây là tệp docker-compose.yaml tương ứng cho thiết lập của chúng ta 🐳:

 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 Test Mode cho bản demo.

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

POST /login - Giúp đăng nhập người dùng và lưu trữ phiên

POST /signup - Giúp tạo tài khoản mới

POST /create-checkout-session - Tạo và trả về liên kết trang thanh toán sọc

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 Stripe Checkout vào ứng dụng của mình.

Chúng tôi sẽ sử dụng Stripe API để quản lý các khoản thanh toán và xử lý đăng ký của người dùng.

Đ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 việc đẩy kho lưu trữ của mình sang kho lưu trữ GitHub mới.

Đâ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 app.fl0.dev để bắt đầu triển khai.

• Ở đây chúng ta cần tạo một dự án mới, đặt tên là stripe-fl0 chẳng hạn.

• 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 React-Vite của mình.

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 Thành phần phần định giá và Thành phần đăng nhập và đăng ký từ 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 /create-checkout-session 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. 📄

Ngoài ra, chúng tôi cũng cần kết nối các trang signup và login 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 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 kho lưu trữ mới và triển khai nó trong cùng một dự án theo cách tương tự.

Sau đó, chúng tôi sẽ cần thêm biến môi trường VITE_APP_API_BASE_URL 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.

Chúng tôi cũng cần đặt biến môi trường CLIENT_URL trong phần phụ trợ thành URL được lưu trữ của giao diện người dùng.

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 Stripe Checkout vào các ứng dụng toàn ngăn của mình. 🎉

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 🚀