Dylan/business•2y ago

모바일 웹에서 카드사 앱 실행시

카드사 앱 실행시 설치되어 있지 않을때 fallback은 설정하는게 따로 있나요?

38 Replies

토스페이먼츠 BOT•2y ago

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

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

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

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

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

이실장•2y ago

모바일 웹은 자동처리되지 않나요?

Dylan/businessOP•2y ago

설치되어 있으면 이동하는데 미설치시 앱 스킴이라 이동을 안하는거 같아요

이실장•2y ago

아이폰에서 확인중이신가요?

Dylan/businessOP•2y ago

스토어로 이동하면 좋을텐데 넵 "주소가 유효하지 않기 때문에 safari가 해당 페이지를 열 수 없습니다" 이 문구가 나오고 있죠 앱 내 웹뷰에서는 fallback 처리하면 되는데 모바일 웹에서는 어떻게 해야할까요...?

이실장•2y ago

일단 설명을 드리면. 카드사앱으로 이동하는 화면은 카드사에서 제공하는 페이지입니다. 그래서 PG가 핸들링이 불가합니다. AOS는 intentURL에 마켓정보가 포함되어 있어, 브라우저에서 자동으로 처리해주는데 iOS는 앱스킴에 마켓정보가 포함되어 있지 않아 브라우저가 처리 불가합니다. (그래서 카드사 페이지에 설치하기 버튼이 어딘가에 있을거에요) 모바일앱의 경우 웹뷰를 컨트럴해서, 열수없는 페이지일 때 예외처리를 할수 있겠지만. 모바일 웹은 불가합니다.

Dylan/businessOP•2y ago

- 안드로이드 모바일 웹 브라우저: intentURL에 마켓정보가 포함되어 있어 앱 미설치시 자동 스토어로 이동 - IOS 모바일 웹 브라우저: 앱스킴에 마켓정보가 포함되어 있지 않아 앱 미설치시 브라우저가 처리 불가 - 안드로이드 앱 내 웹뷰: 미설치시 fallback 예외 처리 해주면 마켓으로 이동 가능 - IOS 앱 내 웹뷰: 미설치시 fallback 예외 처리 해주면 마켓으로 이동 가능 맞을까요?

Dylan/businessOP•2y ago

아 앱 내 웹뷰에서 fallback 처리에대한 스토어/마켓 주소는 혹시 직접 모든 카드사 스토어 주소를 찾아야 하는걸까요....? 여기 문서에는 앱 스킴 리스트는 있는데 스토어/마켓 주소는 없어서요. 혹시 따로 제공되고 있나 여쭤봅니다! https://docs.tosspayments.com/common/webview

웹뷰(WebView)에서 외부 앱 열기 | 토스페이먼츠 개발자센터

브라우저가 아닌 모바일 웹뷰로 결제창을 띄울 때 카드사별 결제 수단을 인증하려면 외부 앱(3rd-party 앱)을 연동해야 합니다. 연동에 필요한 외부 앱 스킴(App URL Scheme)목록과 추가 로직을 살펴보세요.

Dylan/businessOP•2y ago

- 안드로이드 앱 내 웹뷰: 미설치시 fallback 예외 처리 해주면 마켓으로 이동 가능 -> fallback 처리 안해줘도 마켓으로 자동으로 이동하는군요.

Ayaan이안•2y ago

네 AOS는 처리가 필요없습니다. iOS의 경우 카드사 페이지에 설치하기 메뉴가 있을겁니다.

Ayaan이안•2y ago

보시면,

Ayaan이안•2y ago

앱카드 결제를 누르면 말씀해주셨던 오류가 나게 됩니다. 그런데 잘 보면 바로 위에 파란색 앱 설치하기 버튼이 있습니다. 이를 통해 유저가 앱을 설치할 수 있게 되는겁니다. (이는 모든카드사가 동일하게 진행됩니다)

Dylan/businessOP•2y ago

그렇군요! 오늘도 배우고 갑니다! 혹시 앱 스킴에 대해서 직접 찾아야 할까요....?

Ayaan이안•2y ago

어떤 부분 때문에 그러시나요?

Dylan/businessOP•2y ago

웹 뷰 연동 문서에서 ios app scheme 정보만 기재가 되어 있고 안드로이드 메니페스트에 넣을 intent는 없어서요

Ayaan이안•2y ago

App-to-App 호출 프로세스 부분 말씀이신거죠? 혹시 어떤 언어 사용하시나요?

