결제위젯 사파리에서 에러.
안녕하세요. 결제위젯 v2를 사용하여 개발진행후 홈페이지에서 정상적으로 결제 사용 중
MacOS 사파리 (18.3.1)에서만 신용카드 (BC카드)로 결제 시 페이북으로 결제 후 홈페이지로 화면이 돌아온 뒤 결제 완료 페이지로 이동하지 않습니다.
사파리 브라우저 콘솔을 확인해보니 (영상에서도 확인 가능합니다)
TypeError: undefined is not an object (evaluating 'wispPopWinObj.focus') -> Wallet_mix_layer_VP.js파일에서 발생
Blocked a frame with origin "https://www.spc.or.kr" from accessing a frame with origin "https://payment-gateway-sandbox.tosspayments.com". Protocols, domains, and ports must match.
Unhandled Promise Rejection: Error: 취소되었습니다.
라는 에러가 나옵니다.
제가 알기로는 해당 에러는 origin이 달라서 보안 정책상 차단되는것으로 알고있습니다.
(나머지 에러는 잘 모르겠습니다. Wallet_mix_layer_VP.js에서 발생하는 에러는 Vpay쪽에 문의해본 결과로는 결제 연동 모듈 관련 사항으로 추측된다고 합니다.)
어떤 방식으로 해결해야할지 모르겠어서 문의드립니다.
추가로 구현은 이미지처럼 구현한 후 호출 할 대 widgets.requestPayment를 사용하여 호출하고있습니다.
서버 구성은 JAVA , spring boot 사용중입니다.
해당 맥북에서 크롬을 사용하면 정상적으로 결제가 됩니다. 사파리에서만 이런 증상이 발생하고 있습니다.
(아이폰 사파리에서는 정상적으로 동작합니다.)
혹시 제가 놓친 부분이 있을까요? 확인 부탁드립니다.
12 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
확인 후 안내드리겠습니다.
ㅈㅓ희쪽으로 문의는 처음 주신거죠?
혹시 메일로도 문의하셨었나요?
아 메일로도 하셨었군요
보시면 cors가 저희꺼 외에도 다음 등 모든게 다터지고 있는데요
아마도 해당 html 페이지에서 특정 도메인통신만 가능하도록 하신게 아닌가 싶습니다.
위젯 렌더링하는 페이지의 content-Security-Policy, cross-origin-resource-policy 등을 설정하신게 아닌지 확인 부탁드립니다.
결제 페이지에서는 특정 도메인통신만 가능하게 해놓았습니다.
Cross-Origin-Opener-Policy : same-origin-allow-popups
Cross-Origin-Embedder-Policy : unsafe-none으로 설정해놔서 console창에 cors에러는 없습니다.
추가로 csp 의 경우에는 해당 오류가 발생하는 url을 추가시켜놓은 상태입니다.
어제 안내드렸었는지 정확히 기억이 안나는데요
토스페이먼츠 개발자센터
토스페이먼츠 결제 연동 문서, API, 키, 테스트 내역, 웹훅 등록 등 개발에 필요한 정보와 기능을 확인해 보세요. 결제 연동에 필요한 모든 개발자 도구를 제공해 드립니다.
전달해주신 url에서는 정상적으로 동작합니다.
저희측 서버 설정 문제일 가능성이 높은걸까요?
간헐적으로 도메인 에러가 뜨지 않는 경우에는
js파일에서 에러난 뒤 취소되었습니다. 라는 에러문구가 나옵니다
일단 환경이슈는 아니고, 연동도 특이사항은 없으신 것 같아요
서버 환경이슈로 보이고
비씨카드가 팝업으로 뜨는데 이부분에서 cors등 보안정책에서 막히는것으로 예상됩니다.
- 네트워크 : 이슈 아님 / 저희 페이지는 정상
- 연동 : 이슈 아님 / 팝업 뜨는 건 어떻게 하든 동일함 / 혹시 추가 검증이 필요하면 sandbox코드 그대로 서버에 오려서 테스트 진행
- 서버 : 가장 의심됨
우선 그럼 sandbox 코드를 그래도 서버에서 테스트 진행해보도록 하겠습니다. 감사합니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.