paint-brush
使用 Stripe 和 FL0 创建无缝支付接口经过@dalefl0
731 讀數
731 讀數

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

经过 Dale Brett
Dale Brett HackerNoon profile picture

Dale Brett

@dalefl0

Building a platform to 10x engineering teams

12 分钟 read2023/07/31
Read on Terminal Reader
Read this story in a terminal
Print this story

太長; 讀書

在本教程中,我们将探索如何将 Stripe 支付网关无缝集成到我们的全栈应用程序中,并轻松地将它们托管在 FL0 上。 🚀
featured image - 使用 Stripe 和 FL0 创建无缝支付接口
Dale Brett HackerNoon profile picture
Dale Brett

Dale Brett

@dalefl0

Building a platform to 10x engineering teams

0-item
1-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Vested Interest

Vested Interest

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

长话短说

在本教程中,我们将探索如何将 Stripe 支付网关无缝集成到我们的全栈应用程序中,并轻松地将它们托管在 FL0 上。 🚀

介绍

无论是电子商务还是 SaaS 应用程序,支付网关都是我们项目的核心组成部分。 💳


在本指南中,我们将探讨如何简化这些集成,特别关注用于在线支付处理的Stripe Checkout。


Stripe 的开发人员友好的 API 可确保安全高效的交易,同时减少我们的开发时间。


例如,我们以 SaaS 应用程序支付页面为例。

我们将使用NodeJs作为后端,并使用 Postgres 作为数据库。在前端,我们使用ReactJsvite


后来我们会毫不费力地在 FL0 上托管我们的项目。 ⬆️


那么,让我们从一点幽默开始吧:

漫画 - 网上购物

漫画 - 网上购物

概述

🧑‍💻 在本教程中,我们将创建一个简单的演示应用程序,用户可以在其中注册、选择计划并使用信用卡结账。


用户旅程图

用户旅程图


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

高级概述

高级概述

文件夹结构

🗂️ 这是我们的两个文件夹结构的样子,仅供参考:

文件夹结构

文件夹结构

现在,让我们开始吧。

第 1 步:设置后端

为了提高效率,在本教程中,我们将利用“ fl0zone/blog-express-pg-sequelize ”模板。


然后我们将删除对我们的项目不重要的任何文件或文件夹。 🧑‍💻


为了更全面地了解本教程,您可能需要参考这篇博客文章。


我们的模板封装了一个基本的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进行演示。


https://cdn.hackernoon.com/images/KXkBVlE3hlee3glbm70CWnLV3s32-2023-07-31T16:00:01.958Z-h2z905rjviw7ovmsinqqxj3v

https://cdn.hackernoon.com/images/KXkBVlE3hlee3glbm70CWnLV3s32-2023-07-31T16:00:01.958Z-h2z905rjviw7ovmsinqqxj3v

以下是该项目所需的环境变量列表。

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


这是我们存储库的链接以供参考: https ://github.com/dalefl0/stripe-fl0-backend


现在我们将前往app.fl0.dev开始部署。

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

  • 现在我们需要创建一个新的 Postgres 实例。对于 Fl0,这需要不到 30 秒! ⏳


    创建 postgres 实例

    创建 postgres 实例


  • 设置完数据库后,我们需要继续在同一个项目中部署后端。


    部署后端

    部署后端


  • 部署后端后,我们需要导入数据库连接字符串,如上所示☝️


🙌 现在我们的后端已启动并正在运行。

UI 时间到了✨

第 6 步:设置前端

为了设置前端,我们将从template-react-vite开始。 ⚡️


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


现在我们将继续安装一些软件包。


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

安装软件包

安装软件包

第 7 步:设置前端

为了快速构建我们的 UI 组件,我们将借助tailwind UI定价部分组件以及登录和注册组件


为了简洁起见,我们只看前端的重要功能。


完整的项目可以在以下位置找到: https ://github.com/dalefl0/stripe-fl0-frontend

现在,我们需要添加一个函数来处理条带结帐


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")); }; ...


该函数调用后端的/create-checkout-session路由,接收链接,并将用户重定向到结账页面。 📄


除此之外,我们还需要将signuplogin页面连接到相应的路由,并将用户数据存储在localstorage中。

第 8 步:部署前端

对于前端,我们需要再次创建一个新的存储库,并以类似的方式将其部署在同一个项目中。


然后,我们需要将VITE_APP_API_BASE_URL环境变量添加到前端部署,该变量应设置为后端的 URL。


我们还需要将后端的CLIENT_URL环境变量设置为前端的托管 URL。


完成后,我们的 FL0 项目将如下所示 👇


FL0 项目仪表板

FL0 项目仪表板


现在,让我们继续使用此实时演示链接尝试我们的应用程序: https://stripe-fl0-frontend-q8oo-dev.fl0.io/


现场演示

现场演示

包起来

感谢您坚持到最后!


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


我们还使用 FL0 快速部署了我们的项目。


要开始构建您自己的具有支付功能的应用程序,请访问 fl0.com 🚀

使用 stripe 构建您自己的应用程序

使用 stripe 构建您自己的应用程序

L O A D I N G
. . . comments & more!

About Author

Dale Brett HackerNoon profile picture
Dale Brett@dalefl0
Building a platform to 10x engineering teams

標籤

这篇文章刊登在...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X REMOVE AD