커넥터

Stripe 연동

이제 MGX는 Supabase Edge Functions를 통해 Stripe 결제를 빠르게 구성할 수 있도록 지원합니다.

요구 사항

Stripe를 연동하기 전에 다음을 확인하세요:

정상적으로 작동하는 MGX 애플리케이션
MGX 프로젝트가 이미 Supabase 프로젝트에 연결되어 있어야 합니다. (Supabase에 대해 자세히 알아보기.)
Stripe dashboard 에서 상품과 해당 가격을 생성해 두기

참고: 미리보기 모드에서는 결제 기능을 테스트할 수 없습니다. MGX 앱을 배포하고 Stripe를 Test Mode로 전환한 뒤 연동을 확인하세요.

테스트 카드:

카드 번호: 4242 4242 4242 4242
만료일: 미래의 아무 날짜나 가능
CVC: 아무 3자리 숫자

Stripe 결제 설정

Supabase 연결
- MGX 오른쪽 상단의 Supabase 버튼을 클릭합니다
- 대상 Supabase 프로젝트를 선택하려면 Supabase 연동 가이드를 따르세요
- 연결이 완료되면 Supabase를 통해 결제 설정을 구성할 수 있습니다
자연어로 구독 요구 사항 설명
- 예시: 주당 $4.99, 월당 $14.99, 연당 $149.99의 세 가지 구독 플랜을 지원하는 결제 시스템을 만들어 주세요.
제출하면 MGX 에이전트가 구성 버튼을 생성합니다. 최소 두 개의 필드를 입력해야 합니다.
Add Stripe Secret Key 버튼 클릭
- STRIPE_SECRET_KEY 필드에 Stripe secret key를 입력합니다.
- 각 플랜에 대해 PRICE_ID로 끝나는 필드에 해당 Stripe Price ID를 입력합니다.
여기에서 Stripe secret key를 확인할 수 있습니다: https://dashboard.stripe.com/test/apikeys

Product Catalog > Products 로 이동한 다음, 아래 방법 중 하나로 price ID를 확인하세요:
- "Pricing" 목록에서 해당 가격 오른쪽의 “More” 버튼을 클릭한 다음 "Copy Price ID"를 클릭합니다.
가격 이름을 직접 클릭해 상세 페이지를 연 다음, 오른쪽 상단에 표시된 price ID를 복사할 수도 있습니다.

마지막으로 각 price ID를 해당 입력 필드에 정확히 붙여넣습니다.

참고: 개인정보 보호와 보안을 위해 secret key를 MGX 채팅에 직접 붙여넣지 마세요. 노출되면 Stripe 계정에 무단 접근이 가능해질 수 있습니다. 대신 MGX의 "Add API Key" 버튼을 사용해 안전하게 저장하세요.
Add Stripe Webhook Secret Key 버튼 클릭
- Webhook Secret Key를 입력합니다
Webhook Secret Key 찾는 방법:

Stripe에서 왼쪽 하단의 “Developers”를 클릭한 다음 Webhooks 옵션을 선택합니다.

Webhooks 페이지에서 "Add destination" 버튼을 클릭합니다.

프로젝트 요구 사항에 맞는 webhook 이벤트를 선택합니다:
- 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을 클릭해 선택합니다.
- 해당 edge function의 Details 패널에서 Endpoint URL을 복사한 뒤 Stripe Event Destination에 붙여넣습니다.
연동 테스트

Stripe의 Test Mode를 사용해 결제를 테스트합니다.

테스트 카드 정보:
- 카드 번호: 4242 4242 4242 4242
- 미래의 아무 만료일
- 아무 3자리 CVC