어플리케이션에서 결제 취소 관련 문의
안녕하세요, 어플리케이션(next.js+react-native를 이용한 하이브리드 웹앱)에서 결제 모듈을 연동했는데, 결제 방법에 따라 상단 왼측에 x표시가 없어서 결제를 취소하려고 필연적으로 (안드로이드 기준) 핸드폰의 뒤로가기 버튼을 누르게 됩니다.
그렇게 했을 때, 결제 취소가 되지 않아 failUrl로 리다이렉트 되거나 위젯의 requestPayment의 catch(error)로 진행되지 않아 오류가 생기게 됩니다.
해결 방법이 없을까요?
코드는 아래와 같습니다.
try {
await paymentWidget?.requestPayment({ orderId: orderId, orderName: orderName, customerName: myName, successUrl: window.location.origin + '/successPurchase', failUrl: window.location.origin + '/failPurchase', }); } catch (error) { // 에러처리 }
await paymentWidget?.requestPayment({ orderId: orderId, orderName: orderName, customerName: myName, successUrl: window.location.origin + '/successPurchase', failUrl: window.location.origin + '/failPurchase', }); } catch (error) { // 에러처리 }
16 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
모바일의 경우 결제를 중간에 중단했을때 failURL 로 리다이렉트 되는 것이 맞습니다.
실제로 모바일에서는 카드사 페이지로 redirect 방식으로 이동하므로 catch 에서 처리가 불가합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
네 그러니까 핸드폰의 뒤로가기를 눌러 진행을 하면 그 failUrl로 가지 않는다는 것을 포함한 의미였습니다.
보다 더 자세한 설명을 위해 어플리케이션 작동 영상을 보여드리겠습니다.
첫번째 네이버 페이로 진행하다 좌상단 x를 눌러 정상적으로 failurl로 이동하였고, 두번째 핸드폰 결제로 진행시 x가 없어 뒤로가기로 돌아갔더니 오류가 생성되었습니다.(결제 테스트 관련 텍스트가 나오는 페이지는 failurl이 아닙니다.)
구현하신 방식에따라서 다를 것 같습니다. 일반적으로 모바일 브라우저에서 휴대폰 결제창(Danal) 호출시 뒤로가기 버튼을 하면 이전 화면으로 이동하게 됩니다. iframe이나 다른 구조를 사용하신게 있는지 확인 부탁드려요.
저희 어플리케이션 자체가 iframe을 통한 하이브리드 웹앱입니다. 그렇다면 결제창이 iframe 내부에 표시되는 것 맞지 않나요?
iframe은 cords 이슈등으로 사용을 권장드리지 않습니다.
아이프레임에 표시하면 안됩니다.
CORS(Cross-Origin Resource Sharing) 이라는 브라우저 보안 정책으로 고객 <--> tosspayments <--> 카드사 사이 정상 통신이 보장되지 않으며, action이 정상적으로 진행될 수 없습니다.
그렇다면 현재 저희 어플리케이션 내에서 실행을 권장하지 않으신다는 뜻인가요? 그렇다면 해당 건에 대해서 어떤식으로 해결해야 할까요?
네 결제창 호출하는 페이지를 iframe 안에서 호출하시지 말고 메인 창에서 호출해주셔야 합니다.
iframe을 이용을 권장하지 않으시는건 이해했습니다.
허나 저희 어플리케이션 자체가, react-native에서는 webview로 특정 도메인만을 보여드리고 있고, 모든 기능이 해당 웹뷰 내부에서 작동하고 있는 형태입니다.
그런데 지금 보내주신 비디오를 보면 정상 적으로 연동되신것 같구요.
다날의 경우 다날에서 결제창을 제공하는데, X 버튼을 제공하지 않고 있구요.
필요하시다면 웹뷰 위쪽에 X 버튼을 native 로 제공하고 결제창에서 나가도록 처리하시면 될것 가ㅌ습니다.
해결되었습니다. 도메인측 버그로 판단하고 있습니다만,,😅 그래도 친절한 설명 감사합니다.
네 공유감사합니다.