Search
🌐

웹뷰(WebView) 사용 (카드) - 앱 스킴(App Scheme) 설정

웹 브라우저가 아닌 모바일 환경에서 웹뷰(WebView)로 페이플 앱카드 결제창을 띄우는 경우, 카드사 및 기관별 결제를 위해 외부 앱을 호출해야합니다.
모바일 웹뷰에서 외부 앱을 띄우기 위해서는 앱 스킴 등록을 하셔야 문제없이 결제창이 호출되니, 반드시 확인해주세요!

1. 앱 스킴(App Scheme) 리스트

앱 카드 결제 시, 고객이 선택한 카드사 및 은행의 결제 앱이 열립니다.
외부앱이 실행되어야 하기 때문에 앱 스킴(App Scheme)의 추가가 필요합니다.
이동할 앱 스킴 리스트를 확인하고 추가해주세요.

2. 앱 스킴(App Scheme) 설정

필요한 앱 스킴을 추가하셨다면 외부 앱으로의 이동을 위해 구현 시 추가해야 할 로직을 코드 예제로 확인해보세요.

2.1 Android

Android는 웹뷰에서 외부 앱으로 이동할 때, WebViewClientshouldOverrideUrlLoading 함수를 사용합니다.
shouldOverrideUrlLoading 함수에 @Override을 추가하지 않으면, net::ERR_UNKNOWN_URL_SCHEME 오류가 발생하니 주의해주세요!
WebViewClientshouldOverrideUrlLoading이곳에서 자세히 살펴보세요!

예시 코드

@Override public boolean shouldOverrideUrlLoading(WebView view, String url) { if (url == null) return false; if (!url.startsWith("http://") && !url.startsWith("https://")) { if (url.startsWith("intent")) { Intent schemeIntent; try { schemeIntent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME); } catch (URISyntaxException e) { e.printStackTrace(); return false; } try { startActivity(schemeIntent); return true; } catch (ActivityNotFoundException e) { String pkgName = schemeIntent.getPackage(); if (pkgName != null) { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkgName))); return true; } } } else { try { startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); return true; } catch (Exception e) { e.printStackTrace(); return false; } } } return false; }
Java
복사
Java 코드 예시

Android 11 (API 30) 에서의 유의사항

안드로이드 API 레벨 30에서 특정 카드사/기관으로 결제 시도시, net::ERR_CLEARTEXT_NOT_PERMITTED 오류가 발생하는 경우가 있으니, AndroidManifest.xml 파일에 usesCleartextTraffic 속성true로 설정해주셔야 합니다.
<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application ... android:usesCleartextTraffic="true" ... > ... </application> </manifest>
XML
복사
AndroidManifest.xml 설정 예시
구글 보안정책에 따라서 앱의 targetSdkVersion을 30 이상으로 설정하게 되면, 단말기에 설치된 패키지 공개 상태가 제한됩니다. 앱 내에서 다른 패키지 상태를 확인하기 위해서는 AndroidManifest 파일에 <queries> 요소로 등록이 필요합니다. ※ Android 11 패키지 공개 상태에 따른 상세한 내용은 여기에서 확인하실 수 있습니다.
AndroidManifest에 등록한 패키지 목록
<queries> <!-- 보안--> <package android:name="com.ahnlab.v3mobileplus"/> <package android:name="com.TouchEn.mVaccine.webs"/> <!-- 우리카드--> <package android:name="com.wooricard.wpay"/> <package android:name="com.wooricard.smartapp"/> <package android:name="com.wooribank.smart.npib"/> <package android:name="com.mysmilepay.app"/> <!-- 씨티카드--> <package android:name="kr.co.citibank.citimobile"/> <package android:name="com.citibank.cardapp"/> <!-- 신한카드--> <package android:name="com.shcard.smartpay"/> <package android:name="com.shinhan.smartcaremgr"/> <package android:name="com.shinhancard.smartshinhan"/> <package android:name="com.mobiletoong.travelwallet"/> <!-- ISP--> <package android:name="kvp.jjy.MispAndroid320"/> <!-- KB--> <package android:name="com.kbcard.cxh.appcard"/> <!-- 현대카드--> <package android:name="com.hyundaicard.appcard"/> <package android:name="com.samsung.android.spaylite"/> <package android:name="com.ssg.serviceapp.android.egiftcertificate"/> <!-- 삼성카드--> <package android:name="kr.co.samsungcard.mpocket"/> <package android:name="com.nhnent.payapp"/> <!-- 하나카드--> <package android:name="com.hanaskcard.paycla"/> <package android:name="kr.co.hanamembers.hmscustomer"/> <package android:name="com.kakao.talk"/> <package android:name="com.hanaskcard.rocomo.potal"/> <package android:name="com.ahnlab.v3mobileplus"/> <package android:name="com.lge.lgpay"/> <package android:name="viva.republica.toss"/> <package android:name="com.samsung.android.spay"/> <package android:name="com.nhnent.payapp"/> <!-- 롯데카드--> <package android:name="com.lcacApp"/> <package android:name="com.lotte.lpay"/> <package android:name="com.lottemembers.android"/> <!-- 농협카드--> <package android:name="nh.smart.nhallonepay"/> <package android:name="com.samsung.android.spay"/> <package android:name="net.nshc.droidx3web"/> <package android:name="kr.shiftworks.vguardweb"/> <package android:name="com.payprotocol.walletkr"/> <package android:name="kr.danal.app.damoum"/> <package android:name="com.kt.ktauth"/> <package android:name="uplus.membership"/> <package android:name="com.bankpay.android"/> <package android:name="com.kbstar.liivbank"/> <package android:name="com.nh.cashcardapp"/> <package android:name="kr.co.kfcc.mobilebank"/> <package android:name="com.knb.psb"/> <package android:name="com.kftc.bankpay.android"/> <package android:name="kr.co.shiftworks.vguardweb"/> <package android:name="com.kbankwith.smartbank"/> <package android:name="viva.republica.toss"/> <package android:name="com.lge.lgpay"/> <!-- 국민카드--> <package android:name="com.kbstar.reboot"/> <package android:name="com.kbstar.kbbank"/> </queries>
XML
복사
AndroidManifest.xml 설정 예시

