[Flutter] 웹뷰 간편 일반 결제 안드로이드 intent 해결하기 flutter_inappwebview ERR_UNKNOWN_URL_SCHEME

현재 상황은 이렇습니다. 

사용자가 결제를 하려고 하는데 

웹페이지를 사용할 수 없음

net:: ERR_UNKNOWN_URL_SCHEME

으로 뜨고 앱결제는 넘어가고 

일반 결제는 넘어가지도 않는 문제였다. 

 

지난 1주일간 인터넷에서 확인할 수 있는 모든 정보를 찾아서 확인하고 

적용하고 온갖 난리를 부렸지만 해결 되지 않았다. 

결제가 되지 않는건 중요도가 매우 높은 오류라

마음이 급했다. 

원래 사용하던 라이브러리는 flutter_inappwebview ^5.8.0 버전

https://pub.dev/packages/flutter_inappwebview

flutter_inappwebview | Flutter package

 

shouldoverrideurlloading의 url이 null로 넘어오면서 

핸들링을 어디서 해야 할지 몰라 많이 헤맸다. 

그래서 webview_flutter 라이브러리로 

pg사 테스트 url을 넣어 테스트 한 결과 

된다!! 

너무 바로 되어버렸다..

아래의 블로그를 참고하면 된다. 
참고 블로그

[Flutter] 안드로이드 WebView 이니시스 ERR_UNKNOWN_URL_SCHEME 오류 해결

 

그래서 원래 프로젝트에 적용하려고 했으나,

내 인생만 아름답지 않은걸까

다른 에러가 발생했다. (이건 원래 프로젝트의 다른 라이브러리와 충돌 및 꼬임)

다른 오류 수정하는데 오래 걸릴 것 같았고 

내 멘탈이 버티지 못할 것 같았다.

 

그래서 정신을 차리고 

flutter_inappwebview에서 적용할 수 있는 방법을 계속 찾았다. 

24년 4월 8일 현재로는 

아주,, 다행히도 바로 적용할만한 방법이 있었는데 

바로 5.8.0에서 6.X.X 버전으로 마이그레이션이다.

 

마이그레이션을 결정한 이유는

Uri 타입에서 WebUri로 변경되었고 그래서 intent를 좀 더 핸들링하기 쉬워졌다. 

그리고 로그로 보면 전반적으로 수정이 많이 된거 같음

 

InAppWebView(
                
  initialUrlRequest:
      URLRequest(url: WebUri('결제 URl') ),
  initialSettings: InAppWebViewSettings(
    useShouldOverrideUrlLoading: true,
    resourceCustomSchemes: ['intent'],
  ),
  onLoadResourceWithCustomScheme: (controller, url) async {
    await controller.stopLoading();
    return null;
  },   
  shouldOverrideUrlLoading: (controller, navigationAction) async { 

    Uri? uri = navigationAction.request.url;
    // MARK: - intent 결제 안됨 분기
    if (Platform.isAndroid) {
      if (!navigationAction.isForMainFrame) {
        await controller.stopLoading();
      }
    }
    // Third-party cookie will be blocked
    return // 여기서 처리 로직 - 채널 연결하여 처리함
  }, 
),

 

AndroidManifest.xml 

// AndroidManifest.xml

