Creem.io 결제 연동

Creem.io MoR(Merchant of Record) 서비스를 연동하는 방법을 설명합니다.

📋 설정 개요

Creem.io는 MoR 모델을 통해 개발자가 직접 사업자등록 없이도 온라인 결제를 받을 수 있는 서비스를 제공합니다.

🚀 계정 설정

1. 계정 생성

Creem.io 접속
회원가입 진행
creem.io 대시보드의 우측상단 Test mode를 활성화하면 기존 프로덕션과 완전히 분리된 새로운 환경에서 테스트 할 수 있습니다. 테스트 환경에서 결제 테스트를 진행하고 문제가 없다면 프로덕션 환경으로 전환할 수 있습니다.

2. API Keys 발급

대시보드 로그인 후 "Developers" > "API Keys" 접속
"Create API Key" 클릭

3. 환경변수 설정

# .env.local
CREEM_BASE_URL=
CREEM_API_KEY=

💳 상품 등록

1. 대시보드에서 상품 생성

"Products" 섹션에서 "Create Product" 클릭
상품 정보 입력

2. 상품 ID 확인

생성된 각 상품의 Product ID를 복사하여 코드에서 사용합니다.

참고: 현재 creem.io는 USD, EUR 통화만 지원합니다. 결제 페이지 번역과 다양한 통화지원은 추후 지원 예정입니다.

🔗 웹훅 설정

1. 웹훅 엔드포인트 등록

"Settings" > "Webhooks" 접속
"Add Endpoint" 클릭

웹훅 URL 설정:

# 개발 환경 (localtunnel/ngrok등 사용 추천)
https://your-ngrok-url.ngrok.io/api/webhooks/creem

# 프로덕션 환경
https://yourdomain.com/api/webhooks/creem

2. 이벤트 선택

수신 받고자 하는 이벤트를 선택하여 인벤트 발생시 로직을 구현할 수 있습니다.

checkout.completed - 결제 완료
subscription.active - 구독 활성화
subscription.paid - 구독 결제 성공
subscription.canceled - 구독 취소
subscription.expired - 구독 만료
refund.created - 환불 생성
dispute.created - 분쟁 생성
subscription.update - 구독 업데이트
subscription.trialing - 무료 트라이얼 시작

NEXIT-SaaS-Template에서는 아래 경로에 웹훅 엔드포인트를 제공합니다.

route.ts

해당 엔드포인트는 checkout, subscription 이벤트를 수신받아 구독상태를 처리합니다.

TIP: Webhook을 사용해 디스코드/메일 알람을 구현하면 더 빠르게 결제 상태를 확인할 수 있습니다.

💻 사용법

참고: 결제 관련 모든 코드는 템플릿에 이미 구현되어 있습니다. 환경변수 설정과 상품 등록만 완료하면 바로 사용할 수 있습니다.

🧪 테스트 방법

1. 테스트 결제 진행

템플릿의 Pricing 페이지 접속
플랜 선택 후 "구독하기" 클릭

Creem 결제 페이지에서 테스트 카드 정보 입력 Stripe Test Card 목록

# Visa Test Card 예시
카드번호: 4242 4242 4242 4242
만료일: 12/32
CVC: 123

결제 완료 후 웹훅이 정상 작동하는지 확인

Creem.io 결제 설정