Dylan/businessOP•2y ago

넵 react-native입니다! js 입니다

Ayaan이안•2y ago

아.. react native는 문서가 따로 제공되고 있지않아서 아마 해당 부분을 찾기 어려우셨을거에요 잠시만요

Dylan/businessOP•2y ago

아 제가 필요로하는건 각 카드사 ios, android 스킴 리스트와 ios용 스토어 주소 리스트입니다! 예를들어 신협이나 제주같은 스킴은 찾기가 어려워서요...

Ayaan이안•2y ago

아하 해당 부분은 앱스킴이 없는게 맞습니다 !!

토스페이    supertoss://
국민카드    kb-acp://, liivbank:/, newliiv://, kbbank://
농협카드    nhappcardansimclick://, nhallonepayansimclick://, nonghyupcardansimclick://
롯데카드    lottesmartpay://, lotteappcard://
삼성카드    mpocket.online.ansimclick://, ansimclickscard://, tswansimclick://, ansimclickipcollect://, vguardstart://, samsungpay://, scardcertiapp://
신한카드    shinhan-sr-ansimclick://, smshinhanansimclick://
우리카드    com.wooricard.wcard://, newsmartpib://
씨티카드    citispay://, citicardappkr://, citimobileapp://
하나카드    cloudpay://, hanawalletmembers://
현대카드    hdcardappcardansimclick://, smhyundaiansimclick://
간편결제    shinsegaeeasypayment://, payco://, lpayapp://
ISP(BC/국민)    ispmobile://
모바일 PASS(본인 인증)    tauthlink://, ktauthexternalcall://, upluscorporation://

토스페이    supertoss://
국민카드    kb-acp://, liivbank:/, newliiv://, kbbank://
농협카드    nhappcardansimclick://, nhallonepayansimclick://, nonghyupcardansimclick://
롯데카드    lottesmartpay://, lotteappcard://
삼성카드    mpocket.online.ansimclick://, ansimclickscard://, tswansimclick://, ansimclickipcollect://, vguardstart://, samsungpay://, scardcertiapp://
신한카드    shinhan-sr-ansimclick://, smshinhanansimclick://
우리카드    com.wooricard.wcard://, newsmartpib://
씨티카드    citispay://, citicardappkr://, citimobileapp://
하나카드    cloudpay://, hanawalletmembers://
현대카드    hdcardappcardansimclick://, smhyundaiansimclick://
간편결제    shinsegaeeasypayment://, payco://, lpayapp://
ISP(BC/국민)    ispmobile://
모바일 PASS(본인 인증)    tauthlink://, ktauthexternalcall://, upluscorporation://

이렇게 문서에 나와있는데, 약간 보출 설명이 필요한 부분이 있습니다. 저기에 나열되지 않은 모든 카드사와 은행사는 모두 다 BC계열입니다.

Dylan/businessOP•2y ago

네 문서에는 ios 앱 스킴정보라 android 메니페스트에 넣을 intent가 필요합니다 ㅜㅜ

Ayaan이안•2y ago

그래서 모두 다 ispmobile:// 스킴으로만 호출되게 됩니다. 인텐트는 따로 설정하실 필요가 없고, QUERY_ALL_PACKAGES 권한을 주시거나 보안이 염려되신다면... 죄송하지만 Google Play Store에서 scheme 정보를 하나하나 받아오셔야 할듯 합니다.

Dylan/businessOP•2y ago

<queries> <package android:name="kvp.jjy.MispAndroid320"/> </queries> 이렇게 메니페이트에 넣을 필요가 없다는 말씀이신거죠?

Ayaan이안•2y ago

처리하는 방식이 세가지 방식이 있고, 그중에서 1개를 채택하시면 되는데, 토스페이먼츠에서 추천하는 방식은 RN에서 호환이 되지 않습니다. 하여 메니페스트에서 설정하는 2가지 방법만 있는건데 하나는 모든 앱을 허용하는거고 다른 하나는 모든 인텐트 정보를 다 나열해 주셔야 합니다.

이실장•2y ago

8321d9dc-b0a6-414d-a...

Ayaan이안•2y ago

오! 다 나열이 된 문서가 있었네요

Dylan/businessOP•2y ago

그렇군요. 혹시 RN에서 호환되지 않는 방식 하나는 어떤것일까요?

이실장•2y ago

React 버전에 따라 정확히 동작하지 않을 수 있으며, android manifest는 문서 확인해주세요

