ckdhkdwns•6mo ago

카드결제 이후 redirect되지 않음

안녕하세요, 리액트 네이티브를 통해 웹뷰형식으로 결제위젯을 연동했습니다. 1. webview에서 띄워진 결제위젯을 통해 신용/체크카드 결제를 진행합니다. 2. 카드사 페이지에서 앱으로 결제하기를 눌러 앱으로 이동합니다. 3. 카드사 앱에서 결제를 완료 후 웹뷰 앱으로 돌아옵니다. 4. 로딩 후 '결제하려면 다음 버튼을 눌러주세요' 라는 문구가 뜹니다. 아래의 확인 버튼을 눌러도 아무 동작도 하지 않습니다. 지금까지 테스트 해보았을 때, 오류가 나는 카드사: 카카오뱅크, 국민 정상적으로 작동하는 카드사: 현대, 토스뱅크 입니다. 원인이나 해결방안을 알려주시면 감사하겠습니다.

21 Replies

토스페이먼츠 BOT•6mo ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

ckdhkdwnsOP•6mo ago

mid: tintern0mvb (테스트) 입니다.

이실장•6mo ago

ios/anroid모두 동일한가요?

ckdhkdwnsOP•6mo ago

네 그렇습니다

이실장•6mo ago

현대, 토스뱅크는 appScheme이나 packageName 관리하시나요?

ckdhkdwnsOP•6mo ago

확인해보고 답장드리겠습니다

Kimoon Lee•6mo ago

로딩 후 '결제하려면 다음 버튼을 눌러주세요' 라는 문구가 successURL 을 호출하고 2초 이내에 redirect가 발생하지 않으면 보여지는 화면인데요. 설정하신 successURL 이 호출되는지, 된다면 혹시 렌더링에 시간이 오래 걸리는 상황인지 확인부탁드립니다.

토스페이먼츠 BOT•6mo ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

ckdhkdwnsOP•5mo ago

늦게 확인드려 죄송합니다. successURL이 호출되지 않습니다. 테스트로 successUrl을 https://www.google.com 을 설정해보아도 리다이렉트되지 않았습니다. 혹시 해당 문제가 cors와 관련이 있을까요?

New Year's Day 2025

Happy New Year's Day! #GoogleDoodle

Kimoon Lee•5mo ago

혹시 결제창을 띄우는 domain 하고 successURL 도메인이 다른지 확인부탁드립니다. PC 의 경우 iframe 내에서 redirect 로 이동하기 때문에 동일 도메인이 아니면 브라우저 정책에 의해 차단됩니다.

ckdhkdwnsOP•5mo ago

아닙니다 같습니다

Minsu Kim•5mo ago

원글에 모바일 rn환경이라고 전달해주셨네요.

Kimoon Lee•5mo ago

@ckdhkdwns 그럼 모바일 웹에서는 문제가 없으신거죠? successURL 로 이동할때 웹뷰쪽 개발자 도구에 콘솔에러등이 없는지 확인부탁드립니다.

ckdhkdwnsOP•5mo ago

네, 모바일 웹에서는 정상적으로 작동합니다. 웹뷰 앱에서, KB PAY 앱으로 이동하여 결제를 마치고 다시 웹뷰 앱으로 돌아오니, https://payment-gateway-sandbox.tosspayments.com/mobile/auth/card/SEEROO/result?token=[토큰값] 으로 요청을 보냅니다. 이후에 위에서 보여드렸던 화면이 보여집니다. 아래 코드 4번째 줄에서 출력되었습니다.

// react-native-webview 
 const onShouldStartLoadWithRequest: OnShouldStartLoadWithRequest = (
    event: ShouldStartLoadRequest,
  ) => {
    console.log('event.url', event.url);
    if (event.url.includes('appleid')) {
      return false;
    }
    setNavState(event);

    const convertUrl = new ConvertUrl(event.url);
    if (convertUrl.isAppLink()) {
      convertUrl.launchApp().then(isLaunch => {
        console.log('isLaunch', isLaunch);
        if (!isLaunch) {
          // 앱이 설치되어 있지 않은 경우 처리
        }
      });
      return false;
    } else {
      return true;
    }
  };

