TL;DR このチュートリアルでは、Stripe ペイメント ゲートウェイをフルスタック アプリケーションにシームレスに統合し、それらを FL0 で簡単にホストする方法を検討します。 🚀 序章 電子商取引でも SaaS アプリケーションでも、支払いゲートウェイは私たちのプロジェクトの中心的なコンポーネントです。 💳 このガイドでは、特にオンライン のための Stripe Checkout に焦点を当てて、これらの統合を簡素化する方法を検討します。 支払い処理 Stripe の開発者向け API は、開発時間を短縮しながら、安全かつ効率的なトランザクションを保証します。 一例として、SaaS アプリケーションの支払いページを例に挙げました。 バックエンドとして を使用し、データベースとして Postgres を使用します。フロントエンドでは で を使用しています。 NodeJs vite ReactJs その後、FL0 でプロジェクトを簡単にホストできるようになりました。 ⬆️ それでは、ちょっとしたユーモアから始めましょう。 概要 🧑💻 このチュートリアルでは、ユーザーがサインアップし、プランを選択し、クレジット カードでチェックアウトできる簡単なデモ アプリケーションを作成します。 このためには、2 つの別個のリポジトリを作成する必要があります。1 つは 用、もう 1 つは 用です。 backend frontend フォルダー構造 🗂️ 参考までに、両方のフォルダー構造は次のようになります。 さあ、始めましょう。 ステップ 1: バックエンドのセットアップ 効率を高めるため、このチュートリアルでは「 」テンプレートを利用します。 fl0zone/blog-express-pg-sequelize 次に、プロジェクトにとって重要ではないファイルやフォルダーを削除します。 🧑💻 チュートリアルをより包括的に理解するには、 ブログ投稿を参照してください。 この 私たちのテンプレートは、基本的な アプリケーションと Docker 化された データベースをカプセル化します。 Node.js 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 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 リポジトリにプッシュすること これは参照用のリポジトリへのリンクです: ストライプ-fl0-backend https://github.com/dalefl0/ ここで、 に進み、デプロイを開始します。 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 バックエンドの 環境変数をフロントエンドのホスト URL に設定する必要もあります。 CLIENT_URL 完了すると、FL0 プロジェクトは次のようになります 👇 それでは、ライブ デモ リンク https: を使用してアプリケーションを試してみましょう。 //ストライプ-fl0-frontend-q8oo-dev.fl0.io/ まとめ 最後までお付き合いいただきありがとうございました！ このチュートリアルでは、 フルスタック アプリケーションに簡単に統合して支払いページを構築する方法を学びました。 🎉 Stripe Checkout また、FL0 を使用してプロジェクトのデプロイメントを非常に高速に実行しました。 支払い機能を備えた独自のアプリケーションの構築を開始するには、fl0.com にアクセスしてください 🚀
