Stripe Payment Element에서 카드 결제만 제한하고 저장된 카드 표시하는 방법 (공식 문서 외)

핵심 기술

Stripe Payment Element를 사용하여 '카드' 결제 수단만 제한하면서, 로그인한 사용자의 저장된 카드 목록을 표시하는 비공식적인 구현 방법을 제시합니다. 이는 SetupIntent와 CustomerSession을 함께 활용하여 Stripe의 기본 동작을 우회하는 기술입니다.

기술적 세부사항

• 문제점:
  • SetupIntent에 payment_method_types: ['card']만 설정하면 카드만 제한되지만 'Saved' 탭이 표시되지 않습니다.
  • CustomerSession을 사용하면 'Saved' 탭이 표시되지만, 카드 외 다른 결제 수단까지 모두 노출됩니다.
• 해결 방안:
  1. 고객(Customer)을 위한 SetupIntent를 payment_method_types: ['card']로 생성합니다.
  2. 동일한 고객을 위한 CustomerSession을 생성합니다.
  3. Payment Element를 초기화할 때 SetupIntent의 clientSecret과 CustomerSession의 customerSessionClientSecret을 모두 전달합니다.
• 결과:
  • 새로운 결제 수단으로는 'Card'만 사용 가능하게 제한됩니다.
  • 'Saved' 탭이 나타나며 저장된 카드 목록을 보여줍니다.
• 구현 예시 (Laravel 기반 코드):
  • web.php 라우팅 예시: 사용자 인증 확인, stripe_customer_id 조회, SetupIntent 및 CustomerSession 생성 로직 포함.
  • resources/views/stripe-test.blade.php 뷰 예시: Stripe.js 라이브러리 로드, Payment Element 초기화, confirmSetup 이벤트 처리 로직 포함.
• 보너스: ACH 등 다른 특정 결제 수단을 제한할 때도 동일한 원리 적용 가능합니다.

개발 임팩트

Stripe의 공식 문서에 명시되지 않은 기능을 구현함으로써, 개발자는 사용자의 결제 경험을 더욱 세밀하게 제어할 수 있습니다. 특정 결제 수단만을 허용하면서도 기존 고객의 편리성을 높이는 사용자 경험(UX)을 제공할 수 있습니다.

커뮤니티 반응

(원문에서 커뮤니티 반응에 대한 언급은 없습니다.)

톤앤매너

이 글은 개발자가 겪을 수 있는 실질적인 문제에 대한 해결책을 제시하며, 구체적인 코드 스니펫과 함께 논리적인 설명을 제공합니다. 비공식적인 해결책임을 명시하여 잠재적 위험성도 인지시킵니다.