결제위젯 연동 관련 문의 (키인결제)
공식문서대로
paymentWidget.requestPayment({
orderId: document.getElementById("orderId").value, // 주문 ID
orderName: document.getElementById("itemNm").value, // 주문명
successUrl: window.location.origin+"/app/sd/od/success.jsp", // 결제에 성공하면 이동하는 페이지
failUrl: window.location.origin+"/app/sd/od/fail.jsp", // 결제에 실패하면 이동하는 페이지
customerEmail: "",
customerName: document.getElementById("custNm").value
});
위와 같이 위젯을 호출했으며, 결제팝업까지 정상적으로 뜹니다.
이후에 정보 입력후 결제버튼을 누르면 첨부해드린 이미지와 같이
1. Unsafe attempt to initiate navigation for frame with origin ' 로컬주소' from frame with URL ' 'https://api.tosspayments.com/proxy/pages/setup/test_ck_mnRQoOaPz8LeQ0nEbxN3y47BMw6v/jPR7DvYpNk6bJXmgo28eDpoymKDkJWrLAnGKWx4qMl91aEwB?x-tosspayments-global-trace-id=a231019uGrc3V1PkC48IgQQpViOgmVEiv3eIIYm' . The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener. 오류와
2. Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to ' http://주소/success.jsp?paymentType=KEYIN&orderId=202301011234&paymentKey=k2WNa0EMg4Gv6LjeKD8a1vgEO4Mje8wYxAdXy19qpobJmB7P&amount=1'
총 2개의 오류가 뜨며 결제위젯은 무한로딩상태입니다.
POSTMAN에서 2번에서 나온 주소를 보내면 정상적으로 반환되는데 어느부분이 문제인지 찾지 못했습니다.
20 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
테스트 클라이언트키 : test_ck_mnRQoOaPz8LeQ0nEbxN3y47BMw6v
MID : kvp_dwekcm
입니다.
해당 URL을 POSTMAN에서 실행했을때의 반환값입니다.
결제창을 띄우는 URL 하고 SuccessURL 의 URL 이 다르신것 같습니다.
만약 다르지 않으시다면, iframe 이나 frame 안의 페이지에서 결제창을 여시는건 아닌지 확인부탁드립니다.
화면단의 경우에 솔루션을 사용중이라 팝업을 띄운후 임배디드앱을 호출해서 html을 띄운뒤 해당 팝업에서 결제를 진행하고있습니다. 혹시 이런경우에는 연동방식이 다를까요?
팝업에서 결제를 진행하고 successUrl로 돌아올때 도메인 주소가 다른가요?
아뇨 따로 도메인이 다르지 않습니다.
솔루션 특성상 페이지를 이동하거나할때 URL은 도메인.com으로 고정되어있고, 내부적으로 파라미터를 호출하면서 페이지가 변경되는 로직으로 운영하고있습니다.
해당 html에서는
successUrl: window.location.origin+"/app/sd/od/success.jsp" 으로 successURL을 호출하고있습니다.
지금 서비스는 구모듈로 구성되어있는데 현재 임배디드 앱에 jsp파일 하나에서 결제팝업 띄운후 바로 리턴을 받고있습니다.
웹브라우저 한계 때문에 신모듈로 전환중인데, 신모듈의 경우 html,jsp2개 이렇게 나눠져있어서 혹시 이것 때문에 발생하는 문제인가 싶기도하네요..
호출하는 주소가 http인거죠?
네 맞습니다
일단 해당 이슈는 CORS 때문으로 보입니다.
paymentWidget.requestPayment({ <= 이 부분에
windowTarget: self 이걸 추가해서 호출해보시겠어요?
말씀하신대로 추가했는데 이번에는 결제하기를 누르면 카드입력창까지 못가고 해당 오류가 뜨면서 넘어가지못하네요
해당문제는 windowTarget : "self" 로 하면 해결되긴하는데 이렇게 넘겨도 카드정보 입력후 맨처음 오류가 그대로 발생하네요.. 혹시 방화벽문제일수도있을까요?
방화벽 문제는 아니고 CORS 이슈인데요. 가맹점 개발 상황에 따라 증상이 조금씩 다를 수 있습니다.
http 주소인 경우는 ssl 인증서를 적용하여 https 프로토콜을 사용하시는게 확실합니다.
결제창에서 CORS 대응하기
콘솔창에서 이런 에러 만나본 적 있으시죠? 이번 아티클에서는 CORS를 알아보고 토스페이먼츠 결제창에서 CORS 에러를 만났을 때 해결하는 방법도 알아봅니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요. 해당 페이지 참고해서 해결하고있는데, 기존 문제가 발생하던 코드중에
Unsafe attempt to initiate navigation for frame with origin 'http://IP:8080' from frame with URL 'https://api.tosspayments.com/proxy/pages/setup/test_ck_mnRQoOaPz8LeQ0nEbxN3y47BMw6v/pd12AjJexmnRQoOaPz8Lxxn29DQe0v8y47BMw6vl0gkYqDNE?x-tosspayments-global-trace-id=a2310200fRtxNRjoIGS2rB5FFheIR3WjnDOGEw1'. The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.
여기서 CORS문제가 발생하고있는것은 어제 문의로 확인했습니다만, 뒤에 toss api호출된 주소를 찍어봤는데
위와 같이 필수 파라미터가 누락되었다고 반환되더라구요..!
혹시 이부분은 어느부분이 문제인지 알 수 있을까요?
해당 이슈발생한 주문번호나 paymentKey 남겨주시면 확인해보겠습니다.
paymentKey는 y0E4Dv5qpMGjLJoQ1aVZb6oYpxnN2lVw6KYe2RNgOWznZb7B
입니다. 현재 CORS 문제로 화면단으로는 못받아오고있고 (postman상에서는 결제실패 - 카드번호 반환되는것 확인했습니다.)
결제요청을 누르면 총 2개의 오류가 발생합니다. 첫번째 오류가 방금 문의드린 https://api.tosspayments.com/proxy/pages/setup ~ 이 부분입니다.
결제요청을 누르면 총 2개의 오류가 발생합니다. 첫번째 오류가 방금 문의드린 https://api.tosspayments.com/proxy/pages/setup ~ 이 부분입니다.
최소 금액을 1로 하시면 안됩니다. 100원 이상으로 해주세요.
그리고 위에건 직접 postman으로 호출하신 것 같은데 실제 가맹점에서 호출 요청하는게 아니라 내부 로직입니다. 별개라고 생각해주시면 됩니다.
감사합니다 10000원으로 요청해도 동일한 오류가 뜨는데 이건 CORS쪽 해결하면 같이 해결되는 부분일까요?