요구 사항
Stripe를 통합하기 전에 다음을 준비해야 합니다:
정상적으로 동작하는 MGX 애플리케이션
Supabase 프로젝트와 이미 연결된 MGX 프로젝트 (자세한 내용은 Supabase 가이드를 참조)
Stripe 대시보드에서 생성한 상품과 해당 가격
참고: 미리보기(Preview) 모드에서는 결제 기능을 테스트할 수 없습니다. MGX 앱을 배포(Deploy) 하고 Stripe를 테스트 모드(Test Mode) 로 전환해 통합을 확인해야 합니다.
테스트 카드 번호: 4242 4242 4242 4242
임의의 유효한 미래 만료일과 임의의 3자리 CVC 사용 가능
Stripe 결제 설정
1. Supabase 연결
MGX 오른쪽 상단의 Supabase 버튼을 클릭합니다.
Supabase Connect 가이드를 따라 대상 Supabase 프로젝트를 선택합니다.
연결 후 Supabase에서 결제 설정을 구성할 수 있습니다.
2. 구독 요건을 자연어로 설명
예: “주당 $4.99, 월 $14.99, 연 $149.99의 세 가지 구독 플랜을 지원하는 결제 시스템을 만들어 주세요.”
제출 후 MGX 에이전트가 설정 버튼을 생성합니다. 최소 두 개 필드를 입력해야 합니다.
3. Stripe Secret Key 추가
Add Stripe Secret Key 버튼을 클릭합니다.
STRIPE_SECRET_KEY 필드에 Stripe Secret Key를 입력합니다.
각 구독 플랜별로 해당 Stripe Price ID를 입력합니다.
Stripe Secret Key 찾기:
Price ID 복사:
Product Catalog > Products로 이동
가격 오른쪽 More 버튼 클릭 후 Copy Price ID 선택
또는
가격 이름을 클릭해 상세 페이지에서 오른쪽 상단의 Price ID 복사
Add API Key 버튼을 사용하여 안전하게 저장해야 합니다.
⚠️ 주의: 보안상 MGX 채팅창에 Secret Key를 직접 붙여넣지 마세요.
4. Stripe Webhook Secret Key 추가
Add Stripe Webhook Secret Key 버튼을 클릭합니다.
Webhook Secret Key를 입력합니다.
Webhook Secret Key 찾기:
Stripe에서 왼쪽 하단 Developers → Webhooks 선택
Add destination 클릭
프로젝트 필요에 맞는 이벤트 선택:
checkout.session.async_payment_failed
checkout.session.async_payment_succeeded
checkout.session.completed
checkout.session.expired
Continue → Webhook endpoint 선택
Supabase Endpoint URL 입력
Supabase Endpoint URL 찾기:
MGX에서 View Edge Function 클릭
_webhook 접미사가 있는 Edge Function 선택
세부 정보 패널에서 Endpoint URL 복사 후 Stripe 이벤트 대상에 붙여넣기
통합 테스트
Stripe Test Mode로 결제를 테스트합니다.
테스트 카드 정보
카드 번호: 4242 4242 4242 4242
만료일: 임의의 미래 날짜
CVC: 임의의 3자리 숫자
FAQ
Q. 왜 미리보기 모드에서 결제를 테스트할 수 없나요?
A. 미리보기 모드는 로컬 환경이므로 공개적으로 접근 가능한 Webhook URL이 없습니다. Stripe 이벤트를 수신하려면 앱을 배포해야 합니다.
Q. 프로덕션 모드로 전환하려면?
A. Stripe 대시보드에서 Test Mode를 비활성화하고 라이브 Secret Key와 Webhook Secret을 사용하세요.
Q. 테스트 결제가 성공했는지 어떻게 확인하나요?
A. 테스트 결제 후 Stripe의 Payments 페이지에서 거래 기록을 확인할 수 있습니다.