Stripe 및 FL0을 사용하여 원활한 결제 인터페이스 만들기

TL;DR

이 튜토리얼에서는 Stripe 결제 게이트웨이를 풀 스택 애플리케이션에 원활하게 통합하고 FL0에서 쉽게 호스팅하는 방법을 살펴보겠습니다. 🚀

소개

전자 상거래이든 SaaS 애플리케이션이든 결제 게이트웨이는 우리 프로젝트의 핵심 구성 요소입니다. 💳

이 가이드에서는 특히 온라인 결제 처리를 위한 Stripe Checkout에 중점을 두고 이러한 통합을 단순화하는 방법을 살펴보겠습니다.

Stripe의 개발자 친화적인 API는 개발 시간을 단축하면서 안전하고 효율적인 거래를 보장합니다.

예를 들어 SaaS 애플리케이션 결제 페이지의 사례를 살펴보았습니다.

우리는 백엔드에 NodeJs 사용하고 데이터베이스로 Postgres를 사용할 것입니다. 프론트엔드에서는 vite 와 함께 ReactJs 사용하고 있습니다.

나중에 우리는 FL0에서 프로젝트를 쉽게 호스팅할 것입니다. ⬆️

그럼, 약간의 유머로 시작해 보겠습니다.

개요

🧑‍💻 이 튜토리얼에서는 사용자가 가입하고, 요금제를 선택하고, 신용카드로 결제할 수 있는 간단한 데모 애플리케이션을 만듭니다.

이를 위해 우리는 2개의 별도 저장소를 생성해야 합니다. 하나는 backend 용이고 다른 하나는 frontend 용입니다.

폴더 구조

🗂️ 참고용으로 두 폴더 구조는 다음과 같습니다.

이제 시작해 보겠습니다.

1단계: 백엔드 설정

효율성을 위해 이 튜토리얼에서는 " fl0zone/blog-express-pg-sequelize " 템플릿을 활용하겠습니다.

그런 다음 프로젝트에 중요하지 않은 파일이나 폴더를 제거합니다. 🧑‍💻

튜토리얼을 보다 포괄적으로 이해하려면 이 블로그 게시물을 참조하세요.

우리 템플릿은 기본 Node.js 애플리케이션과 Docker화된 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개의 경로는 다음과 같이 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 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초도 채 걸리지 않습니다! ⏳

  
  

  

  
  

• 데이터베이스를 모두 설정한 후에는 동일한 프로젝트에 백엔드를 배포해야 합니다.

  
  

  

  
  

• 백엔드가 배포된 후에는 위에 표시된 대로 데이터베이스 연결 문자열을 가져와야 합니다 ☝️

• 
  

🙌 이제 백엔드가 준비되어 실행 중입니다.

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 경로를 호출하고, 링크를 수신하고, 사용자를 체크아웃 페이지로 리디렉션합니다. 📄

이 외에도 signup 및 login 페이지를 각 경로에 연결하고 사용자 데이터를 localstorage 에 저장해야 합니다.

8단계: 프런트엔드 배포

프런트엔드의 경우 새 저장소를 다시 만들고 비슷한 방식으로 동일한 프로젝트에 배포해야 합니다.

그런 다음 백엔드의 URL로 설정되어야 하는 VITE_APP_API_BASE_URL 환경 변수를 프런트엔드 배포에 추가해야 합니다.

또한 백엔드의 CLIENT_URL 환경 변수를 프런트엔드의 호스팅 URL로 설정해야 합니다.

완료되면 FL0 프로젝트는 다음과 같습니다 👇

이제 라이브 데모 링크( https://stripe-fl0-frontend-q8oo-dev.fl0.io/ )를 사용하여 애플리케이션을 사용해 보겠습니다.

마무리

끝까지 함께해주셔서 감사합니다!

이 튜토리얼에서는 Stripe Checkout 풀 스택 애플리케이션에 쉽게 통합하여 결제 페이지를 구축하는 방법을 배웠습니다. 🎉

우리는 또한 FL0을 사용하여 프로젝트를 엄청나게 빠르게 배포했습니다.

결제 기능을 갖춘 자신만의 애플리케이션 구축을 시작하려면 fl0.com으로 이동하세요 🚀