로컬환경 결제시 토스 successurl 보안에러
로컬 환경(http)은 아래와같습니다
프론트주소 : localhost:3001
서버주소 : localhost:3000
저는 successurl을 프론트서버 주소가 아닌 서버 엔드포인트로 지정 > 엔드포인트에서 최종적으로 redirect하는방식으로 구현을했는데
successurl이 서버의 api 엔드포인트로 도달을 못합니다.
successUrl:
${process.env.NEXT_PUBLIC_API_URL}/api엔드포인트
보안에러는 아래처럼나옵니다.
Unsafe attempt to initiate navigation for frame with origin 'http://localhost:3001' from frame with URL 'https://payment-gateway-sandbox.tosspayments.com/pc/direct?token=78fc63197cfb4d008e00b1c905815eb1168a953a65f84e129fd8765857347ddb&authType=KAKAOPAY&cardCode=KAKAOPAY>id=a2509148sMEkjQgsX5H44SqD4XgkkcUqxkL4Ggv'. The frame attempting navigation is targeting its top-level window, but is neither same-origin with its target nor has it received a user gesture
실제 서버환경은 (https) 로 프론트/서버 도메인은 같고 nginx로 포트만 3001,3000 사용합니다.19 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
운영환경에서 테스트해보니까 되네요
successUrl과 원래 페이지는 오리진이 같아야 합니다.
포트가 다르다면, 불가합니다. 물론 운영은 포트가 같아지니까 문제가 없겠네요.
FE(3001포트)에서 결제 중입니다 로딩페이지를 만든다음, BE(3000포트)에 API call하는 방식은 어떨까요?
운영서버는 nginx 리버스프록시를 사용중(3001 프론트서버, 3000 api서버)
nginx 설정상 도메인/api/ 경로로오는건 내부 3000포트 (서버포트)로 라우팅을해줘서
successUrl에 3000번(실제서버포트)를 명시하지않고
window.location.origin + "/api/... 하니까 일단 잘됩니다.
근데 로컬에선 일단 포트가달라서 안되니까 테스트가좀 불편하긴하네요
3000포트에서 결제 중입니다 로딩페이지를 만든다음, 3001포트에 API call하는 방식은 어떨까요?
-> 안되면 이렇게하려고했는데. 일단되니깐그대로갈까합니다.
보통은 "FE(3001포트)에서 결제 중입니다 로딩페이지를 만든다음, BE(3000포트)에 API call하는 방식은 어떨까요?" 이렇게 하세요
깃허브에 토스 샘플도 그렇게되어있구요.
그럼바꾸는게 낫나요? 저는 그 가이드보고 3번 엔드포인트가 가장 보앙상 좋을거같아서 그렇게한거긴한데
로딩쪽으로 다시 해봐야겟네요 사용자측면에서도 그게좀낫겟네요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
로딩페이지를 클라이언트페이지(use client)로 만들고 리액트 훅에서 confirm요청을 하나요?
*서버페이지로 만들고 서버로직이 끝나면 리다이렉트방식을쓰면 화면에 아무것도 안보이니까요
맞아요 정확하십니다
use client로 만들고 react query 를 쓰거나
useeffect안에 fetch/axios 호출하는게 일반적이에요
혹시 이방법도 괜찮은건지? 제가 안해봐서 모르겠지만
1) 서버페이지로 만들고 (서버에서 로직을 수행함과 동시에 클라이언트에 로딩을 보여주는방법인데요
react에 보면 suspense같은것이 있던데(data fetch중 미리 보여줄화면) -> 이것을 '결제중입니다.' 이런식으로 표시하고
실제 서버로직끝나면 리다이렉트하는방식 이게 가능한건지 모르겠네요.
근데 confirm 엔드포인트가 웹페이지에 노출되는게 싫어서요
(next server-action을 쓰면되지만, 중간에 post요청이 한번 거치니까요)
네 그렇게하셔도 돼요
네이버페이로 pc결제할때 내가등록한 카드리스트가 안보이는지 알수있을까요? 네이버로그인도 되어있고, 모바일에서는 카드 리스트가 잘 나오네요
아 모바일도 안보이네요. 네이버앱에서 카드 등록했는데. 시간이 좀 걸리는건지
개발계는 원래 동기화 안됩니다
개발계는 카드결제는 어렵구요. 포인트결제 해야합니다.
https://developers.pay.naver.com/user/sand-box/paypoint -> 로그인 후 “테스트 포인트 충전” 메뉴로 50만원 받으셔서 포인트 결제하세요
간헐적으로 ARS 인증 창이나 아이디/비밀번호 입력 창이 나올 수 있는데 이 경우 네이버 내부 이슈로 개발계 지원이 잠시 중단되는 경우입니다
네이버페이 개발자센터
네이버페이 개발자센터를 통해 쉽고 빠르게 결제 연동을 지원해 드립니다.
그렇군요 감사합니다
payment 객체 receipt.url은 실제 라이브키에서만 들어갈수있는건가요?
이걸 고객에게 링크로 볼수있는 기능을 만들건데 영수증만 보이는건지 아니면 고객이 해당 링크에서 결제취소하고 그런것도 가능한건지 궁금합니다
영수증만 보이구요. 라이브키에서만 보여요
* 운영에서만 보입니다.
* 영수증만 출력됩니다. 고객이 해당링크에서 할수있는것은 영수증확인과 출력 , 링크공유만 가능합니다.
네 그러면
receipt.url 에 간편결제, 카드결제, 계좌이체 등 영수증정보이고
그럼 계좌이체인경우 현금영수증 url은 별도로 있나요?
현금영수증 정보는 cashReceipt.receiptUrl 을 하면 될지요
그럼 결제수단 확인하고 cashReceipt.receiptUrl 을 추가로 넣어주는 그런 로직이 필요할지
계좌이체인경우 현금영수증 발행시 . cashReceipt.receiptUrl 로도 출력됩니다.
계좌이체결제시 현금영수증을 미발행한다면 cashReceipt 객체가 NULL로 응답됩니다.