실시간 결제 인터페이스 구축: Phoenix LiveView + Stripe 활용 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• *Elixir/Phoenix 개발자 및 실시간 결제 시스템 구축을 목표로 하는 프론트엔드/백엔드 개발자**
• 난이도: 중급 이상 (Elixir, Phoenix, Stripe API 기초 지식 필요)*

핵심 요약

• Phoenix LiveView + Stripe를 통해 SPA 없이 실시간 결제 흐름 구현 가능
• Stripe.PaymentIntent.create/1로 결제 인텐트 생성 및 phx-hook을 활용한 보안 iframe 통합
• Webhook + Phoenix.PubSub을 통해 결제 상태 실시간 업데이트 및 Elixir 기반 서버 로직 안정성 확보

섹션별 세부 요약

1. 의존성 설정

• mix.exs에 {:stripe, "~> 3.0"} 및 {:finch, "~> 0.16"} 의존성 추가
• config.exs에 api_key: System.fetch_env!("STRIPE_SECRET")으로 환경 변수 기반 보안 키 관리

2. 클라이언트 측 구현

• Stripe JS 초기화: Stripe("pk_test_...") 및 phx-hook을 통한 카드 입력 iframe 마운트
• confirm_payment 이벤트 처리: stripe.confirmCardPayment() 호출 후 결과를 LiveView로 전달

3. 서버 측 핸들러

• handle_event("checkout", ...)에서 Stripe.PaymentIntent.create/1 호출
• intent.client_secret을 LiveView에 할당 후 push_event("confirm_payment", ...)로 클라이언트에 전달

4. 결제 결과 처리

• handle_event("payment_result", ...)에서 에러/성공 상태에 따라 assign(socket, ...)로 UI 업데이트
• 성공 시 assign(:status, :success)로 상태 전환 및 Tailwind CSS 기반 UI 피드백 (bg-yellow-200, animate-pulse 등)

5. Webhook 처리 및 실시간 통신

• stripe listen --forward-to localhost:4000/api/webhooks/stripe로 로컬 테스트
• Phoenix.PubSub를 통해 payment_intent.succeeded 이벤트를 LiveView로 스트리밍

6. 확장 가능한 기능

• 일회성 결제, 구독 결제 (Stripe.Subscription.create/1), 동적 금액 기부 등의 다양한 결제 유형 지원
• live_step을 활용한 다단계 체크아웃 프로세스 구현

결론

• Phoenix LiveView로 실시간 UI 업데이트, Stripe로 보안 및 결제 흐름 관리, Elixir로 서버 로직의 안정성 확보
• 핵심 팁:
• @submitting assign으로 폼 비활성화 동적 제어
• phx-hook은 Stripe iframe에만 사용, 로직은 Elixir에서 유지
• Webhook 이벤트를 Phoenix.PubSub로 LiveView에 실시간 전달
• Tailwind CSS로 opacity-50, cursor-not-allowed 등 실시간 피드백 제공