로고Developer Center
홈페이지가입문의

기타

웹뷰(WebView) 연동


모바일 웹뷰에서 앱카드 결제창을 사용할 때는, 각 카드사 및 기관의 결제를 처리하기 위해 외부 앱 호출이 필요합니다.
앱 스킴 PCD_APP_SCHEME 파라미터를 추가하면 결제 후 파트너(상점) 앱으로 돌아올 수 있습니다.

Android

1. AndroidManifest.xml 파일에 아래 패키지를 등록합니다.

XML
1<queries>
2<!-- 보안 -->
3<package android:name="com.ahnlab.v3mobileplus"/>
4<package android:name="com.TouchEn.mVaccine.webs"/>
5
6<!-- 우리카드 -->
7<package android:name="com.wooricard.wpay"/>
8<package android:name="com.wooricard.smartapp"/>
9<package android:name="com.wooribank.smart.npib"/>
10<package android:name="com.mysmilepay.app"/>
11
12<!-- 씨티카드 -->
13<package android:name="kr.co.citibank.citimobile"/>
14<package android:name="com.citibank.cardapp"/>
15
16<!-- 신한카드 -->
17<package android:name="com.shcard.smartpay"/>
18<package android:name="com.shinhancard.smartshinhan"/>
19<package android:name="com.shinhan.smartcaremgr"/>
20<package android:name="com.mobiletoong.travelwallet"/>
21
22<!-- ISP/페이북 -->
23<package android:name="kvp.jjy.MispAndroid320"/>
24
25<!-- KB카드 -->
26<package android:name="com.kbcard.cxh.appcard"/>
27<package android:name="com.kbstar.reboot"/>
28<package android:name="com.kbstar.kbbank"/>
29<package android:name="com.kbstar.liivbank"/>
30
31<!-- 현대카드 -->
32<package android:name="com.hyundaicard.appcard"/>
33<package android:name="com.samsung.android.spaylite"/>
34<package android:name="com.ssg.serviceapp.android.egiftcertificate"/>
35
36<!-- 삼성카드 -->
37<package android:name="kr.co.samsungcard.mpocket"/>
38<package android:name="com.nhnent.payapp"/>
39<package android:name="com.samsung.android.spaylite"/>
40<package android:name="net.ib.android.smcard"/>
41
42<!-- 하나카드 -->
43<package android:name="com.hanaskcard.paycla"/>
44<package android:name="kr.co.hanamembers.hmscustomer"/>
45<package android:name="com.samsung.android.spaylite"/>
46<package android:name="com.kakao.talk"/>
47<package android:name="com.hanaskcard.rocomo.potal"/>
48<package android:name="com.ahnlab.v3mobileplus"/>
49<package android:name="com.lge.lgpay"/>
50<package android:name="viva.republica.toss"/>
51<package android:name="com.samsung.android.spay"/>
52<package android:name="com.nhnent.payapp"/>
53
54<!-- 롯데카드 -->
55<package android:name="com.lcacApp"/>
56<package android:name="com.lotte.lpay"/>
57<package android:name="com.nhnent.payapp"/>
58<package android:name="com.lottemembers.android"/>
59<package android:name="com.samsung.android.spaylite"/>
60
61<!-- 농협카드 -->
62<package android:name="nh.smart.nhallonepay"/>
63</queries>

2. WebViewClient의 shouldOverrideUrlLoading 함수를 재정의(Override) 합니다.
재정의하지 않으면 net::ERR_UNKNOWN_URL_SCHEME 오류가 발생합니다.

JAVA
1@Override
2public boolean shouldOverrideUrlLoading (WebView view, String url){
3    if (url == null)
4        return false;
5    if (!url.startsWith("http://") && !url.startsWith("https://")) {
6        if (url.startsWith("intent")) {
7            Intent schemeIntent;
8            try {
9                schemeIntent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
10            } catch (URISyntaxException e) {
11                e.printStackTrace();
12                return false;
13            }
14            try {
15                startActivity(schemeIntent);
16                return true;
17            } catch (ActivityNotFoundException e) {
18                String pkgName = schemeIntent.getPackage();
19                if (pkgName != null) {
20                    startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + pkgName)));
21                    return true;
22                }
23            }
24        } else {
25            try {
26                startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
27                return true;
28            } catch (Exception e) {
29                e.printStackTrace();
30                return false;
31            }
32        }
33    }
34    return false;
35}

·주의사항

Android 11 (API Level 30)에서 net::ERR_UNKNOWN_URL_SCHEME 오류가 발생한다면,

AndroidManifest.xml 파일의 usesCleartextTraffic 속성을 true로 설정해주세요.

