웹 브라우저가 아닌 모바일 환경에서 웹뷰(WebView)로 페이플 앱카드 결제창을 띄우는 경우, 카드사 및 기관별 결제를 위해 외부 앱을 호출해야합니다.
모바일 웹뷰에서 외부 앱을 띄우기 위해서는 앱 스킴 등록을 하셔야
문제없이 결제창이 호출되니, 반드시 확인해주세요!
1. 앱 스킴(App Scheme) 리스트
앱 카드 결제 시, 고객이 선택한 카드사 및 은행의 결제 앱이 열립니다.
외부앱이 실행되어야 하기 때문에 앱 스킴(App Scheme)의 추가가 필요합니다.
이동할 앱 스킴 리스트를 확인하고 추가해주세요.
2. 앱 스킴(App Scheme) 설정
필요한 앱 스킴을 추가하셨다면 외부 앱으로의 이동을 위해 구현 시 추가해야 할 로직을 코드 예제로 확인해보세요.
2.1 Android
Android는 웹뷰에서 외부 앱으로 이동할 때, WebViewClient의 shouldOverrideUrlLoading 함수를 사용합니다.
shouldOverrideUrlLoading 함수에 @Override을 추가하지 않으면, net::ERR_UNKNOWN_URL_SCHEME 오류가 발생하니 주의해주세요!
예시 코드
@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.shinhancard.smartshinhan"/>
<!-- 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 6.0 버전 이상에서 사파리(Safari)의 쿠키 기본설정이 항상 설정시에만 세션 유지가 가능하게 바뀌어 세션 만료 오류가 발생할 수 있습니다.
쿠키를 항상 허용으로 설정해주세요.
info.plist 예시
<key>LSApplicationQueriesSchemes</key>
<array>
<string>itmss</string>
<string>itms-appss</string>
<string>itms</string>
<string>itms-apps</string>
<string>shinhan-sr-ansimclick</string>
<string>shinhan-sr-ansimclick-payco</string>
<string>shinhan-sr-ansimclick-naverpay</string>
<string>smshinhanansimclick</string>
<string>hdcardappcardansimclick</string>
<string>smhyundaiansimclick</string>
<string>mpocket.online.ansimclick</string>
<string>scardcertiapp</string>
<string>cloudpay</string>
<string>hanaskcardmobileportal</string>
<string>nhappcardansimclick</string>
<string>nonghyupcardansimclick</string>
<string>kb-acp</string>
<string>lotteappcard</string>
<string>lottesmartpay</string>
<string>citispay</string>
<string>kpay</string>
<string>ispmobile</string>
<string>paypin</string>
<string>payco</string>
<string>tswansimclick</string>
<string>nhallonepayansimclick</string>
<string>citimobileapp</string>
<string>citicardappkr</string>
<string>lpayapp</string>
<string>kakaotalk</string>
<string>shinsegaeeasypayment</string>
<string>kftc-bankpay</string>
<string>bankwallet</string>
<string>uppay</string>
<string>banka</string>
<string>hanamopmoasign</string>
<string>iphoneSbank</string>
<string>wooripay</string>
<string>tauthlink</string>
<string>lguthepay</string>
<string>lguthepay-xpay</string>
<string>smartxpay-transfer</string>
<string>nhappcash-acp</string>
<string>SmartBank2WIB</string>
<string>SmartBank2WB</string>
<string>PortalCenterWB</string>
<string>woorimembers</string>
<string>wibeetalk</string>
<string>ansimclickscard</string>
<string>ansimclickipcollect</string>
<string>vguardstart</string>
<string>samsungpay</string>
<string>hanawalletmembers</string>
<string>ktauthexternalcall</string>
<string>payprotocolwalletkr</string>
<string>newliiv</string>
<string>kbbank</string>
</array>
XML