위젯 v1) 결제화면에 무이자 선택상자가 표시되지 않다가, requestPayment 호출 시 무이자 선택상자가 노출됩니다.
제목과 동일하게 loadPaymentWidget 으로 렌더링 시에는 카드 선택상자만 표시됩니다.
requestPayment 호출하면 표시됩니다....
첨부파일 두 번째 이미지는 카드사 결제폼을 닫고 나서 보여지는 화면입니다.
첨부파일 두 번째 이미지는 카드사 결제폼을 닫고 나서 보여지는 화면입니다.


31 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
카드사 선택 이벤트 처리하는 코드가 본 페이지와 충돌나는 부분이 있는 것 같은데요... onchange 이벤트에서 참조하는 아이디값이나 클래스 값을 알면 확인해볼 수 있을 것 같습니다.
v2 로 연동 중 이신가요 v1 으로 연동 중 이신가요?
v1 이신거죠?
v1 이면 처음 결제위젯 DOM 설정할때 금액을 같이 명시하는데요
처음 설정한 금액은 얼마인가요?
updateAmount 를 requestPayment 수행할때 같이 묶어서 하고 있으신가요?
1000 입니다.
아
초기 금액이 적어서 개월선택폼이 안 나오는거군요
updateamount 는 가격변경이 필요한경우 바로 호출해 주셔야 합니다.
네...
한 가지 더 질문드립니다. 본문 페이지에서 신용카드와 계좌이체가 분리되어 있는데요... 위젯은 두개 생성해뒀고.. 결제수단을 선택할 때 동적으로 위젯을 변경하고 싶은데요..
let widgetName = (this.model.paytype == 'card') ? 'DEFAULT' : 'widget-real'
alert(TOSSKEY)
alert(widgetName)
loadPaymentWidget(TOSSKEY, this.tossCustomerKey).then(pw => {
this.paymentWidget = pw;
this.paymentMethodsWidget = this.paymentWidget.renderPaymentMethods(
'#toss-payment',
{
value: 1000,
currency: 'KRW',
country: 'KR',
variantKey: widgetName,
},
)
}) // 회원 결제
한페이지에 위젯 2개를 사용하시면 안됩니다.
별도로 생성해야 하는거군요
.UI 를 봐서는 2개를 사용하실 필요가 없어 보이는데요.
동적으로 생성할 순 없는거고..
신용카드와 계좌이체가 본문 페이지에 선택버튼으로 표시되거든요
계좌이체를 한화면에 표시 하시기는 어려우신가요?
뭐 기획 자체가 그래서 어쩔 수 없네요.. 암튼 위젯 두 개 사용하면 된다니 해결은 된 것 같습니다. 감사합니다.
아뇨 2개 사용하시면 안된다고 말씀드린거에요.
앗....
지금 올려주신 코드처럼 구현하시면 될것같은데 혹시 문제가 있으신가요?
네... 위젯도 생성했고... 선택 버튼에 따라 variantKey 값도 정상적으로 확인되는데



위젯은 디폴트만 표시됩니다...
그래서 여쭤본겁니다.
위젯을 초기화 해주는 도구가 필요한 게 아닌가 싶은데요
loadPaymentWidget 전에
this.paymentWidget.detroy() 해보실수 있을까요?
TypeError: this.paymentWidget.destroy is not a function
at VueComponent.paymentInit (cjs.js?!./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/order/service/PricingezHelpForm.vue?vue&type=script&lang=js&:473:58)
destroy 메소드는 있는 것 같은데... not a function 이네요
문제는 variantkey가 계좌이체 위젯인데도 default 위젯이 표시되는 게 문제네요.. 일단 좀 더 찾아봐야겠습니다. ㅠㅠ
원래 동적이나 한페이지에 2개의 위젯을 렌더링 하시는걸 감안해서 결제위젯이 만들어진게 아니다 보니 좀 애매하군요.
네 알겠습니다. 일단 하나만 계좌이체 위젯으로 띄워봐야겠습니다. 감사합니다.
과장님! 혹시 저희 아이디 알려드리면 위젯 키 설정이 되어 있는지 확인이 되실까요?
뭐가 잘못된건지 특정 피씨에서만 키가 확인이 됩니다.
ezhelpqgv5
PC 에서 키가 확인이 안된다는게 무슨 말씀 이실까요?
묘하게도 어떤 한 피씨에서만 클라이언트 위젯 키가 보여집니다.

위젯 키가 정상적으로 등록 되어 있는지 확인이 필요한거구요..
그 PC에 로그인 하신분만 ezhelpqgv5 상점에 권한이 있으신것 같네요.
양X민, 송X근 님만 위젯키를 보실수 있을겁니다.
아..... 저도 안 보입니다.
양X민 님 이 관리자라서 사용하시는 계정에 권한 주셔야 합니다.
네 알겠습니다. 확인해보겠습니다.

아 왼쪽에 "개발연동 체험 상점" 클릭하시면 다른거 안뜨시나요?
확인했습니다. 그냥 텍스트인줄 알았습니다.
감사합니다.
긴 시간 수고하셨어요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.