Payment gateway integration

[projectminasai-ux]

How to integrate payment gateway using reflex

[EbrahimSolomon]

Use Reflex’s FastAPI backend to create checkout sessions + handle webhooks. The simplest path is Stripe Checkout (hosted redirect). Here’s a minimal working sketch.

1. Server (Stripe + API routes + webhooks)

# server.py (or wherever you init your Reflex app)
import os
import reflex as rx
from fastapi import FastAPI, Request, HTTPException
import stripe

stripe.api_key = os.environ["STRIPE_SECRET_KEY"]

api = FastAPI()

@api.post("/api/create-checkout-session")
async def create_checkout_session(payload: dict):
    # payload: {"price_id": "...", "success_url": "...", "cancel_url": "..."}
    try:
        session = stripe.checkout.Session.create(
            mode="payment",
            line_items=[{"price": payload["price_id"], "quantity": 1}],
            success_url=payload["success_url"],
            cancel_url=payload["cancel_url"],
        )
        return {"url": session.url}
    except Exception as e:
        raise HTTPException(status_code=400, detail=str(e))

@api.post("/api/stripe/webhook")
async def stripe_webhook(request: Request):
    secret = os.environ["STRIPE_WEBHOOK_SECRET"]
    sig = request.headers.get("stripe-signature")
    body = await request.body()
    event = stripe.Webhook.construct_event(body, sig, secret)
    if event["type"] == "checkout.session.completed":
        # mark order paid, fulfill, etc.
        pass
    return {"ok": True}

# Mount your FastAPI routes into Reflex:
app = rx.App(api_transformer=api)

Reflex exposes a FastAPI backend and lets you mount your own endpoints via api_transformer, which is perfect for payments and webhooks.

2. Frontend (start checkout from a State event):

# state.py
import os
import reflex as rx
import stripe

stripe.api_key = os.environ["STRIPE_SECRET_KEY"]

class CheckoutState(rx.State):
    price_id: str = "price_123"

    async def buy(self):
        # EASIEST: create session server-side and redirect
        session = stripe.checkout.Session.create(
            mode="payment",
            line_items=[{"price": self.price_id, "quantity": 1}],
            success_url="https://your.app/success",
            cancel_url="https://your.app/cancel",
        )
        # Reflex redirect to Stripe-hosted page
        return rx.redirect(session.url)  # opens in same tab by default

3. Button:

page component

rx.button("Buy", on_click=CheckoutState.buy)

Notes:

• For Embedded Checkout / Payment Element, expose an endpoint that creates a PaymentIntent and returns the client_secret, then load Stripe.js via rx.script(...) and initialize the element on the page. A working example repo: reflex-embedded-checkout.
• The general pattern works for any gateway that offers REST + webhooks (e.g., PayPal/Paystack/Flutterwave/PayFast/Yoco): create server-side intent/session → confirm on client (if needed) → receive webhook to finalize order.
• Docs: Reflex API routes / api_transformer (FastAPI mounting) and how Reflex runs (Next.js + FastAPI).