네이버페이 결제 후 토스 페이먼츠 화면 UI/UX 관련 문의
안녕하세요,
토스페이먼츠 연동 과정 중 UI/UX 관련하여 문의드립니다. 현재 네이버페이 결제 연동 시 다음과 같은 흐름으로 동작하고 있습니다: 1. 사용자가 결제를 시도하면 토스페이먼츠 결제창(팝업)이 열립니다.
2. 팝업 내에서 네이버페이 결제창이 다시 팝업 형태로 열립니다.
3. 네이버페이에서 결제를 완료하면 자동으로 닫히고, 다시 토스페이먼츠 결제창으로 돌아옵니다.
4. 토스페이먼츠 결제창에서 결제 결과를 처리한 뒤 팝업이 닫힙니다.
5. 팝업이 닫히면 저희 서비스 화면으로 돌아오게 됩니다. 문제는 3 → 4 단계, 즉 네이버페이 결제 팝업이 닫히고
토스페이먼츠 결제창으로 복귀하는 시점입니다. 이 구간에서 결제 처리가 내부적으로 진행되고 있음에도 불구하고,
토스페이먼츠 결제창에는 아무런 UI 변화 없이 정지된 것처럼 보입니다.
결제 결과를 처리 중임을 안내하는 로딩 스피너 또는 상태 메시지가 표시된다면
사용자 혼란을 줄일 수 있을 것으로 보입니다. 실제 흐름은 첨부드린 동영상을 참고 부탁드립니다. 혹시 이 구간에서 저희 쪽에서 별도로 처리해야 할 부분이 있는지,
또는 향후 개선 계획이 있는지 확인 부탁드립니다. 감사합니다.
토스페이먼츠 연동 과정 중 UI/UX 관련하여 문의드립니다. 현재 네이버페이 결제 연동 시 다음과 같은 흐름으로 동작하고 있습니다: 1. 사용자가 결제를 시도하면 토스페이먼츠 결제창(팝업)이 열립니다.
2. 팝업 내에서 네이버페이 결제창이 다시 팝업 형태로 열립니다.
3. 네이버페이에서 결제를 완료하면 자동으로 닫히고, 다시 토스페이먼츠 결제창으로 돌아옵니다.
4. 토스페이먼츠 결제창에서 결제 결과를 처리한 뒤 팝업이 닫힙니다.
5. 팝업이 닫히면 저희 서비스 화면으로 돌아오게 됩니다. 문제는 3 → 4 단계, 즉 네이버페이 결제 팝업이 닫히고
토스페이먼츠 결제창으로 복귀하는 시점입니다. 이 구간에서 결제 처리가 내부적으로 진행되고 있음에도 불구하고,
토스페이먼츠 결제창에는 아무런 UI 변화 없이 정지된 것처럼 보입니다.
결제 결과를 처리 중임을 안내하는 로딩 스피너 또는 상태 메시지가 표시된다면
사용자 혼란을 줄일 수 있을 것으로 보입니다. 실제 흐름은 첨부드린 동영상을 참고 부탁드립니다. 혹시 이 구간에서 저희 쪽에서 별도로 처리해야 할 부분이 있는지,
또는 향후 개선 계획이 있는지 확인 부탁드립니다. 감사합니다.
29 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
이 구간에서 결제 처리가 내부적으로 진행되고 있음에도 불구하고,내부적으로 진행한다는게 어떤 말씀이신가요
영상에서 18초쯤에 토스 페이먼츠 화면인데, 결제 진행 중이지만 화면 상에는 결제 전과 후에 바뀌는 것이 없어서요
네 원래 successUrl로 이동해야합니다.
바로 이동해야하는데
안하나요?
영상 확인 부탁드립니다
영상확인했습니다
successURL 로 이동은 하는데 그 중간에 UI 상에서 진행중이라는 표시가 필요한것 같다는 내용으로 이해 됩니다. 맞을까요?
네 맞습니다
successUrl로 이동은 정상적으로 될까요?
네, 결제는 정상적으로 처리되어서 결제 내역도 잘 확인되고 있습니다.
다만 UI상으로는 네이버페이 결제 완료 후 토스페이먼츠 창으로 돌아오는 과정에서
'결제하기 전 단계(다음 버튼을 누르는 화면)'가 잠깐 다시 노출되는 현상이 있어
사용자 입장에서 결제가 제대로 되었는지 혼란스러울 수 있는 상황입니다.
다만 UI상으로는 네이버페이 결제 완료 후 토스페이먼츠 창으로 돌아오는 과정에서
'결제하기 전 단계(다음 버튼을 누르는 화면)'가 잠깐 다시 노출되는 현상이 있어
사용자 입장에서 결제가 제대로 되었는지 혼란스러울 수 있는 상황입니다.
일단 구현 방식을 좀 확실히 확인하려고 합니다.
successUrl로 이동하는 부분이 영상에 안잡혀서요
결제처리를 promise로 받아서하시나요?
아뇨 successUrl로 이동하도록 사용 중인데, successUrl로 이동하면 바로 팝업이 닫히도록 설정되어 있습니다
그럼 지금 결제 자체는 문제 없이 동작하고 있으신 거죠?
프로그레스 표시만 안되시는 거구요.
네네
영상으로 보기에 일반적인 다른 가맹점보다 저 화면이 더 오래 표시 되는 것 같습니다. 저희쪽에서 프로그래스바 처리가 가능할지 확인해 보긴 할텐데요.
successURL 로딩 속도가 느려서(내부 로직 처리가 많으시다거나) 유난히 더 부자연스럽게 보이시는 것 같습니다.
successURL 로딩을 더 빠르게 처리해 보시면 좋을것 같습니다.
영상 기준으로 설명드리면 저희는 17초에 네이버 페이 창 닫히는 시점에 이미 successURL 을 호출해 드렸을거에요.
거기서 실제 창 닫히는 20초까지는 구현하신 successURL 이 로딩되는데 걸리는 시간입니다.
successURL 에서 뭔가 처리하시는 게 있다면 이부분을 분리해서 successURL 은 일단 응답한후에 비동기로 처리 하시는 방식으로 구현하시는게 좋을것 같습니다.
successUrl 에서 토스에 승인 요청(https://api.tosspayments.com/v1/payments/confirm) 을 보내는 것과 처리 결과를 저장하는 것 외에 별 다른 로직은 없는데, 로딩을 더 빠르게 처리하는 것은 어려울 것 같습니다. 프로그레스 바 처리 가능 여부 확인 부탁드립니다
프로그레스바 처리여부는 지원되더라도 빠른 시간내 처리 가능 한 부분이 아닙니다.
successUrl 이동까지 3초 걸리는 상황에 대해서도 한번 확인을 해보셔야할 것 같아요.
현재까지 해당 현상에 대해서는 전혀 문의가 없었는데요. 저희도 방금 내부적으로 여러번 테스트해본 결과, 닫히자마자 바로 successUrl로 이동하기 때문에 크게 느낄수 없는 부분입니다.
일반적인 경우에는, redirect가 되기 때문에 successUrl 로딩이 완료되지 않아도 화면이 사라져 크게 느끼지 못하는 부분입니다.
다만 팝업으로 이용하시다보니 이 부분이 체감되는 거로 보시면 될거 같습니다.
저도 간단히 팝업으로 샘플을 만들어서 돌려보니 약간 1~2초 정도 딜레이가 있네요.
successUrl 을 새로 만드셔서 에는 결제가 진행중입니다 만 표시하시고, 이페이지가 로딩된후에 지금 실제 successUrl 로 자동 redirect 를 걸어주시면 될겁니다.
저희가 수정하는건 이실장님 말씀대로 시간이 오래 걸릴수 있어서요.
팝업에서 successUrl로 parent가 이동하나요?
아뇨, 일반적인 연동방식에서 말씀드린겁니다 !
일반적인 연동시에는 창 자체가 리다이렉트 하잖아요. 그러다보니 화면이 백화가 되면서
자연스럽게 유저는 '로딩 중이구나' 로 인지하게 돼요.
하지만 팝업으로 이용하면, redirectUrl에서 팝업을 닫기때문에...
지금 shpark님의 상황이 발생하게 됩니다.
토스페이먼츠에서 제공하는 샘플 예제(
결제 성공 후 바로 해당 HTML로 이동한 뒤, 클라이언트 측에서 서버로 요청을 보내
승인 여부를 처리하고 있습니다.
(참고: https://github.com/tosspayments/tosspayments-sample/blob/main/spring-javascript/src/main/resources/templates/payment/success.html) 반면, 저희 서비스에서는 결제 완료 후
승인 여부를 처리한 뒤, 그 결과에 따라 최종 응답을 내려주는 방식으로 구성되어 있습니다.
이 구조의 차이 때문에 네이버페이 팝업 종료 후
토스페이먼츠 창이 잠깐 '결제 전 화면'으로 되돌아가는 듯한 UI 문제가 발생하는 것으로 보입니다.
success.html)에서는결제 성공 후 바로 해당 HTML로 이동한 뒤, 클라이언트 측에서 서버로 요청을 보내
승인 여부를 처리하고 있습니다.
(참고: https://github.com/tosspayments/tosspayments-sample/blob/main/spring-javascript/src/main/resources/templates/payment/success.html) 반면, 저희 서비스에서는 결제 완료 후
successUrl 서버가 먼저 요청을 받아승인 여부를 처리한 뒤, 그 결과에 따라 최종 응답을 내려주는 방식으로 구성되어 있습니다.
이 구조의 차이 때문에 네이버페이 팝업 종료 후
토스페이먼츠 창이 잠깐 '결제 전 화면'으로 되돌아가는 듯한 UI 문제가 발생하는 것으로 보입니다.
네, 냥과장님이 말씀하신게
토스페이먼츠에서 제공하는 샘플 예제(success.html)에서는 결제 성공 후 바로 해당 HTML로 이동한 뒤, 클라이언트 측에서 서버로 요청을 보내 승인 여부를 처리하고 있습니다.이 부분으로 구현하라는 말씀으로 보입니다.
내부적으로 사용하고 있는 구조가 있어서 해당 방식으로 바꾸기 어려울 것 같은데, 다른 방법(프로그레스 바 노출 등)이 있는지 궁금합니다.
프로그레스바 노출은 냥과장님 말씀처럼 시간이 오래걸릴 것 같습니다.
확인 감사합니다!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
앞서 말씀드린 것처럼, 현재는 서버가
최종 결과를 응답하는 방식으로 구성되어 있습니다.
다만, 토스페이먼츠 샘플 예제처럼 클라이언트에서 직접 승인 요청을 보내는 구조로
변경할 예정이며, 이 과정에서 구조적으로 수정해야 할 부분이 많아
시간이 다소 소요될 것으로 예상됩니다. 이에 따라 문의드리고 싶은 점은 다음과 같습니다:
토스페이먼츠 측에서 해당 구간(네이버페이 결제 완료 후 토스페이먼츠 창으로 복귀한 시점)에
프로그레스바 또는 로딩 UI를 노출하는 개선 계획이 있으신지,
있다면 그 진행 여부와 예상 시점은 어떻게 되는지 궁금합니다.
successUrl 요청을 받아 승인 여부를 처리한 뒤최종 결과를 응답하는 방식으로 구성되어 있습니다.
다만, 토스페이먼츠 샘플 예제처럼 클라이언트에서 직접 승인 요청을 보내는 구조로
변경할 예정이며, 이 과정에서 구조적으로 수정해야 할 부분이 많아
시간이 다소 소요될 것으로 예상됩니다. 이에 따라 문의드리고 싶은 점은 다음과 같습니다:
토스페이먼츠 측에서 해당 구간(네이버페이 결제 완료 후 토스페이먼츠 창으로 복귀한 시점)에
프로그레스바 또는 로딩 UI를 노출하는 개선 계획이 있으신지,
있다면 그 진행 여부와 예상 시점은 어떻게 되는지 궁금합니다.
현재 계획은 없어서 진행 여부나 예상 시점을 공유드리긴 어렵습니다.
관련해서는 개발팀과 논의후 공유 드릴께요.