결제연동 테스트 중 문의드립니다.
react 로 만든 웹페이지에 토스페이먼츠 결제연동하기 위해서 작업 중에 있는데요
결제페이지에서 테스트 결제를 진행하면 결제성공 까지 넘어가는데 404 오류가 뜨면서 서버와 연동이 안되는 거 같습니다
그래서 테스트 결제내역에도 표시가 안되구요
이거는 어떻게 해결해야할까요?

19 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
확인하신 결제성공은 인증까지 완료하신걸로 보이구요
결제 승인을 어디로 보내셨는지 엔드포인트 확인부탁드려요
코어 API | 토스페이먼츠 개발자센터
토스페이먼츠 API 엔드포인트(Endpoint)와 객체 정보, 파라미터, 요청 및 응답 예제를 살펴보세요.
여기로 보내셔야합니다.
아하 가이드에 있는 코드 그대로 복붙했는데 여기서 변경해야될 부분이 있는건가요? 엔드포인트르를 어떻게 변경해야될 지 모르겠네요ㅠ
가이드에도 있어요 프론트로 인증결과를 받고 서버에서 승인요청 하시면 되실거에요
https://docs.tosspayments.com/guides/v2/payment-widget/integration
연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.

@김차장 님 콘솔 로그가 보니 프론트엔드에서, 브라운리님 서버로 연결되어야 하는 단계인것 같습니다. (server-to-server PX API 호출 전)
@브라운리 님 Network탭에서 404 난 API호출을 한번 확인해보세요.
귀사 서버에 구현이 된 엔드포인트가 맞는지 확인부탁드립니다.
구현이 안되어있다면, 귀사 서버에서 @김차장 님이 적어주신 엔드포인트로 server-to-server 통신하는 엔드포인트를 만들어주세요.
답변감사합니다! 그런데 저희가 따로 서버를 운영하지는 않는데 프론트엔드에서 서버로 어떻게 연결을 해야할까요? 토스페이먼츠 서버로 보내는거는 안되는거가요?
네 요청시에 시크릿키가 노출이 되기때문에 그러면 안됩니다.
시크릿키가 노출되거나 직접 토스서버와 통신하게되면, 불법적인 이용자(어뷰저라고 칭하겠습니다.)가 요청을 가로채어
귀사의 시크릿키를 훔쳐 결제를 발생시키거나 취소 등의 심각한 문제를 일으킬 수 있습니다.
이런 어뷰저를 방지하기 위해서, 토스 서버와 바로 통신하는건 강력히 지양하고 있으며, 서버를 운영하시는걸 가장 추천드립니다.
그런데 서버를 따로 운영하지 않으신다면, 어떻게 다른 페이지 들에서는 데이터를 가져오시나요?
아하 데이터의 경우, firebase를 사용하고 있는데 그러면 firebase 와 연동을 하면 되는걸까요?
firebase에서 DB를 구축해서 이용중이신가요?
네 맞습니다!
그렇다면, Firebase 요금제만 호환이 되는지 확인하면
충분히 결제 연동이 가능하십니다.
이용하고 계신 요금제가 Blaze 이상 요금제이신가요?
보통 유료로 결제가 되면 Blaze일겁니다.
(무료인 Spark에서는 이용 불가)
아 저희 이용량이 많지않아서 현재 spark 사용하고 있습니다
아,, 그러시군요. Spark에서는 이용이 불가능하시고
서버를 한대 구축하셔야할거에요.
Blaze로 업그레이드 하시면
"Firebase Functions" 라는 기능으로, 저희 문서 참고하셔서 API 호출이 되도록 구성하시면 됩니다.
Blaze이상만 이용하시게 되면, 구글에 토스페이먼츠 Firebase라고 검색하셔서 여러 글들을 참고하시면서 개발하시면 되거든요. (혹은 문서를 직접 보고 만드셔도됩니다.)

아하 넵 친절한 답변 감사합니다! 업그레이드 한 번 해보겠습니다
네네
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.