// react-native-webview 
 const onShouldStartLoadWithRequest: OnShouldStartLoadWithRequest = (
    event: ShouldStartLoadRequest,
  ) => {
    console.log('event.url', event.url);
    if (event.url.includes('appleid')) {
      return false;
    }
    setNavState(event);

    const convertUrl = new ConvertUrl(event.url);
    if (convertUrl.isAppLink()) {
      convertUrl.launchApp().then(isLaunch => {
        console.log('isLaunch', isLaunch);
        if (!isLaunch) {
          // 앱이 설치되어 있지 않은 경우 처리
        }
      });
      return false;
    } else {
      return true;
    }
  };

Kimoon Lee•5mo ago

https://payment-gateway-sandbox.tosspayments.com/mobile/auth/card/SEEROO/result?token=[토큰값] 이것에 대한 응답은 어떻게 왔는지 확인가능하신가요? 지금 보면 이 URL 아니면 successURL 을 호출했는데, 로딩이 안되거나 막혀서 저 화면으로 이동하는것 같습니다.

카네기멜론•3mo ago

해결하셨나요~? 저도 비슷한 문제가 발생하고있는데 해결방안이 궁금하네요~!

Kimoon Lee•3mo ago

로딩 후 '결제하려면 다음 버튼을 눌러주세요' 라는 문구 가 뜨는건 successURL 로딩이 안되 거나 로딩이 느린 경우 입니다. 이부분을 확인해 주세요.

카네기멜론•3mo ago

네 맞습니다. 1.KB쪽 페이지 표시후 -> 2.KB Pay 앱결제 -> 3.승인완료 -> 1.KB쪽 페이지가 succesURL 로 이동되어야 하지만 로딩 화면이 8~10초간 보이다가 "요청 시간이 초과되었습니다.." 화면 표시. 입니다. 하나카드 , 토스페이 의 경우 정상적으로 successURL로 이동되어 결제가 완료 됩니다.

Minsu Kim•3mo ago

'결제하려면 다음 버튼을 눌러주세요' 문구 자체가 successURL로 라우트가 넘어간 상황이기때문에 successURL이 제시간에 응답이 안된 원인을 귀사 서버에서 찾아보시는게 아마도 맞을것 같습니다. 다만 여기서 걸리는 점은 이 부분인데요. 제가 RN 개발을 하기때문에 샘플 앱에서 실행을 해보니 문제가 없었습니다.

ckdhkdwnsOP•3mo ago

앱과 웹뷰 내부 웹 통신간에 window.postMessage 오버라이딩을 하는 부분이 문제였습니다. 변경 전

// injectJavascript
(function () {
  window.postMessage = function (data) {
    window.ReactNativeWebView.postMessage(data);
  };
  window.isWebview = true;
  return true;
})();

// injectJavascript
(function () {
  window.postMessage = function (data) {
    window.ReactNativeWebView.postMessage(data);
  };
  window.isWebview = true;
  return true;
})();

변경 후

// injectJavascript
(function () {
  // 허용할 오리진 목록
  const allowedOrigins = ['https://허용할 도메인...', ...];

  if (allowedOrigins.includes(window.location.origin)) {
    const originalPostMessage = window.postMessage;

    window.postMessage = function (data) {
      window.ReactNativeWebView.postMessage(data);
    };
  }

  window.isWebview = true;
  return true;
})();

// injectJavascript
(function () {
  // 허용할 오리진 목록
  const allowedOrigins = ['https://허용할 도메인...', ...];

  if (allowedOrigins.includes(window.location.origin)) {
    const originalPostMessage = window.postMessage;

    window.postMessage = function (data) {
      window.ReactNativeWebView.postMessage(data);
    };
  }

  window.isWebview = true;
  return true;
})();

특정 오리진만 postMessage를 오버라이딩하도록 수정하였습니다.

이실장•3mo ago

도움 감사드립니다. @카네기멜론

카드결제 이후 redirect되지 않음

Did you find this page helpful?