emewjin•11mo ago

토스위젯 커스텀 결제수단 추가 시 customRequest 이벤트 콜백에서 키가 undefined입니다.

안녕하세요 이전에 '평생교육바우처'를 커스텀 결제수단으로 추가한 적 있고 이번에 '해외카드'를 커스텀 결제수단으로 추가했습니다. https://docs.tosspayments.com/reference/widget-sdk#on%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BD%9C%EB%B0%B1 위 문서의 customRequest 이벤트를 잡아서 콜백함수를 실행, 콜백함수에서는 인자로 넘어오는 key를 콘솔 로그에 찍게 해두었습니다. 그런데 '평생교육바우처'는 키가 정상적으로 찍히는데 새로추가한 '해외카드'는 안 찍혀서 다른 커스텀 결제수단도 추가해보았지만 역시 찍히지 않았습니다. 평생교육바우처만 콜백이 실행되고 다른 두 커스텀 결제수단은 콜백이 아예 실행되지 않는거 같아요. 혹시 무엇을 확인해봐야할까요?

결제위젯 JavaScript SDK | 토스페이먼츠 개발자센터

결제위젯 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

20 Replies

토스페이먼츠 BOT•11mo ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

emewjin•11mo ago

tossWidgetPaymentMethods.on(
    'customRequest',
    (paymentMethodKey) => {
      console.log('paymentMethodKey', paymentMethodKey);
    }
  );

tossWidgetPaymentMethods.on(
    'customRequest',
    (paymentMethodKey) => {
      console.log('paymentMethodKey', paymentMethodKey);
    }
  );

사용한 코드입니다. 이벤트가 아예 안 울리는거 같아요

이실장•11mo ago

확인 후 바로 안내드리겠습니다

paymentMethodsWidget.on('customPaymentMethodSelect', paymentMethodKey => {
         console.log(paymentMethodKey)
})

paymentMethodsWidget.on('customPaymentMethodSelect', paymentMethodKey => {
         console.log(paymentMethodKey)
})

이실장•11mo ago

이렇게 해보시겠어요? customRequest는 간편결제 직연동을 추가했을 때 사용되는 이벤트이며 https://docs.tosspayments.com/guides/payment-widget/pro/custom#선택한-결제수단-확인하기 위에 2개 이벤트를 사용해주셔야합니다.

커스텀 결제수단·직연동 추가하기 | 토스페이먼츠 개발자센터

토스페이먼츠가 지원하지 않는 결제수단(평생교육바우처, 사내 포인트 등)을 이용하거나 간편결제를 결제위젯에 직연동하고 싶을 때 커스텀 결제수단·직연동 기능을 사용하세요.

이실장•11mo ago

docs는 확인해보고 보완해보겠습니다.

emewjin•11mo ago

고객이 커스텀 결제수단 또는 간편결제 직연동을 선택하고 requestPayment()로 결제를 요청하면 customRequest 이벤트가 수신되어 콜백을 실행합니다.

이 내용이 잘못되었다는 말씀이시죠?

이실장•11mo ago

아 제가 질문을 잘못이해했군요. 질문주신 내용도 추가로 확인해볼게요 위에 설명도 추가 보완해서 곧 안내드리겠습니다. 우선 customRequest 이벤트는 requestPayment 이벤트(일반적으로 결제하기 버튼 클릭) 발생 시 돌려드리는데 위와 같이 이해하신게 맞을까요?

emewjin•11mo ago

네네 커스텀 결제수단 선택후, requestPayment 메서드 실행시, customRequest 이벤트가 울리는 것으로 이해했습니다. 평생교육바우처도 그렇게 구현해두었구요 그런데 두번째 커스텀 수단을 추가한 이후로는, 해당 커스텀 수단들로 customRequest 이벤트가 울리지않아서 첫번째 등록한 커스텀 수단만 customRequest 이벤트를 울리게 작동하는거 같다는 의심이 들어서요. 첫번째 등록한 커스텀 수단을 위젯 내에서 모두 삭제해봤음에도 해당 현상이 지속되어서 삭제한 것이 삭제가 진짜 된 것이 아닌 거 같다는 생각도 추가로 들었구요

이실장•11mo ago

파일 한번 local에서 실행해보실 수 있을까요?

emewjin•11mo ago

지금 계속 로컬 환경에서 실행해보고 있었습니다. 다시 시도해보라는 말씀이시죠?

이실장•11mo ago

귀사 채널로 파일한번 전달드렸습니다. 제가 확인했을 때는 정상 동작해서 확인하기 위함입니다.

emewjin•11mo ago

아 네 확인해보겠습니다! https://js.tosspayments.com/v1/payment-widget 요거 메이저 버전 1인거 같은데 "@tosspayments/payment-widget-sdk" 패키지 0.10.0 버전과 같은 걸까요?

이실장•11mo ago

npm 으로 확인 중이시군요.! npm 에서도 이상없는지 바로 확인 후 공유드리겠ㅅ브니다. (js sdk script 는 항상 최신버전)

emewjin•11mo ago

넵넵 customPaymentMethodSelect 이벤트는 잘 울리는데 customRequest 이벤트만 그러네요

이실장•11mo ago

REQUEST_PAYMENT 들어온 로그가 처음에 정상적으로 응답나간 건 1번 밖에 없는데요 혹시 결제하기 버튼 클릭시 reqeustPayment외 다른 로직도 있을까요 ?

이실장•11mo ago

추가로 아래 이벤트도 못받는지 확인 가능할까요? https://docs.tosspayments.com/guides/payment-widget/pro/custom#선택한-결제수단-확인하기

커스텀 결제수단·직연동 추가하기 | 토스페이먼츠 개발자센터

emewjin•11mo ago

@이실장 말씀주신 이벤트는 정상적으로 울립니다

이실장•11mo ago

우선 원문의건은 requestPayment가 안들어와 해당 이벤트도 안나간 것으로 보여집니다.

emewjin•11mo ago

아,, 제가 결제하기 버튼 클릭 이벤트 울릴 때로 조건을 착각하고있었네요 ㅠㅠ;; 죄송합니다

토스페이먼츠 BOT•11mo ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.