<queries>
  <package android:name="com.kakao.talk" /> <!-- 카카오톡 -->
  <package android:name="com.nhn.android.search" /> <!-- 네이버페이 -->
  <package android:name="com.samsung.android.spay" /> <!-- 삼성페이 -->
  <package android:name="net.ib.android.smcard" /> <!-- 모니모페이 -->
  <package android:name="com.mobiletoong.travelwallet" /> <!-- 신한카드 트레블월렛 -->\
  <package android:name="com.samsung.android.spaylite" /> <!-- 삼성페이 -->
  <package android:name="com.ssg.serviceapp.android.egiftcertificate" /> <!-- SSGPAY -->
  <package android:name="com.nhnent.payapp" /> <!-- PAYCO -->
  <package android:name="com.lottemembers.android" /> <!-- L.POINT -->
  <package android:name="viva.republica.toss" /> <!-- 토스-->
  <package android:name="com.shinhan.smartcaremgr" /> <!-- 신한 슈퍼SOL -->
  <package android:name="com.shcard.smartpay" /> <!-- 신한페이판 -->
  <package android:name="com.shinhancard.smartshinhan" /> <!-- 신한페이판-공동인증서 -->
  <package android:name="com.hyundaicard.appcard" /> <!-- 현대카드 -->
  <package android:name="com.lumensoft.touchenappfree" /> <!-- 현대카드-공동인증서 -->
  <package android:name="kr.co.samsungcard.mpocket" /> <!-- 삼성카드 -->
  <package android:name="nh.smart.nhallonepay" /> <!-- 올원페이 -->
  <package android:name="com.kbcard.cxh.appcard" /> <!-- KB Pay -->
  <package android:name="com.kbstar.liivbank" /> <!-- Liiv(KB국민은행) -->
  <package android:name="com.kbstar.reboot" /> <!-- Liiv Reboot(KB국민은행) -->
  <package android:name="com.kbstar.kbbank" /> <!-- 스타뱅킹(KB국민은행) -->
  <package android:name="kvp.jjy.MispAndroid320" /> <!-- ISP/페이북 -->
  <package android:name="com.lcacApp" /> <!-- 롯데카드 -->
  <package android:name="com.hanaskcard.paycla" /> <!-- 하나카드 -->
  <package android:name="com.hanaskcard.rocomo.potal" />  <!--하나카드-->
  <package android:name="kr.co.hanamembers.hmscustomer" /> <!-- 하나멤버스 -->
  <package android:name="kr.co.citibank.citimobile" /> <!-- 씨티모바일 -->
  <package android:name="com.wooricard.wpay" /> <!-- 우리페이 -->
  <package android:name="com.wooricard.smartapp" /> <!-- 우리카드 -->
  <package android:name="com.wooribank.smart.npib" /> <!-- 우리WON뱅킹 -->
  <package android:name="com.lguplus.paynow" /> <!-- 페이나우 -->
  <package android:name="com.kftc.bankpay.android" /> <!-- 뱅크페이 -->
  <package android:name="com.TouchEn.mVaccine.webs" /> <!-- TouchEn mVaccine (신한) -->
  <package android:name="kr.co.shiftworks.vguardweb" /> <!-- V-Guard (삼성) -->
  <package android:name="com.ahnlab.v3mobileplus" /> <!-- V3 (NH, 현대) -->
</queries>

 

mainActivity 에서 channel 연결하고 

값이 들어올때 실행 할 수 있음 실행하고 

아니면 마켓으로 이동하는 코드를 작성해야 한다. 

 

그리고 혹시나 어디에서 결제 때문에 고생하고 있다면

천천히 하나씩 테스트 해보기를 권한다. 

가끔 핫리로드는 shouldOverrideUrlLoading에 변경 된 값을 

반영하지 못하는 것 같다. 

참고한 사이트 링크를 걸어두겠습니다. 

 

결제 막히는게 이번에 겪어보니, 

숨막히게 스트레스를 받는다. 

개발자 그만 두고 싶어졌다. 

다시 한번 돈 많은 백수의 목표를 되새기며,, 

반응형

https://docs.tosspayments.com/guides/webview

웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터

https://nkstar-ios.tistory.com/29

[Flutter] PG결제 웹뷰 만들다 만난 이슈들

https://github.com/pichillilorenzo/flutter_inappwebview/issues/1748

ERR_UNKNOWN_URL_SCHEME error inside WebView when accessing App in Play Store · Issue #1748 · pichillilorenzo/flutter_inappwebv

https://dev-in-gym.tistory.com/40

Flutter Webview Intent 처리 ERR_UNKNOWN_URL_SCHEME

https://blog.steinjun.net/posts/21

Flutter webView에서 결제 서비스 붙이기