Stripe 결제 요소: '카드만' 제한 및 저장된 결제 방법 표시 (비공식 문서된 엣지 케이스)

카테고리

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

서브카테고리

웹 개발

대상자

Stripe 결제 요소를 사용하는 웹 개발자, 특히 결제 방법 제한 및 저장된 결제 정보 표시 기능이 필요한 개발자

난이도: 중급~고급 (Stripe API 및 고객 세션 관리 이해 필요)

핵심 요약

• SetupIntent와 CustomerSession을 결합하여 결제 요소를 '카드'만으로 제한하고 저장된 결제 방법을 표시할 수 있음.
• payment_method_types: ['card']로 결제 유형 제한, CustomerSession으로 저장된 결제 방법 표시 가능.
• Stripe 공식 문서에 명시되지 않은 비공식 엣지 케이스로, 향후 변경 가능성 있음.

섹션별 세부 요약

1. 문제점

• SetupIntent 사용 시 payment_method_types: ['card']로 제한 가능하지만, 저장된 결제 방법(Saved 탭)이 표시되지 않음.
• CustomerSession 사용 시 저장된 결제 방법 표시 가능하지만, 모든 활성화된 결제 유형(ACH, Link 등)이 표시됨.

2. 해결 방법

1. SetupIntent 생성: payment_method_types: ['card']로 결제 유형 제한.
2. CustomerSession 생성: 고객 ID를 기반으로 저장된 결제 방법 표시 설정.
3. Payment Element 초기화: SetupIntent의 clientSecret과 CustomerSession의 customerSessionClientSecret을 동일한 요소에 결합.

3. 코드 예시

• 라우트 설정:

```php

$setupIntentParams = [

'usage' => 'off_session',

'payment_method_types' => ['card'],

];

$customerSession = CustomerSession::create([...]);

```

• 프론트엔드 초기화:

```javascript

const elementsOptions = {

appearance: {theme: 'stripe'},

clientSecret: setupIntentClientSecret,

customerSessionClientSecret: customerSessionClientSecret,

};

```

4. 추가 사항

• ACH 등 다른 결제 유형에도 동일한 방식 적용 가능 (예: ['us_bank_account']).
• Stripe API 버전 '2024-06-20' 사용 권장.

결론

• SetupIntent + CustomerSession 결합은 '카드만' 제한과 저장된 결제 방법 표시를 동시에 지원하지만, Stripe 공식 문서에 명시되지 않은 비공식 방법으로 향후 변경 가능성 있음.
• 실무 적용 시 Stripe API 버전 및 고객 세션 설정을 철저히 검증하고, 사용자 경험 테스트 필수.