Stripe로 결제 설정하기
Supabase Edge Functions를 사용한 채팅 기반 Stripe 통합으로 앱에 일회성 결제 또는 구독을 추가하세요.
Lovable은 이제 채팅을 통해 완전히 Stripe를 설정할 수 있습니다.
채팅 기반 자동 설정 (권장)
Supabase를 연결하고 Add API Key를 통해 Stripe Secret Key를 저장한 후 필요한 것을 설명하기만 하면 됩니다:
- "세 가지 구독 티어 추가..."
- "$29에 내 전자책 일회성 체크아웃 생성"
Lovable이 체크아웃/포털 edge functions, RLS가 있는 데이터베이스 테이블 및 UI 버튼을 생성합니다 — 요청하지 않는 한 수동 코딩이나 웹훅이 필요하지 않습니다.
- 일회성 판매의 경우 장바구니나 제품 페이지가 이미 작동하는지 확인하세요.
- 구독의 경우 Lovable이 Stripe 고객을 각 사용자의 id에 연결할 수 있도록 Supabase Auth가 설정되어 있는지 확인하세요
핵심 요점
- 구독과 일회성 결제 모두에 채팅 기반 플로우를 사용하세요.
- Stripe Secret Key를 채팅에 절대 붙여넣지 마세요. 채팅 내 Add API Key 양식을 통해 구성하세요.
- 웹훅은 선택 사항입니다. Lovable은 웹훅을 요청하지 않는 한 edge-function 폴링에 의존합니다.
- Browser Console → Network/Errors, Supabase → Edge Functions → Logs 및 Stripe Dashboard → Logs에서 디버깅하세요.
- 항상 Stripe Test Mode에서 테스트한 다음 배포하세요.
요구 사항
Stripe를 통합하기 전에 다음 전제 조건이 충족되었는지 확인하세요:
- 프로젝트가 Supabase에 연결되어 있어야 합니다. Supabase에 대해 자세히 알아보기
- 제품이 올바르게 구성된 Stripe 계정
- 작동하는 프론트엔드 및 백엔드:
- 개별 제품 판매의 경우 장바구니와 체크아웃 페이지가 작동하는지 확인하세요.
- 구독의 경우 로그인 기능과 다른 가격 티어를 설정하세요.
참고 Stripe 통합은 미리보기에서 작동하지 않습니다. 통합을 테스트하려면 배포해야 합니다. 또한 기능을 테스트할 때 Stripe에서 테스트 모드인지 확인해야 합니다. 결제 테스트 시 카드 번호: 4242 4242 4242 4242, CVC로 아무 3자리, 미래 날짜로 아무 날짜를 카드로 사용할 수 있습니다.
Stripe 결제 설정 (노코드 채팅 플로우)
Lovable은 이제 모든 Stripe 로직을 생성합니다. 채팅 내 Add API Key 양식을 통해 Stripe Secret Key가 구성되고 프로젝트가 Supabase에 연결되면 채팅에서 필요한 것을 말하기만 하면 됩니다 — 수동 Payment Links가 필요하지 않습니다.
단계 1
프로젝트 준비
- Supabase 연결됨
- 채팅 내 Add API Key 양식을 통해 Stripe Secret Key 추가됨
- (선택 사항) 가격 또는 제품 ID 준비
단계 2
예시:
- "Digital Course"에 대해 $29 일회성 체크아웃 생성
- 각 사용자의 id에 연결된 $99 연간 Premium 플랜 설정
단계 3
검토 및 적용 Lovable이 Edge Functions, 데이터베이스 테이블 및 UI 컴포넌트를 자동으로 스캐폴딩합니다(모두 Supabase의 사용자 id에 연결됨). 미리보기를 확인한 다음 Apply를 클릭하여 배포합니다.
- 구독은 항상 안전한 역할 기반 접근을 위해 Supabase의 인증된 사용자
id에 연결되어야 합니다.
고급 통합: Webhooks 및 Supabase
구독 및 역할 기반 접근과 같은 복잡한 결제 구조의 경우 Lovable은 Supabase를 사용하여 Stripe 통합을 안전하게 처리하는 것을 권장합니다. 이를 통해 적절한 웹훅 처리, 구독 관리 및 결제 티어에 따른 역할 기반 접근 제어가 가능합니다.
사용자 계정에 필요한 변경을 처리하는 Edge Function은 AI에 의해 자동으로 설정되어야 합니다.
프로젝트에 Supabase 연결
시작하기는 간단합니다. Lovable은 내장된 네이티브 통합으로 Supabase 연결을 쉽게 만듭니다:
- Lovable의 오른쪽 상단 모서리에 있는 Supabase 버튼을 클릭합니다.
- 지침에 따라 프로젝트를 연결합니다.
- 연결되면 Supabase가 안전한 결제 처리, 구독 관리, 웹훅 처리, 고객 데이터 저장 및 오류 처리를 가능하게 합니다.
안전한 결제 처리
Lovable에 프롬프트하여 프로세스를 시작합니다:
Stripe를 프로젝트에 연결합시다. 안전한 결제 처리부터 시작하겠습니다.
Lovable이 결제 처리에 필요한 SQL 스키마를 생성합니다. 여기에는 사용자, 구독 및 결제에 대한 데이터베이스 테이블이 포함됩니다. 변경 사항을 적용하기 전에 특정 제품 요구 사항에 맞게 이러한 테이블을 검토하고 커스터마이즈할 수 있습니다.
Webhooks용 Edge Functions 구현
Supabase의 Edge Functions는 사용자에게 가깝게 실행되어 빠른 응답을 보장하는 작고 고성능 서버리스 함수입니다. 데이터베이스를 업데이트하기 전에 결제 확인과 같은 웹훅 이벤트를 처리하는 데 도움이 됩니다.
단계 1
Supabase의 Edge Function에서 Endpoint URL을 검색합니다.
단계 2
Stripe Dashboard > Developers > Webhooks > Create an Event Destination으로 이동합니다.
단계 3
프로젝트 요구 사항에 맞는 Webhook Events를 선택합니다:
payment_intent.succeededpayment_intent.payment_failedcustomer.subscription.createdcustomer.subscription.updatedcustomer.subscription.deleted
단계 4
Supabase의 Endpoint URL을 입력합니다.
단계 5
Webhook Secret을 복사하고 Supabase → Edge Functions → Manage Secrets → Add New Secret에 안전하게 저장합니다.
시크릿 이름을 어떻게 지정할지 확실하지 않으면 Plan mode에서 Lovable에 안내를 요청하세요.
API 키 안전하게 추가
Stripe를 안전하게 통합하려면 API 키를 채팅에 직접 공유하지 마세요. 대신:
.png?fit=max&auto=format&n=iHmie2cDncPAjYRf&q=85&s=14f9f256b736a98c9501a82412c0a903)
단계 1
Stripe Dashboard > Developers > API Keys로 이동합니다.
단계 2
Secret Key를 복사합니다 (Lovable 채팅에 직접 붙여넣지 마세요).
단계 3
Lovable "Add API Key" 기능을 사용하여 안전하게 저장합니다.
중요 보안 경고
Secret Key를 Lovable 채팅에 직접 붙여넣지 마세요. 집 열쇠처럼 취급하세요 — 노출하면 Stripe 계정에 무단 접근을 허용할 수 있습니다. 대신 Lovable의 API 키 기능을 사용하여 안전하게 저장하세요.
통합 테스트
- Stripe의 Test Mode를 사용하여 안전하게 결제를 테스트합니다.
- 테스트 카드 세부 정보:
- 카드 번호:
4242 4242 4242 4242 - 미래의 만료 날짜
- 아무 3자리 CVC
- 카드 번호:
- 앱을 배포하세요 — Stripe 통합은 미리보기 모드에서 작동하지 않습니다.