결제위젯 renderPaymentMethods 호출 문의
안녕하세요.
토스 페이먼츠 관련 문의 드리려 합니다.
신규 가입 후 개발자용 테스트상점에서 결제위젯 연동 [클라이언트 키] 를 기준으로 테스트 페이지 생성 후
renderPaymentMethods 를 호출하였으나 응답 메세지가
{
"code": null,
"message": null,
"data": null
}
로 반환되고 있습니다.
신규 가입시 테스트가 온전히 불가능할까요?
18 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
어떤 키를 사용하셨는지 키를 알려주실수 있을까요?
test_ck_ma60RZblrqo4y9M7L9o53wzYWBn1
해당 키 입니다.
발주처에서 사용중이던 계정에서 테스트 클라이언트키를 사용했으나 동일한 문제가 나왔고,
혹시나 싶어 제 계정을 새로 회원가입하여 테스트를 해보아도 동일한 문제가 나왔습니다.
@polaris_yindeng 님 해당 키로 호출 테스트 해봤는데 정상적으로 카드 결제창 로딩됩니다. 다시 확인 부탁드리며, 동일 문제 발생시 orderId도 같이 남겨주세요.
구현을 어떻게 하신적인지 확인부탁드립니다. 구현을 잘못하신것 같은데요.
const clientKey = "test_ck_ma60RZblrqo4y9M7L9o53wzYWBn1";
const generateRandomString = () => window.btoa(Math.random()).slice(0, 20);
const customerKey = generateRandomString();
const paymentWidget = PaymentWidget(clientKey, customerKey) // 회원 결제
const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
'#payment-method',
{
value: 10000,
currency: 'KRW',
country: 'KR',
},
{ variantKey: 'widgetA' }
)
결제위젯 JavaScript SDK 예제 보고 따라한건데 잘못한 부분있으면 지적 감사합니다.
해당 코드 실행하셨을때 JS 콘솔에 에러는 없으셨나요?
그리고 테스트 환경이라 widgetA 라는variant가 없으실겁니다.
{ variantKey: 'DEFAULT'} 로 해보세요.
GET https://api.tosspayments.com/v1/payment-widget/widget-groups/keys?variantKey=DEFAULT 500 (Internal Server Error)
요게 콘솔 로그 입니다.
해당 코드 실행시 devTool 에서 나오는 화면입니다.

방금시도하신거죠?
넵!
저희쪽은 문제가 없는데 혹시 시크릿탭 사용하시나요?
아뇨 일반 탭입니다.
로그상에 말씀하신 오류가 발생한게 확인이 되지 않습니다.
코드에서 사용하신 키가 test_ck_ma60RZblrqo4y9M7L9o53wzYWBn1 이거 맞으신거죠?
네넵 맞습니다.
저도 다른 환경에서 테스트 더 해볼게요
아이고 죄송합니다.
다른환경에서 잘 됩니다....
네 확인감사합니다.
원인 확인해보니 제 실수가 맞습니다.
테스트환경에서 http 헤더정보 변경하는 확장프로그램이 실행중이여서
서버 요청시 헤더정보가 변경되어 넘어갔던 문제였습니다.
문의 확인 감사합니다.
즐거운 하루 보내세요!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.