2.2 iOS

웹뷰에서의 외부 앱 호출을 위해 info.plist 에 필요한 앱 스킴(App Scheme)을 등록해주세요.
info.plist에 앱 스킴(App Scheme) 목록을 나열해두면 외부 앱 실행을 묻는 창이 뜨면서 자동으로 처리됩니다.
iOS 9.0 버전 이상에서는 보안정책의 강화로 LSApplicationQueriesSchemes 항목을 추가했습니다. URL scheme을 사용해서 외부 앱을 열 경우, 화이트리스트에 등록된 scheme만 열 수 있게 하여 보안을 강화하기 위함입니다. 따라서 iOS 9.0 버전 이상에서는 카드사/기관 앱을 열려면 화이트리스트 (허용 목록, info.plist)를 추가해야합니다.
iOS 15 버전 이상에서는 Apple 정책에 따라 LSApplicationQueriesSchemes 키 항목이 최대 50개로 제한됩니다. 아래 info.plist에 안내드리는 31개 항목에 대한 scheme을 참고해주시기 바랍니다.
iOS 6.0 버전 이상에서 사파리(Safari)의 쿠키 기본설정이 항상 설정시에만 세션 유지가 가능하게 바뀌어 세션 만료 오류가 발생할 수 있습니다. 쿠키를 항상 허용으로 설정해주세요.

info.plist 예시

<key>LSApplicationQueriesSchemes</key> <array> <string>kb-acp</string> <string>liivbank</string> <string>newliiv</string> <string>kbbank</string> <string>nhappcardansimclick</string> <string>nhallonepayansimclick</string> <string>nonghyupcardansimclick</string> <string>lottesmartpay</string> <string>lotteappcard</string> <string>mpocket.online.ansimclick</string> <string>ansimclickscard</string> <string>tswansimclick</string> <string>ansimclickipcollect</string> <string>vguardstart</string> <string>samsungpay</string> <string>scardcertiapp</string> <string>shinhan-sr-ansimclick</string> <string>smshinhanansimclick</string> <string>com.wooricard.wcard</string> <string>newsmartpib</string> <string>citispay</string> <string>citicardappkr</string> <string>citimobileapp</string> <string>cloudpay</string> <string>hanawalletmembers</string> <string>hdcardappcardansimclick</string> <string>smhyundaiansimclick</string> <string>shinsegaeeasypayment</string> <string>payco</string> <string>lpayapp</string> <string>ispmobile</string> </array>
XML
복사