Dylan/businessOP•2y ago

와 실장님 대박이네요.........................................!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

이실장•2y ago

shouldoveriding으로 appscheme / intent등록없이 사용하는 거 말씀하시는 것 같아요

Ayaan이안•2y ago

shouldOverrideUrlLoading 을 오버라이딩 하는 것입니다. 저도 연동해보니 안되더라구요 검색을 해보니 호환이 안된다고 해서 메니페스트를 수정하는거만 가능한거로 보였어요 어우 이런 문서가 있었다니.. 저도 몰랐습니다

<queries>
<!-- 앱카드 -->
<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" />
<package android:name="com.kbstar.liivbank" />
<package android:name="com.kbstar.kbbank" />
<package android:name="com.kbstar.reboot" />
<package android:name="kvp.jjy.MispAndroid320" />
<package android:name="com.lcacApp" />
<package android:name="com.hanaskcard.paycla" />
<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" />
<package android:name="viva.republica.toss" />
<!-- 간편결제 -->
<package android:name="com.nhnent.payapp" />
<package android:name="com.ssg.serviceapp.android.egiftcertificate" />
<package android:name="com.kakao.talk" />
<package android:name="com.nhn.android.search" />
<package android:name="com.lotte.lpay" />
<package android:name="com.lottemembers.android" />
<package android:name="com.samsung.android.spay" />
<package android:name="com.samsung.android.spaylite" />
<package android:name="com.lge.lgpay" />
<!-- 백신리스트 -->
<package android:name="com.TouchEn.mVaccine.webs" />
<package android:name="kr.co.shiftworks.vguardweb" />
<package android:name="com.ahnlab.v3mobileplus" />
</queries>

<queries>
<!-- 앱카드 -->
<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" />
<package android:name="com.kbstar.liivbank" />
<package android:name="com.kbstar.kbbank" />
<package android:name="com.kbstar.reboot" />
<package android:name="kvp.jjy.MispAndroid320" />
<package android:name="com.lcacApp" />
<package android:name="com.hanaskcard.paycla" />
<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" />
<package android:name="viva.republica.toss" />
<!-- 간편결제 -->
<package android:name="com.nhnent.payapp" />
<package android:name="com.ssg.serviceapp.android.egiftcertificate" />
<package android:name="com.kakao.talk" />
<package android:name="com.nhn.android.search" />
<package android:name="com.lotte.lpay" />
<package android:name="com.lottemembers.android" />
<package android:name="com.samsung.android.spay" />
<package android:name="com.samsung.android.spaylite" />
<package android:name="com.lge.lgpay" />
<!-- 백신리스트 -->
<package android:name="com.TouchEn.mVaccine.webs" />
<package android:name="kr.co.shiftworks.vguardweb" />
<package android:name="com.ahnlab.v3mobileplus" />
</queries>

Dylan/businessOP•2y ago

아 그런 방법도 있군요!

Ayaan이안•2y ago

이 정보 사용하시면 되겠네요(실장님이 보내주셨던 문서에 있는거 가져왔습니다)

이실장•2y ago

