5 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
🚨 TossPayments 통합 문제 - 토스 개발자센터 제출용 종합 보고서
📋 기본 정보
프로젝트: Urban Jungle 전자상거래 플랫폼
기술스택: Next.js 15, TypeScript, TossPayments v2 SDK
문제 기간: 2025년 8월 6일 ~ 8월 11일 (5일간)
시도 횟수: 20회 이상
오류 코드: NOT_SUPPORTED_WIDGET_KEY
🔍 정확한 오류 메시지
Error: API 개별 연동 키의 클라이언트 키로 SDK를 연동해주세요.
결제위젯 연동 키는 지원하지 않습니다.
code: 'NOT_SUPPORTED_WIDGET_KEY'
📝 시도한 모든 방법들 (시간순)
1단계: 초기 구현 시도 (8/6-8/7)
✅ TossPayments v2 SDK 설치: @tosspayments/tosspayments-sdk
✅ 결제위젯 연동 키 사용: live_gck_GePWvyJnrKQmje0j0RKb3gLzN97E
❌ 결과: 키 타입 불일치 오류 최초 발생
2단계: 키 타입 변경 시도 (8/8-8/9)
✅ API 개별 연동 키로 변경: live_ck_XZYkKL4Mrjo1bRmko0G180zJwlEW
✅ Secret Key 동시 변경: live_sk_00000000000000000000( 보안상 삭제해 문의 글 올림)
✅ 환경변수 파일 수정
❌ 결과: 동일한 오류 지속
3단계: 환경변수 정리 시도 (8/9-8/10)
✅ 중복 환경변수 제거
✅ .env.local과 .env.production 통일
✅ 캐시 클리어 및 빌드 재실행
❌ 결과: 동일한 오류 지속
4단계: 코드 구조 검토 (8/10-8/11)
✅ TossPaymentWindow 컴포넌트 완전 재작성
✅ loadTossPayments() 초기화 방식 변경
✅ payment.requestPayment() 파라미터 형식 수정
❌ 결과: 동일한 오류 지속
5단계: 환경변수 공백 문제 발견 (8/11)
🔍 핵심 발견: 환경변수에 공백 포함 확인
📊 현재 상태: 파일은 올바르나 런타임에서 공백 존재
⚠️ 문제 지속: 수정 후에도 동일한 오류
🔧 현재 기술 구현 상태
코드 구조 (정상)
// 초기화
const toss = await loadTossPayments(clientKey)
// 결제 실행
const payment = toss.payment({ customerKey })
await payment.requestPayment({
method: 'CARD',
amount: { currency: 'KRW', value: amount },
orderId, orderName, customerName, customerEmail
})
환경변수 설정 (확인됨)
NEXT_PUBLIC_TOSS_PAYMENTS_CLIENT_KEY=live_ck_XZYkKL4Mrjo1bRmko0G180zJwlEW
TOSS_PAYMENTS_SECRET_KEY=livesk( 보안상 삭제해 문의 글 올림)
실제 키 검증
✅ 키 길이: 37자 (정상)
✅ 키 접두사: liveck (API 개별 연동 키 형식)
✅ 토스 개발자센터에서 발급받은 정식 라이브 키
❌ SDK에서 여전히 결제위젯 키로 인식
🚨 분석된 문제점들
1차 의심: 환경변수 로딩 문제
Next.js 15 환경변수 처리 방식 변경 가능성
런타임과 빌드타임 환경변수 불일치
Replit 플랫폼 특정 환경변수 처리 이슈
2차 의심: SDK 버전 호환성
TossPayments v2 SDK와 특정 키 타입 호환성 문제
Next.js 15와 SDK 간 충돌 가능성
브라우저별 SDK 동작 차이 (Edge 최적화 환경)
3차 의심: 키 발급 설정 문제
토스 개발자센터에서 키 발급 시 설정 오류 가능성
API 개별 연동 키의 실제 권한 설정 문제
상점 설정과 키 권한 간 불일치
🤔 한계 인식과 필요한 도움
현재 한계
토스페이먼츠 내부 로직 미접근: SDK 내부에서 키를 어떻게 검증하는지 알 수 없음
키 발급 과정 미확인: 개발자센터에서의 키 발급 설정을 직접 확인할 수 없음
실시간 디버깅 제한: 토스 서버와의 실제 통신 과정을 모니터링할 수 없음
토스 개발자센터에 문의할 핵심 질문들
1. 키 발급 관련
Q: API 개별 연동 키
live_ck_XZYkKL4Mrjo1bRmko0G180zJwlEW가
TossPayments v2 SDK에서 사용 가능한 키인지 확인 요청
Q: 해당 키가 결제창 방식(requestPayment)을 지원하는지 확인 필요
Q: 상점ID URBWWW0z1p와 해당 키의 권한 설정 확인 요청
2. 기술 구현 관련
Q: TossPayments v2 SDK loadTossPayments() 사용 시
API 개별 연동 키와 결제위젯 연동 키의 구분 방법
Q: Next.js 15 환경에서의 권장 구현 방법
Q: payment.requestPayment() 사용 시 필수 파라미터 확인
3. 환경 관련
Q: Replit 플랫폼에서의 TossPayments 구현 시 알려진 이슈
Q: 프로덕션 환경(https://urban-jungle.kr)에서의 CORS 설정 확인
Q: Edge 브라우저 최적화 환경에서의 호환성 확인
💡 필요한 정확한 답변들
1. 키 검증 결과
현재 키가 올바른 타입인지 명확한 확인
키 권한 설정 상태 및 수정 필요사항
대체 키 발급 필요 여부
2. 코드 수정 가이드
정확한 SDK 초기화 코드
올바른 결제 요청 파라미터 형식
필수 설정 또는 누락된 설정 사항
3. 환경 설정 가이드
Next.js 15 특화 설정 방법
Replit 플랫폼 특화 설정 사항
CORS 및 도메인 설정 확인
📊 현재 상황 요약
기술적 구현: 95% 완료 (표준 방식 준수)
환경 설정: 90% 완료 (키 설정 및 환경변수)
**핵심 블로커: SDK 키 인식 오류 (해결 안됨)
비즈니스 영향: 결제 기능 전체 중단 (5일째)
**GPT 로 문의를 만드신것 같은데 정리를 해주실수 있을까요?
NOT_SUPPORTED_WIDGET_KEY 가 나온다면 사용하신 키가 문제입니다.
위젯키를 사용해 주셔야 합니다.
🔍 TossPayments 문의용 Q&A 정리
🔑 키 발급 관련
Q1. liveck... 키는 TossPayments v2 SDK에서 사용 가능한 키인가요?
➡️ A: 네. liveck는 API 개별 연동 키로, v2 SDK에서 loadTossPayments()에 사용 가능한 형식입니다. 다만 실제 사용 가능 여부는 상점 설정에 따라 제한될 수 있습니다. 다만 결제위젯을 연동한다면 결제위젯키를 사용해주시고, 위에는 결제창에서 사용가능합니다.
Q2. 위 키가 requestPayment() 방식의 결제창 연동을 지원하도록 설정되어 있나요?
➡️ A: API 키가 결제창 방식에 사용되려면:
해당 상점이 결제창 연동을 허용해야 하고
키에 해당 기능 권한이 부여되어야 합니다.
🔍 개발자센터에서 키 설정을 꼭 확인해주세요.
Q3. 상점 ID URBWWW0z1p와 해당 키의 권한 설정이 일치하는지 확인 요청드립니다.
➡️ A: 내 상점 관리 > API 키 탭에서 확인 가능합니다.
키가 해당 상점에 연결되어 있는지
"결제 요청" 권한이 활성화되어 있는지
테스트/라이브 키 혼용 여부도 확인 필요합니다.
💻 기술 구현 관련
Q4. SDK loadTossPayments()는 클라이언트 키를 어떤 기준으로 판단하나요?
➡️ A: SDK는 키 접두사로 구분합니다:
liveck → API 개별 연동 키
livegck → 결제위젯 키
Q5. Next.js 15에서 TossPayments SDK 구현 시 주의사항은?
➡️ A:
loadTossPayments()는 반드시 Client Component에서만 호출
'use client' 지시어 필요
환경변수는 NEXTPUBLIC 접두사 필수
⚠️ 서버 컴포넌트에서 SDK 호출 시 오류 발생 가능
Q6. requestPayment()에 필수로 들어가야 하는 파라미터는?
ts
복사
편집
await payment.requestPayment({
method: 'CARD',
amount: { currency: 'KRW', value: 10000 },
orderId: 'order_123',
orderName: 'Urban Jungle 상품',
customerName: '홍길동',
customerEmail: 'test@example.com'
});
➡️ A: method, amount, orderId, orderName은 필수입니다.
amount.value는 반드시 숫자형이어야 하며, 누락 시 오류 발생합니다.
🌐 환경 및 플랫폼 관련
Q7. Replit 환경에서 TossPayments 환경변수 관련 이슈가 있나요?
➡️ A:
환경변수에 공백 포함 시 오류 발생
수정 후에는 빌드 및 재시작 필요
.env.local과 UI 설정이 충돌할 수 있으므로 한 가지만 사용 권장
Q8. 프로덕션 도메인(https://urban-jungle.kr)에서 CORS 설정은 어떻게 확인하나요?
➡️ A:
Toss는 요청의 Origin 헤더 기준으로 허용 여부를 판단합니다.
상점 설정에 도메인이 등록되어 있어야 하며, www. 포함 여부도 정확히 일치해야 합니다.
CORS 오류는 브라우저 콘솔에서 확인 가능
Q9. Edge 브라우저에서 TossPayments SDK 사용 시 호환성 이슈 있나요?
➡️ A:
현재 공식적으로 알려진 이슈는 없습니다.
다만, 추적 방지 설정이나 팝업 차단 설정이 영향을 줄 수 있습니다.
SDK는 iframe/popup 방식이므로 최신 브라우저에서 테스트 권장
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.