리액트로 쇼핑 사이트를 개발, 토스 모듈로 결제를 구현했다.
서비스 홍보를 위해 카카오톡으로 전달하여 구매를 유도했지만, 그 링크를 타고 들어가서 결제하는 프로세스가 제대로 진행되지 않았다.

사파리나 크롬, 데스크탑에서는 잘 되던 결제가 갑자기 되지 않아서 문제를 파악해보았다.
결제 모듈에 이상이 있는지, 비슷한 문제를 겪는 사람들이 있었다.
결제 결과를 받기 위해 추가 설정이 필요하기도 하고, 외부 앱에서도 설정이 되어있지 않으면 이런 문제가 계속될 수 있다 판단, 결론은 인앱브라우저가 아닌 일반 브라우저로 유도해야했다.

간단하게 안내 페이지만 구성해서 인앱인 경우, 일반 브라우저로 이동하도록 했다.

const userAgent = window.navigator.userAgent

mdm webdocs에서 어떤 정보를 나타내는지 찾아볼 수 있었다.
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU;
Localization; rv: revision-version-number) product/productSub
Application-Name Application-Name-version

Mozilla 정보/버전 + 운영체제 정보 + 렌더링 엔진 정보 + 브라우저 형태로 뜬다

더 쉽게 분기하기 위해 react-device-detect 라이브러리를 사용했다.
적응형 페이지 만들때 사용하기에도 좋은 라이브러리인듯.

https://www.npmjs.com/package/react-device-detect

    if (isDesktop) {
      userBrowerEnv = 'isDesktop';
    }
    if (isSafari) {
      userBrowerEnv = 'isSafari';
    }
    if (isChrome) {
      userBrowerEnv = 'isChrome';
    }
    if (isIE) {
      userBrowerEnv = 'IE';
    }
    if (isMobileSafari) {
      userBrowerEnv = 'MobileSafari';
    }
    if (isSamsungBrowser) {
      userBrowerEnv = 'SamsungBrowser';
    }
    if (getUA.match(/NAVER|KAKAOTALK|FBAN|FBAV|Line|Instagram|wadiz|kakaostory|band|twitter|DaumApps/i)) {
      userBrowerEnv = 'INAPP';
    }

isDesktop, isSafari 이렇게 boolean 값이 return 되기도 하고, userAgent를 얻어와서 원하는 값이 있는지 매칭해서 인앱으로 판단할 수 있어 편했음.

결론: 현재 브라우저가 카카오나 인스타그램, 페이스북 등 외부 브라우저인지에 따라 안내 페이지로 분기해서 브라우저로 유도함.