react 모바일 결제
react를 이용해 웹앱 프로젝트를 진행중 결제 요청을 하면 토스 모바일 결제 앱으로 넘어가 결제를 진행하여 결제가 마무리 된 후 successUrl:
${window.location.origin}/success,로 넘어가 지지 않는데 해결 방법이 있을까요?30 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
우선 몇가지 정리 드릴게요.
결제의 마무리는 인증 / 승인 두개의 절차가 전부 완료 되어야 합니다.
토스 앱으로 넘어가서, 결제수단을 선택하고 이전 앱으로 돌아가기 화면을 보는 모든 단계들을 인증 단계라고 부르고
처음에 결제 시작한 앱으로 돌아가서, successUrl 에서 승인 API 를 호출하는 것이 승인 단계라고 하며
위 두가지 전부 다 완료 되어야 결제가 마무리 되었다, 라고 할수 있습니다.
문의주신 내용을 보면
처음 결제를 시작한 앱에서
토스앱으로는 넘어갔고
그 뒤에 결제 시작한 앱으로 돌아가지 않는다
라고 문의 주시는 게 맞을까요?
넵 맞습니다!
토스앱에서 액션 마무리 하고,
이전앱으로 돌아가라는 화면 확인 하셨고,
그 뒤에 이전 앱으로 이동 하셨나요?
결제 요청후 결제를 진행하고 결제가 마무리되면 successUrl:
${window.location.origin}/success,이 코드를 사용해 localhost:3000/success으로 돌아오도록 해뒀는데https://payment-gateway-sandbox.tosspayments.com/mobile/auth/digital-wallet/TOSSPAY/result 이 화면에 계속 머물러있어요그러니까
토스앱 에서 액션 마무리 하고
이전앱으로 돌아가라는 화면 본 이후에
결제 시작한 앱으로 돌아갔고,
결제 시작한 앱애서 움직임이 없다는 말씀이신가요?
위에서는 토스앱에서 이전 앱으로 돌아가지 않았다고 말씀 주셔서 혼선이 좀 있는데
두개 중 어떤 케이스 이신가요?
넵 맞습니다
아 그
상황에 대해서 동영상 촬영과, 해당 케이스의 주문번호를 공유 주시면 좋을것 같습니다.
알겠습니다
혹시 결제창도 localhost:3000 에서 호출하신게 맞을까요?
https://payment-gateway-sandbox.tosspayments.com/mobile/auth/digital-wallet/TOSSPAY/result 이 화면에 있을때 브라우저 콘솔에 에러는 없는지 확인부탁드립니다.
넵 결제창도 localhost:3000 에서 호출했고 https://payment-gateway-sandbox.tosspayments.com/mobile/auth/digital-wallet/TOSSPAY/result화면에 있을때 콘솔에 에러는 없습니다 동영상 촬영 해서 보여드리겠습니다!
혹시 앱에서 웹뷰로 여시는 건가요?
아뇨아뇨 잡업은 웹으로 하고있습니다 그리고 네이티브로 감쌀생각입니다
현재는 브라우저에서 테스트 중이신거군요.
넵 그렇습니다
네 콘솔쪽하고 같이 영상 찍어서 공유 부탁드립니다.
알겠습니다
작동영상과 콘솔 해당코드 입니다
에뮬레이터에서 하신건가요?
네 그렇습니다
실 기기에서 해보실수 있을까요?
기본적으로 모바일기기에서 휴대폰 번호를 입력해서 결제하는 방식이 일반적인 방시은 아닙니다.
저기서 바로 toss 앱이 떠서 결제를 진행하는게 일반적인 시나리오 라서요.
실 기기라면 실제 모바일에서 말씀이신가요??
네 맞습니다.
아직 배포도 안되있고 로켈서버로 작업중이라 실 기기에서 해볼 수는 없을거같아요ㅠㅠ
에뮬레이터를 사용하지 않고 웹에서 작동하면 정상적으로 결제도 되고 success페이지로 넘어가 지지만 에뮬레이터를 사용하면 위처럼https://payment-gateway-sandbox.tosspayments.com/mobile/auth/digital-wallet/TOSSPAY/result?token=ddc77e574c82453581eb1f85d24c1787ec76ad750f6b4a3c86caa7d68236d35c&status=PAY_APPROVED&orderNo=tviva20230830132438kIqg6&payMethod=TOSS_MONEY&bankCode=011dl 이 화면에 머물러 있습니다
어떻게 해결하는게 좋을까요...
웹에서 정상 작동된다면 에뮬레이터 문제일 가능성이 높습니다.
우선 그냥 두시고 실제 배포후에 실기기에서 테스트 해보시는게 좋을것 같아요.
넵 감사합니다
토스페이는 모바일과 PC 에서 보여지는 결제 시작 페이지가 다르고,
특히 모바일의 경우에는 결제가 시작된 해당 디바이스의 토스앱에서 결제가 진행 되어야 정상 진행 됩니다.
전달주신 케이스처럼 에뮬에서의 진행은 비정상 진행으로 이해해 주시면 될것 같아요.
모바일 케이스의 테스트는 꼭 실기기에서 진행 부탁 드려요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.