가이드/웹뷰 연동하기
목차

Version 2

새로 나온

모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.

모바일 결제에서는 어떤 과정이 있을까요? 구매자의 입장에서 생각해볼게요. 상점 앱에서 결제하기를 누르면 구매자가 선택한 카드사·은행 앱으로 이동하는데요. 이 과정이 바로 앱투앱 이동입니다. 이동하고 싶은 카드사·은행 앱의 앱스키을 미리 등록해야 문제 없이 앱투앱 이동을 할 수 있어요. 온라인 결제 과정에서 등록해야 되는 앱스킴을 알려드릴게요.

앱스킴 리스트

내 상점 앱에서 인증을 위해 이동하게 되는 3rd-party 앱에는 ISP 앱, 카드사별 앱카드 등이 있습니다. 필요한 앱스킴을 추가해보세요.

카드사·본인확인기관앱스킴
토스페이supertoss://
국민카드kb-acp://, liivbank:/, newliiv://, kbbank://
농협카드nhappcardansimclick://, nhallonepayansimclick://, nonghyupcardansimclick://
롯데카드lottesmartpay://, lotteappcard://
삼성카드mpocket.online.ansimclick://, vguardstart://, samsungpay://,monimopay://, monimopayauth://
신한카드shinhan-sr-ansimclick://, smshinhanansimclick://
우리카드com.wooricard.wcard://, newsmartpib://
씨티카드citispay://, citicardappkr://, citimobileapp://
하나카드cloudpay://, hanawalletmembers://
현대카드hdcardappcardansimclick://, smhyundaiansimclick://
간편결제shinsegaeeasypayment://, payco://, lpayapp://
ISP(BC/국민)ispmobile://

Android

먼저 AndroidManifest.xml 파일에 카드앱·은행앱 패키지를 등록합니다. 패키지를 등록하지 않으면 앱이 설치되어 있어도 스토어로 이동하고, Google 정책을 위반하게 됩니다.

AndroidManifest.xml 파일에 필요한 앱스킴을 추가했다면, 앱 간 이동에 필요한 아래 코드를 살펴보세요.

WebViewClientshouldOverrideUrlLoading 함수에 오버라이딩 로직을 추가하세요. 추가하지 않으면 웹뷰에서 외부 앱을 호출하거나 마켓(market://)으로 연결할 때 net::ERR_UNKNOWN_URL_SCHEME 에러가 발생합니다.

위와 같이 구현하기 어려우면 패키지 공개 상태 관리 대응을 확인해보세요.

iOS

먼저 Info.plist 에 LSApplicationQueriesSchemes 를 추가하고 카드사, 은행의 앱스킴을 배열에 넣어 주세요. 설정하지 않으면, 앱이 열리지 않고 콘솔 쪽에 canOpenURL : failed for URL 에러가 발생합니다.

XCode에 필요한 앱스킴을 추가했다면, 앱 간(App to App) 이동에 필요한 아래 코드를 살펴보세요.

웹뷰에서 URL이 변경될 때 페이지 전환 대신 내 상점의 앱스킴을 실행시키려면 WKNavigationDelegate protocol 중 아래 코드에 해당하는 메서드를 구현해야 합니다.

Flutter

플러그인 추가하기

pubspec.yaml 파일에 가장 최신 버전의 토스페이먼츠 플러그인을 추가해주세요.

URL 변환하기

Flutter 웹뷰에서는 Intent URL을 앱스킴 URL로 변환해야 카드사 앱으로 이동합니다. 아래 예시와 같이 tossPaymentsWebview() 함수를 정의해서 사용하세요.

ConvertUrl

  • url

    앱스킴 형태로 변환하고 싶은 Intent 스킴 URL입니다. 예를 들어 intent:appScheme://...#Intent;...;end; 형태의 Intent URL이 appScheme://... 형태의 앱스킴 URL로 바뀝니다.

React Native

설치하기

npm 또는 yarn으로 토스페이먼츠 결제위젯 React Native SDK를 설치하세요.

URL 변환하기

React Native 웹뷰에서는 Intent URL을 앱스킴 URL로 변환해야 카드사 앱으로 이동합니다. 아래 예시와 같이 urlConverter() 함수를 정의해서 사용하세요.

ConvertUrl

  • url

    앱스킴 형태로 변환하고 싶은 Intent 스킴 URL입니다. 예를 들어 intent:appScheme://...#Intent;...;end; 형태입니다.

  • appScheme

    url의 앱스킴입니다.

  • appLink

    url의 앱스킴 링크입니다. 예를 들어 appScheme://... 형태입니다.

  • package

    url의 앱 패키지 정보입니다.

  • 더 궁금한 내용이 있나요?
  • 코드 샘플을 참고하세요
  • 기술지원이 필요한가요?
    실시간 문의|이메일 보내기