Dylan/business•3y ago

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

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

18 Replies

토스페이먼츠 BOT•3y ago

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

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

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

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

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

이실장•3y ago

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

Dylan/businessOP•3y ago

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

이실장•3y ago

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

Dylan/businessOP•3y ago

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

이실장•3y ago

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

Dylan/businessOP•3y ago

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

Dylan/businessOP•3y ago

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

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

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

Dylan/businessOP•3y ago

- 안드로이드 앱 내 웹뷰: 미설치시 fallback 예외 처리 해주면 마켓으로 이동 가능 -> fallback 처리 안해줘도 마켓으로 자동으로 이동하는군요. 그렇군요! 오늘도 배우고 갑니다! 혹시 앱 스킴에 대해서 직접 찾아야 할까요....? 웹 뷰 연동 문서에서 ios app scheme 정보만 기재가 되어 있고 안드로이드 메니페스트에 넣을 intent는 없어서요 넵 react-native입니다! js 입니다 아 제가 필요로하는건 각 카드사 ios, android 스킴 리스트와 ios용 스토어 주소 리스트입니다! 예를들어 신협이나 제주같은 스킴은 찾기가 어려워서요... 네 문서에는 ios 앱 스킴정보라 android 메니페스트에 넣을 intent가 필요합니다 ㅜㅜ <queries> <package android:name="kvp.jjy.MispAndroid320"/> </queries> 이렇게 메니페이트에 넣을 필요가 없다는 말씀이신거죠?

이실장•3y ago

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

Dylan/businessOP•3y ago

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

이실장•3y ago

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

Dylan/businessOP•3y ago

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

이실장•3y ago

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

Dylan/businessOP•3y ago

아 그런 방법도 있군요!

이실장•3y 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•3y ago

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

토스페이먼츠 BOT•3y ago

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

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

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

Did you find this page helpful?