결제 기능 구현: React와 Node.js를 활용한 Stripe 연동 가이드

카테고리

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

서브카테고리

웹 개발

대상자

초보 개발자 및 튜토리얼/데모 앱 개발자 (난이도: 초보자 친화적)

핵심 요약

• React + Node.js + Stripe를 활용한 결제 기능 구현 예제 제공
• 데이터베이스 없이 가상 데이터(dummy data)로 간단한 결제 흐름 구축 가능
• Stripe Checkout 세션 생성을 통해 보안 결제 처리 및 결제 결과 확인 가능
• Stripe 테스트 카드 정보 사용으로 결제 시나리오 시뮬레이션 가능

섹션별 세부 요약

1. 백엔드 설정 (Node.js + Express + Stripe)

• stripe.checkout.sessions.create() API를 사용해 결제 세션 생성
• .env 파일에 STRIPE_SECRET_KEY 입력하여 Stripe API 인증
• success_url 및 cancel_url 설정으로 결제 성공/실패 후 리디렉션 처리
• Express 서버는 5000포트에서 실행

2. 프론트엔드 구현 (React + Axios)

• 가상 장바구니(dummyCart) 구성 (예: T-shirt, Hat 등)
• axios.post("/api/checkout")로 백엔드에 결제 요청
• Stripe 결제 화면으로 리디렉션 후 결제 완료/실패 상태 확인
• 결제 완료 시 success_url로 이동, 실패 시 경고 메시지 표시

3. Stripe 테스트 결제 시나리오

• 성공 결제: 카드 번호 4242 4242 4242 4242 입력
• 실패 시나리오:

- 4000 0000 0000 0002: 카드 거부

- 4000 0000 0000 9995: 잔액 부족

- 4000 0027 6000 3184: 3D Secure 인증 필요

• 테스트 시 사용 가능한 CVC: 123, 유효기한: 12/34, 우편번호: 12345

4. 결제 상태 확인 (session_id 기반)

• useSearchParams()로 URL의 session_id 추출
• stripe.checkout.sessions.retrieve(session_id)로 결제 상태 확인
• session.payment_status === "paid"일 경우 결제 성공 메시지 표시

결론

• Stripe의 호스팅 결제 화면을 활용해 보안 및 복잡성 최소화
• 결제 상태 확인을 위해 /payment-result 페이지에서 session_id 검증 로직 추가 권장
• 실제 프로젝트로 확장 시 데이터베이스 연동 및 실제 결제 키 사용 필요