switch (appScheme) {
  case 'supertoss': // 토스
    return 'https://apps.apple.com/app/id839333328';
  case 'ispmobile': // ISP
    return 'https://apps.apple.com/app/id369125087';
  case 'kb-acp': // KB국민
    return 'https://apps.apple.com/app/id695436326';
  case 'liivbank': // Liiv
    return 'https://apps.apple.com/app/id1126232922';
  case 'mpocket.online.ansimclick': // 삼성
    return 'https://apps.apple.com/app/id535125356';
  case 'lottesmartpay': // 롯데 모바일
    return 'https://apps.apple.com/app/id668497947';
  case 'lotteappcard': // 롯데
    return 'https://apps.apple.com/app/id688047200';
  case 'lpayapp': // L.pay
    return 'https://apps.apple.com/app/id1036098908';
  case 'lmslpay': // 엘포인트
    return 'https://apps.apple.com/app/id473250588';
  case 'cloudpay': // 1Q페이
    return 'https://apps.apple.com/app/id847268987';
  case 'hanawalletmembers': // 하나머니
    return 'https://apps.apple.com/app/id1038288833';
  case 'hdcardappcardansimclick': // 현대
    return 'https://apps.apple.com/app/id702653088';
  case 'shinhan-sr-ansimclick': // 신한
    return 'https://apps.apple.com/app/id572462317';
  case 'wooripay': // 우리
    return 'https://apps.apple.com/app/id1201113419';
  case 'com.wooricard.wcard': // 우리WON
    return 'https://apps.apple.com/app/id1499598869';
  case 'newsmartpib': // 우리WON뱅킹
    return 'https://apps.apple.com/app/id1470181651';
  case 'nhallonepayansimclick': // NH
    return 'https://apps.apple.com/app/id1177889176';
  case 'citimobileapp': // 시티은행
    return 'https://apps.apple.com/app/id1179759666';
  case 'shinsegaeeasypayment': // SSGPAY
    return 'https://apps.apple.com/app/id666237916';
  case 'naversearchthirdlogin': // 네이버앱
    return 'https://apps.apple.com/app/id393499958';
  case 'payco': // 페이코
    return 'https://apps.apple.com/app/id924292102';
  case 'kakaotalk': // 카카오톡
    return 'https://apps.apple.com/app/id362057947';
  case 'kftc-bankpay': // 뱅크페이
    return 'https://apps.apple.com/app/id398456030';

switch (appScheme) {
  case 'supertoss': // 토스
    return 'https://apps.apple.com/app/id839333328';
  case 'ispmobile': // ISP
    return 'https://apps.apple.com/app/id369125087';
  case 'kb-acp': // KB국민
    return 'https://apps.apple.com/app/id695436326';
  case 'liivbank': // Liiv
    return 'https://apps.apple.com/app/id1126232922';
  case 'mpocket.online.ansimclick': // 삼성
    return 'https://apps.apple.com/app/id535125356';
  case 'lottesmartpay': // 롯데 모바일
    return 'https://apps.apple.com/app/id668497947';
  case 'lotteappcard': // 롯데
    return 'https://apps.apple.com/app/id688047200';
  case 'lpayapp': // L.pay
    return 'https://apps.apple.com/app/id1036098908';
  case 'lmslpay': // 엘포인트
    return 'https://apps.apple.com/app/id473250588';
  case 'cloudpay': // 1Q페이
    return 'https://apps.apple.com/app/id847268987';
  case 'hanawalletmembers': // 하나머니
    return 'https://apps.apple.com/app/id1038288833';
  case 'hdcardappcardansimclick': // 현대
    return 'https://apps.apple.com/app/id702653088';
  case 'shinhan-sr-ansimclick': // 신한
    return 'https://apps.apple.com/app/id572462317';
  case 'wooripay': // 우리
    return 'https://apps.apple.com/app/id1201113419';
  case 'com.wooricard.wcard': // 우리WON
    return 'https://apps.apple.com/app/id1499598869';
  case 'newsmartpib': // 우리WON뱅킹
    return 'https://apps.apple.com/app/id1470181651';
  case 'nhallonepayansimclick': // NH
    return 'https://apps.apple.com/app/id1177889176';
  case 'citimobileapp': // 시티은행
    return 'https://apps.apple.com/app/id1179759666';
  case 'shinsegaeeasypayment': // SSGPAY
    return 'https://apps.apple.com/app/id666237916';
  case 'naversearchthirdlogin': // 네이버앱
    return 'https://apps.apple.com/app/id393499958';
  case 'payco': // 페이코
    return 'https://apps.apple.com/app/id924292102';
  case 'kakaotalk': // 카카오톡
    return 'https://apps.apple.com/app/id362057947';
  case 'kftc-bankpay': // 뱅크페이
    return 'https://apps.apple.com/app/id398456030';

각 카드사별 appstore주소입니다. 참고하셔서 구현해주시면 되요. 소스코드 가이드는 어렵습니다.

Dylan/businessOP•2y ago

아 소스코드는 이실장님이 보내주신 문서에 샘플 코드와 거의 비슷하게 구현해놨습니다. 와 스토어 정보까지!!!! 너무 감사합니다. 이걸 다 언제 찾나 하고 있었는데.... 이실장님 Issac님 오늘도 도움 주셔서 감사합니다!

Ayaan이안•2y ago

대신 찾아주셔서 너무 감사드릴 따름이네요 저도 저는 예전에 연동했던 앱 코드를 다 찾아보고 있었는데..(그때 하나하나 다 찾아서 연동했었습니다)

Dylan/businessOP•2y ago

흐.... 엄청나네요...

토스페이먼츠 BOT•2y ago

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

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

모바일 웹에서 카드사 앱 실행시

Did you find this page helpful?