使用 Stripe 和 FL0 创建无缝支付接口

长话短说

在本方法中，人们将科学探索该怎么能 Stripe 微信支付网关无缝对接集成化到人们的全栈运用小程序中，并愉快地将二者拖管在 FL0 上。 🚀

介绍

而是是光电商务接待是不是 SaaS 采用步骤，支出网关全部都是各位項目的主要构成要素。 💳

在本导则中，我们大家将浅谈怎么样细化某些集成化，特意关注新闻应用于百度在线Stripe Checkout。

Stripe 的规划设计建设工人十分友好的 API 可确认防护效率高的购买，还减掉我国的规划设计建设的时间。

如，公司以 SaaS 用软件程序支付卡窗口为例子。

我们将使用NodeJs作为后端，并使用 Postgres 作为数据库。在前端，我们使用ReactJs和vite 。

就这样咱们会一点也不费劲地在 FL0 上代管咱们的楼盘。 ⬆️

所以，给大家从一點幽默搞笑已经交往吧：

概述

🧑‍💻 在本教程下载中，让我们将组建一两个轻松的讲解用程序流程图，玩家都可以在在这其中注测、选定 预计并操作征信卡付款。

为此，我们需要创建 2 个独立的存储库，一个用于backend ，另一个用于frontend 。

文件夹结构

🗂️ 这小编的一个文件下载夹设计的面目，仅限于学习：

现时，我不想们现在交往吧。

第 1 步：设置后端

以便改善速度，在本教学视频中，各位将采用“ ”模具。

但是公司将误删对公司的品牌不关键性的所有的材料或材料夹。 🧑‍💻

只为更率先地知晓本技巧，您或者需用参考资料搏客经典文章。

我们的模板封装了一个基本的Node.js应用程序和一个 dockerized 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 

当今，我们都的须要修改 Stripe API 秘钥🔑。似乎，我们都的须要在 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条自驾线路被拆分俩个文档文件，以下几点：

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 Checkout集成到我们的应用程序中。

我们将使用Stripe API来管理付款并处理用户订阅。

以下的编码搭建其中一个新的 Stripe 付款对话。 💳

人们将向其展示 支付款项办法结构类型、的产品资料和用量。

我们都还所需同一玩家在出色支付或退出消费时将被重定向培养的 URL。

还有就是，比如所有的 正常的，售后服务器主机将使用的 Stripe 应用程序的 URL 通过响应的。 ✅

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 手机存储库。

她是企业储备库的超链接以供决定性： ://github.com/dalefl0/stripe-fl0-backend

当今人们将造访开始了布署。

• 这里我们需要创建一个新项目，例如将其命名为stripe-fl0 。

• 现阶段我门是要建立有一个新的 Postgres 典例。对待 Fl0，这是要看不到 30 秒！ ⏳

  
  

  

  
  

• 设有完大db2数据库后，自己需求立即在这个个产品东部署前后端分离。

  
  

  

  
  

• 部暑后端开发后，自己要导入到资料库链接字串串，如上如下☝️

• 
  

🙌 到现在我们的的前后端分离已开启并尚未程序运行。 UI 日期已到✨

第 6 步：设置前端

为了能让快速设置网页前端，人们将从就开始。 ⚡️

这包括我们启动和运行React-Vite项目所需的一切。

现再企业将立刻按装许多游戏包。

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

第 7 步：设置前端

方便更快构筑让人们的 UI 元件，让人们将使用的、。

因为简洁设计无误，企业只看前边的非常重要作用。

完善的内容也可以在左右的位置找见： ://github.com/dalefl0/stripe-fl0-frontend今天，人们要有添加图片一家涵数来正确处理条带结帐

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环境变量设置为前端的托管 URL。

完工后，我的 FL0 业务将有以下如下图所示 👇

当下，我要们以后实用此实时路况演示讲解连接来尝试令他们的APP程序流程：

包起来

道谢您持之以恒到后！

在本教程中，我们学习了如何通过将Stripe Checkout轻松集成到我们的全栈应用程序中来构建支付页面。 🎉

公司还实用 FL0 高速堡垒机被部署了公司的工程。

要进行营造您她的具有着结算职能的技术应用系统，请访问共享 fl0.com 🚀