1<manifest>
2		<application
3				...
4				android:usesCleartextTraffic="true"
5			  ... >
6		</application>
7</manifest>

3. 외부(카드사, 기관) 앱에서 결제를 마친 후 파트너(상점) 앱으로 이동시키려면 User Agent 내 payple-pay-app을 추가해주세요.

1String userAgent = webView.getSettings().getUserAgentString();
2webView.getSettings().setUserAgentString(userAgent+"payple-pay-app");

4. 앱카드 결제창 호출 시 사용하는 파라미터인 PCD_APP_SCHEME 에는 WebViewTest:// 형태의 파트너 앱 스킴을 추가해주세요.

iOS

1. Info.plist 에 LSApplicationQueriesSchemes 를 추가하고 앱 스킴을 배열에 넣어 주세요.

plist
1<key>LSApplicationQueriesSchemes</key>
2<array>
3    <string>itmss</string>
4    <string>itms-appss</string>
5    <string>itms</string>
6    <string>itms-apps</string>
7    <string>shinhan-sr-ansimclick</string>
8    <string>shinhan-sr-ansimclick-payco</string>
9    <string>shinhan-sr-ansimclick-naverpay</string>
10    <string>smshinhanansimclick</string>
11    <string>hdcardappcardansimclick</string>
12    <string>smhyundaiansimclick</string>
13    <string>mpocket.online.ansimclick</string>
14    <string>scardcertiapp</string>
15    <string>cloudpay</string>
16    <string>hanaskcardmobileportal</string>
17    <string>nhappcardansimclick</string>
18    <string>nonghyupcardansimclick</string>
19    <string>kb-acp</string>
20    <string>lotteappcard</string>
21    <string>lottesmartpay</string>
22    <string>citispay</string>
23    <string>kpay</string>
24    <string>ispmobile</string>
25    <string>paypin</string>
26    <string>payco</string>
27    <string>tswansimclick</string>
28    <string>nhallonepayansimclick</string>
29    <string>citimobileapp</string>
30    <string>citicardappkr</string>
31    <string>lpayapp</string>
32    <string>kakaotalk</string>
33    <string>shinsegaeeasypayment</string>
34    <string>kftc-bankpay</string>
35    <string>bankwallet</string>
36    <string>uppay</string>
37    <string>banka</string>
38    <string>hanamopmoasign</string>
39    <string>iphoneSbank</string>
40    <string>wooripay</string>
41    <string>tauthlink</string>
42    <string>lguthepay</string>
43    <string>lguthepay-xpay</string>
44    <string>smartxpay-transfer</string>
45    <string>nhappcash-acp</string>
46    <string>SmartBank2WIB</string>
47    <string>SmartBank2WB</string>
48    <string>PortalCenterWB</string>
49    <string>woorimembers</string>
50    <string>com.wooricard.wcard</string>
51    <string>NewSmartPib</string>
52    <string>wibeetalk</string>
53    <string>ansimclickscard</string>
54    <string>ansimclickipcollect</string>
55    <string>vguardstart</string>
56    <string>samsungpay</string>
57    <string>monimopay</string>
58    <string>monimopayauth</string>
59    <string>hanawalletmembers</string>
60    <string>ktauthexternalcall</string>
61    <string>payprotocolwalletkr</string>
62    <string>newliiv</string>
63    <string>kbbank</string>
64    <string>supertoss</string>
65    <string>liivbank</string>
66    <string>upluscorporation</string>
67    <string>lmslpay</string>
68    <string>naversearchthirdlogin</string>
69    <string>kb-bankpay</string>
70</array>

2. 파트너(상점) 앱으로의 복귀를 위해 Custom User Agent 설정이 필요하므로 configuration.applicationNameForUserAgent또는 webView.customUserAgentpayple-pay-app을 추가해주세요.

·configuration.applicationNameForUserAgent 에 추가

1let configuration = WKWebViewConfiguration()
2configuration.applicationNameForUserAgent = "payple-pay-app"
3let webView = WKWebView(frame: .zero, configuration: configuration)

·또는 webView.customUserAgent 에 추가

1let configuration = WKWebViewConfiguration()
2let webView = WKWebView(frame: .zero, configuration: configuration)
3...
4
5webView.evaluateJavaScript("navigator.userAgent"){(result, error) in
6		let originUserAgent = result as! String
7		let agent = originUserAgent + " payple-pay-app"
8		self.webView.customUserAgent = agent
9}

4. 앱카드 결제창 호출 시 사용하는 파라미터인 PCD_APP_SCHEME 에는 WebViewTest:// 형태의 파트너 앱 스킴을 추가해주세요.