갑자기 결제창 호출 시 에러가 발생합니다
안녕하세요? 결제창 호출 시payment-widget:1 Uncaught (in promise) Error: 결제수단이 아직 선택되지 않았어요. 결제수단을 선택해 주세요. 콘솔창에 표시됩니다.
고객분이 결제대기 중인 상태라 빠른 답변을 부탁드리겠습니다
감사합니다
47 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
위젯에서, 결제수단을 선택하셨는데도 위 에러가 발생하고 있다는 말씀이신가요?
결제 위젯은 렌더링 된 상태 인가요?
안녕하세요. 위젯창 자체가 뜨지 않고 콘솔에 저 에러가 표시되고 있습니다
위젯렌더링을 안하셨으니 저 에러가 발생하는 것이 정상 입니다.
결제 연동이 정상적으로 완료되지 않으신것 같은데요.
연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.
지금까지 특별한 문제가 없이 처리되는 코드였는데 갑자기 저 에러가 나와서 질문을 드렸습니다.
결제 연동한 사이트 전달 부탁 드려요
MID 도 확인부탁드립니다.
결제사이트는 ntabi.co.kr 이고, mid는 ntabi1sl85입니다
결제 테스트 해보려고 하는데, 결제가 안되고 예약이 되었네요
결제는 어떻게 진행할 수 있을지 설명 해주실 수 있으실까요?
여행사이기 때문에 담당자가 고객분에게 결제요청과 결제페이지 주소를 알려드리면 접속하신 후에 결제를 진행하는 구조입니다
결제페이지에 결제버튼이 있고 그걸 누르면 지금까지는 결제위젯창이 표시되었는데. 갑자기 결제창이 뜨지 않고 말씀드린 에러가 콘솔에 찍히고 있습니다
저희한테도 결제 페이지 주소를 보내주실수 있을까요?
테스트를 하실 수 있는 결제페이지를 알려드리면 될까요?
네 결제페이지 URL 알려주세요.
Ntabi
여행갈 땐 엔타비! 해외자유,패키지 여행, 일일버스투어, 현지 프라이빗 투어, 색다른 경험의 버라이어티팩, 기획전 등 엔타비글로벌과 함께하세요!
외결제0, 01090756799 입니다
아 죄송합니다 외결제7과 01090756799 입니다
그것도 로그인이 안됩니다.
다시 확인 부탁드립니다.
Ntabi
여행갈 땐 엔타비! 해외자유,패키지 여행, 일일버스투어, 현지 프라이빗 투어, 색다른 경험의 버라이어티팩, 기획전 등 엔타비글로벌과 함께하세요!
이 주소로 테스트를 부탁드립니다. 결제할 고객분이 기다리고 계셔서 제가 좀 당황을 해서^^^...
아 지금 되네요.
UI 상으로는 예전도 지금이랑 동일하셨던 건가요?
넵 며칠 전 결제에도 문제가 없었고, 결제연동 코드는 수정한 적이 없습니다
우선 연동하신 내용을 보니 위젯으로 연동하셨는데 연동이 완전히 된상태가 아닌것으로 보입니다.
그전에는 이런 케이스에 저희가 일종의 방어로직으로 그냥 결제창을 띄워드렸었는데, 지금은 그 방어로직은 제거한 상태라서 결제창이 안뜨는 것 같구요.
우선은 해당 MID 에 임시로 방어로직을 다시 적용하도록 하겠습니다.
혹시 @데이타토스중 님이 직접 연동하신 건가요?
네 그렇습니다. 조치감사합니다. 매뉴얼에 나와있는 코드를 사용했고 key는 api방식입니다. 혹시 변경사항이 있는건가요?
위젯 연동하신 코드를 공유해주실수 있을까요?
지금 보면 위젯이 주문서 페이지에 렌더링이 안되고 있습니다.
일단 이런모양의 UI 가 표시 되어야 합니다.
그런데 지금 브라우저에서 보니까
//토스페이먼츠결제(PG)
async pgPay(rNo)
{
/////// Api방식
//const clientKey = key
//고객ID-임의생성가능
const customerKey = 'XXXXXXXX'
// 결제위젯 객체 초기화
const paymentWidget = window.PaymentWidget(clientKey, customerKey); // 회원 결제
//결제수단 랜더링
paymentWidget.renderPaymentMethods('#payment-widget', 결제액);
localStorage.setItem('total_amount',this.eventInfo.payAmt)
//결제창 호출 paymentWidget.requestPayment({ orderId: rNo, orderName: this.eventInfo.spName, successUrl: '성공시 페이지' failUrl: '실패시 페이지', customerEmail: "", customerName: this.eventInfo.payerName, taxFreeAmount: this.eventInfo.payAmt, }) },
//결제창 호출 paymentWidget.requestPayment({ orderId: rNo, orderName: this.eventInfo.spName, successUrl: '성공시 페이지' failUrl: '실패시 페이지', customerEmail: "", customerName: this.eventInfo.payerName, taxFreeAmount: this.eventInfo.payAmt, }) },
이렇게 위젯 렌더링 되는 곳을 display: none 처리 하고 계시네요.
아 그것때문인가요? 그 상태에서도 결제는 문제가 없었거든요
결제팝업창을 끄면 화면에 그 창이 표시되서...none시킨건데 그게 문제일까요?
저게 NONE 이면 고객이 결제수단을 선택할수 없어서 방어로직이 없는 경우 제일처음 말씀하신 그 에러가 발생하는 겁니다.
지금 일반 카드 결제만 하시고 다른 결제수단 (계좌이체나 가상계좌 등) 은 사용안하시는 건가요?
아...일단 위젯창이 팝업으로 뜨고 거기서 결제수단을 선택해서 정상진행이 되어왔기 때문에 크게 생각하지 않았었었습니다. 네 맞습니다 지금은 일반카드결제만 하고 있습니다
정확히는 위젯 창이 뜨는 건 아니고 저희가 제공하는 기본 카드 결제창이 뜬겁니다.
연동을 잘못하셨더라도 결제는 가능하게 방어로직이 적용된 것이었는데, 이렇게 제공해 드렸더니 잘못 연동해서 그대로 사용하시는 경우가 꽤 있더라구요.
그리고 보니주신 코드를 보면 "온라인 결제" 를 눌렀을때 pgPay 를 호출하시는것 같은데요.
아하 그렇군요...
네 맞습니다
해당 페이지가 로딩되면 이부분을 실행해 주시고
/////// Api방식
//const clientKey = key
//고객ID-임의생성가능
const customerKey = 'XXXXXXXX'
// 결제위젯 객체 초기화
const paymentWidget = window.PaymentWidget(clientKey, customerKey); // 회원 결제
//결제수단 랜더링
paymentWidget.renderPaymentMethods('#payment-widget', 결제액);
localStorage.setItem('total_amount',this.eventInfo.payAmt)
"온라인 결제" 를 눌렀을때 이부분을 실행해주시면 됩니다.
//결제창 호출
paymentWidget.requestPayment({
orderId: rNo,
orderName: this.eventInfo.spName,
successUrl: '성공시 페이지'
failUrl: '실패시 페이지',
customerEmail: "",
customerName: this.eventInfo.payerName,
taxFreeAmount: this.eventInfo.payAmt,
})
아 그럼 페이지 로딩 시에 랜더링 부분을 호출하고 버튼클릭하면 위젯을 호출하는 순서로 변경하라는 말씀이시지요?
네 맞습니다.
네 맞습니다.
감사합니다. 말씀대로 수정하고 다시 해본 후에 혹시 문제가 발생하면 다시 질문을 드려도 될까요?
네네
친절하고 자세히 설명해주셔서 감사합니다^^
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
display none삭제하고 위에 전달드린대로 코드 수정하면
이 사진처럼 계좌번호 밑에 위젯 나옵니다.
만약 신용카드만 사용하길 원하신다면 저희 상점관리자에서 다른 결제수단 모두 제외하고 신용카드만 남겨두시면 됩니다.
넵 감사합니다. 바로 적용해보도록 하겠습니다^^
@데이타토스중 님 이부분 가이드 드린대로 수정되신 건지 확인부탁드립니다.