Show HN: 오픈소스, 웹훅 없는 결제 프로세서를 구축했습니다

인터넷에서 돈을 벌기 가장 쉬운 방법.

Get Started

· Quickstart
· Website
· Events
· Issues
· Examples

무한한 가격 모델, 하나의 진실원 (source of truth), 웹훅 제로.

Default Stateless웹훅, "subscriptions" db 테이블, "customer_id" 컬럼, "PRICE_ID" 환경 변수, 또는 플랜을 가격과 기능으로 매핑하고 다시 매핑하는 것을 잊어라.**Single Source of Truth:Flowglad 에서 최신 고객 청구 상태를 읽으세요. 기능 접근권한 및 사용량 미터 크레딧 포함Access Data Using Your Ids:**본인의 인증 사용자 ID 로 고객 상태를 쿼리하세요. 슬러그를 정의하여 가격, 기능 및 사용량을 참조하세요.**Full-Stack SDK:백엔드에서 flowgladServer.getBilling() 을 사용하여 고객 데이터를 액세스하거나 React 프론트엔드에서 useBilling() 훅을 사용합니다Adaptable:**테스트 모드에서 새로운 가격 모델을 반복하고 클릭 한 번으로 프로덕션에 푸시하세요. 앱에서 가격 모델을 원활하게 회전시키되 재 배포 없이.

먼저 프로젝트 설정에 따라 필요한 Flowglad 패키지를 설치하세요:

# Next.js Projects
bun add @flowglad/nextjs
# React + Express projects:
...

Flowglad 는 인증 시스템과 원활하게 통합되며 Next.js 앱에서 시작하기 위해 몇 줄의 코드가 필요합니다. 설정은 일반적으로 1 분 미만입니다.

Configure Your Flowglad Server Client

Flowglad 서버 인스턴스를 생성하는 유틸리티를 만드세요. 본인의 고객/사용자/조직 ID 를 전달하세요—Flowglad 는 앱에서 자체 고객 ID 를 관리할 필요가 없습니다:

// lib/flowglad.ts
import { FlowgladServer } from '@flowglad/nextjs/server'
export const flowglad = (customerExternalId: string) => {
...

Expose the Flowglad API Handler

Flowglad 클라이언트가 백엔드와 안전하게 통신할 수 있도록 API 라우트를 추가하세요:

// app/api/flowglad/[...path]/route.ts
import { nextRouteHandler } from '@flowglad/nextjs/server'
import { flowglad } from '@/utils/flowglad'
...

Wrap Your App with the Provider

루트 레이아웃 (App Router) 또는 _app (Pages Router) 에서:

import { FlowgladProvider } from '@flowglad/nextjs'
// App Router example (app/layout.tsx)
export default function RootLayout({ children }) {
...

그만—Flowglad 는 모든 청구 로직에 앱의 내부 사용자 ID 를 사용하며 청구 상태를 프론트엔드에서 실시간으로 통합합니다.

B2C 앱: user.id 를 고객 ID 로 사용하세요.

B2B 앱: organization.id 또는 team.id 를 고객 ID 로 사용하세요.

Flowglad 는 인증 시스템을 변경하거나 Flowglad 고객 ID 를 관리할 필요가 없습니다. 그냥 본인의 것을 전달하세요!

• 프론트엔드에서 useBilling 을 사용하고, 백엔드에서 flowglad(userId).getBilling()

'use client'
import { useBilling } from '@flowglad/nextjs'
export function FeatureGate({ featureSlug, children }) {
...

import { useBilling, usePricing } from '@flowglad/nextjs'
export function PricingCards() {
const pricingModel = usePricing()
...

import { NextResponse } from 'next/server'
import { flowglad } from '@/utils/flowglad'
const hasFastGenerations = async () => {
...

import { flowglad } from '@/utils/flowglad'
const processChatMessage = async (params: { chat: string }) => {
// Extract your app's user/org/team ID,
...

먼저 가격 모델을 설정하세요. 템플릿을 사용하여 몇 번의 클릭으로 대시보드에서 설정할 수 있으며, 이를 커스터마이징하여 특정 필요에 맞게 조정할 수 있습니다.

현재 우리는 다음 가격 모델 템플릿을 가지고 있습니다:

사용량 제한 + 구독 하이브리드 (Cursor 와 유사)
무제한 사용 (ChatGPT 소비자 버전과 유사)
계층적 액세스 및 사용 크레딧 (Midjourney 와 유사)
기능 기반 구독 (Linear 와 유사)

더 많은 모델이 곧 출시됩니다. 템플릿에서 마음에 드는 가격 모델을 찾지 못하신다면, 원본부터 직접 만들 수 있습니다.

지난 15 년 동안 시장은 스택의 거의 모든 부분에서 개발자에게 전례 없는 선택지를 제공했습니다. 하지만 결제에 대해서는 실질적으로 새로운 진입자가 거의 없습니다. 기존 옵션은 매우 제한적이며, 대부분의 경우 계정을 설정하기 위해 영업팀과 소통해야 합니다. 자율 서비스 결제 옵션은 더 적습니다.

결과? 결제의 개발자 경험 (DX) 과 비용은 그 동안 거의 개선되지 않았습니다. 최상의 결제 DX 는 여전히 2015 년에 머물러 있는 듯한 기묘한 현상입니다. 반면 우리는 인증, 컴퓨팅, 호스팅 및 거의 모든 다른 부분에서 지속적인 개선을 누리고 있습니다.

Flowglad 는 이를 바꿉니다.

우리는 다음을 가능하게 하는 결제 레이어를 구축하고 있습니다:

• 청구 및 결제를 최대한 단순하게 생각함
• 통합 및 유지보수에 소요되는 시간을 최소화함
• 단일 통합에서 최대한의 효과를 얻음
• 단일 통합에서 더 많은 결제 제공업체 활용

이 미션을 달성하려면 시간이 걸릴 것입니다. 어려울 것입니다. 심지어 일부 사람을 불만스럽게 만들 수도 있습니다. 하지만 AI 가 개발자를 더 많이 온라인으로 끌어들이고 스타트업 청구의 복잡성을 폭발적으로 증가시켰기 때문에, 이 필요성은 더욱 시급합니다.