이런 분에게 필요합니다
- 결제·인증을 처음부터 직접 짜고 싶지 않은 1인 개발자
- 사이드 프로젝트를 빠르게 유료로 전환하고 싶은 사람
- 클라이언트 프로젝트마다 같은 결제 로직을 반복해서 짜는 에이전시
- Stripe 기준 보일러플레이트를 한국 결제로 바꾸는 데 이미 지친 사람
결제 흐름이 실제로 안전한 이유
구매자가 결제창에서 결제를 완료하면, 브라우저가 서버에 승인을 요청합니다. 서버는 그 요청을 그대로 믿지 않고 Firestore에서 해당 플랜의 진짜 가격을 다시 조회해 클라이언트가 보낸 금액과 대조합니다. 값이 다르면 그 자리에서 거부합니다. devtools나 프록시로 결제 금액을 조작해도 이 검증을 통과할 수 없습니다. Idempotency-Key로 중복 승인도 막습니다.
포함된 것
- Next.js 16(App Router) + TypeScript + Tailwind CSS 4
- Firebase Auth — 이메일/비밀번호, 구글 로그인
- 토스페이먼츠 결제 흐름 — 결제창 호출부터 서버 승인까지
- Firestore 보안 규칙 — 가격 플랜 읽기/쓰기, 결제 기록 스키마 검증
- 로그인 보호된 관리자 대시보드 — 매출 통계, 결제 내역, 가격 플랜 등록
- 가격 플랜이 뜨는 데모 랜딩 페이지
포함되지 않은 것
서비스마다 요구사항이 달라서 직접 채워야 하는 부분입니다.
- 결제 완료 후 실제로 무엇을 잠금 해제할지의 로직 (서비스마다 다름)
- 정기결제(구독) 자동 청구 — 이 킷은 1회성 결제까지만, 확장 방법은 README에 안내
- 실제 이용약관/개인정보처리방침 문구
- 구매 확인 이메일 발송
라이브 데모
kr-saas-kit.vercel.app에서 데모 랜딩 페이지를 확인할 수 있습니다. Firebase/토스 키가 설정되지 않은 상태라 예시 데이터로 렌더링되며, 실제 결제 검증 로직은 코드로 확인하실 수 있습니다.