계좌이체 추가
const clientKey = '@@@';
const customerKey = '@@';
const paymentWidget = PaymentWidget(clientKey, customerKey); // 결제위젯 초기화
paymentWidget.renderPaymentMethods('#payment-method', totalPrice);
위와 같이 토스페이먼츠 위젯을 호출하고 있는데 항상 카드 결제에 대한 팝업만 뜨고 있습니다.
test_gck 로 시작하는 키를 사용하면 variantKey 정보를 추가해서 커스텀 위젯을 넣을수 있는것으로 보이긴 하는데
기존 사용하던 카드 위젯에 계좌이체만 추가된 버전을 사용할 수는 없나요?
현재는 test_ck로 시작하는 키를 사용중입니다.
36 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
현재 뜨고 있는 위젯입니다

음..
현재상황을 영상으로 한번 보여주실 수 있을까요?
녹화해서 업로드 하면 되나요?
네. 저희가 접근가능한 홈페이지가 있으면 공유해주셔도 좋고요
라이펫ㅣ세상에서 가장 쉬운 반려동물 건강체크
MBTI 테스트보다 쉽지만 10개 부위의 건강상태를 확인할 수 있어요!
경로 안내바랍니다.
가입이 필요하긴한데..
💡 정보 제출
민감 정보를 안전하게 제출해주세요
테스트 계정제공가능할까요
ID/PW를 오픈된곳에 보내드리기가 좀 그런데
위에 정보제출 버튼 눌러서 제출해주시면
저희에게 private하게 옵니다
넵 전송했습니다
개발자이신가요?
네네

위젯 render하기 위한 영역이
굉장히 dom 깊숙한 곳에 display:none;처리되어있습니다.
아 네네 저기 render 되고는 있는데 그럼 지금 뜨고 있는 토스 결제 팝업은 어디서 뜨는건가요?
저건 위젯이 어떤한 영향으로든 render가 안되었을 때
저희가 결제전화율을 높여드리기 위해서
결제창을 fallback형태로 띄워드리는거에요
정상적인 접근이 아닙니다.
아.. 그럼 원래 결제창을 저희가 직접 구성하는게 정상적인 플로우인건가요?
아니요


왼쪽 : 결제창
오른쪽 : 위젯

위젯은 흔히 적립금 아래 부분에 결제수단 선택하는 영역을 저희가 직접 그려드리는 겁니다.
결제수단을 주문서에서 선택한다음에 결제하기를 누르는 방식이에요
결제창으로 가면 새창으로 넘어가나요?
아니요 모바일 외에는 modal 형태로 뜹니다.
토스페이먼츠 개발자센터
토스페이먼츠 결제 연동 문서, API, 키, 테스트 내역, 웹훅 등록 등 개발에 필요한 정보와 기능을 확인해 보세요. 결제 연동에 필요한 모든 개발자 도구를 제공해 드립니다.
여기서 확인바랍니다.
결제창 방식으로 적용하고 싶었던건데 설정이 잘못된게 있을까요?
그럼 이걸 보고 연동해주셔야하는데요.
결제창도 결국은 카드 /계좌 가상계좌등 뭘로할지 파라미터로 넘겨줘야해요
그럼 고객이 선택하는 화면을 만들어줘야하고요
아 그렇군요 만든게 다르긴 하네요
우선 수정 작업해보겠습니다
modal에서 결제수단도 모두선택하고 싶으면 위젯 활용해서 만든 인프런 한번 참고바랍니다.
네 감사합니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.