iamport-react-native 2.0.0-rc.0 → 2.0.0

package/src/components/Certification/index.tsx

@@ -1,5 +1,5 @@
-import React, { useRef, useState } from 'react';
-import { Linking, View } from 'react-native';
+import React, { createRef, useState } from 'react';
+import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
 import Loading from '../Loading';
@@ -9,87 +9,97 @@ import { IMPData, Validation } from '../../utils/Validation';
 import { IMPConst } from '../../constants';
 
 import viewStyles from '../../styles';
+import IamportUrl from '../../utils/IamportUrl';
 
 type Props = {
   userCode: string;
   tierCode?: string;
   data: IMPData.CertificationData;
-  loading: any;
+  loading?: any;
   callback: (response: any) => any;
 };
 
 function Certification({ userCode, tierCode, data, loading, callback }: Props) {
   const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
-  const webview = useRef<WebView>();
+  const webview = createRef<WebView>();
+  const validation = new Validation(userCode, loading, callback, data);
+  let redirectUrl = IMPConst.M_REDIRECT_URL;
+  if (data.m_redirect_url !== undefined && data.m_redirect_url.trim() !== '') {
+    redirectUrl = data.m_redirect_url;
+  }
 
-  const validation = new Validation(userCode, loading);
   if (validation.getIsValid()) {
-    const { wrapper, loadingContainer, webViewContainer } = viewStyles;
+    const { loadingContainer, webViewContainer } = viewStyles;
     return (
-      <View style={wrapper}>
-        <View style={webViewContainer}>
-          <WebView
-            ref={(ref) => {
-              if (ref !== null) {
-                webview.current = ref;
-              }
-            }}
-            useWebKit
-            source={{ html: IMPConst.WEBVIEW_SOURCE_HTML }}
-            onLoadEnd={() => {
-              if (!isWebViewLoaded) {
-                // html이 load되고 최초 한번만 inject javascript
-                if (tierCode) {
-                  webview.current?.injectJavaScript(`
+      <>
+        <WebView
+          containerStyle={webViewContainer}
+          ref={webview}
+          source={{ html: IMPConst.WEBVIEW_SOURCE_HTML }}
+          onLoadEnd={() => {
+            if (!isWebViewLoaded) {
+              // html이 load되고 최초 한번만 inject javascript
+              if (tierCode) {
+                webview.current?.injectJavaScript(`
           setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
         `);
-                } else {
-                  webview.current?.injectJavaScript(`
+              } else {
+                webview.current?.injectJavaScript(`
           setTimeout(function() { IMP.init("${userCode}"); });
         `);
-                }
-                webview.current?.injectJavaScript(`
+              }
+              webview.current?.injectJavaScript(`
           setTimeout(function() {
             IMP.certification(${JSON.stringify(data)}, function(response) {
               window.ReactNativeWebView.postMessage(JSON.stringify(response));
             });
           });
         `);
-                setIsWebViewLoaded(true);
-              }
-            }}
-            onMessage={(e) => {
-              const { data } = e.nativeEvent;
-              let response = data;
-              while (decodeURIComponent(response) !== response) {
-                response = decodeURIComponent(response);
-              }
-              response = JSON.parse(response);
+              setIsWebViewLoaded(true);
+            }
+          }}
+          onMessage={(e) => {
+            let data = e.nativeEvent.data;
+            if (decodeURIComponent(data) !== data) {
+              data = decodeURIComponent(data);
+            }
+            let response = JSON.parse(data);
 
-              if (typeof callback === 'function') {
-                callback(response);
-              }
-            }}
-            startInLoadingState
-            renderLoading={() => (
-              <View style={loadingContainer}>{loading || <Loading />}</View>
-            )}
-            originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
-            onShouldStartLoadWithRequest={(request) => {
-              const { url } = request;
-              if (url.startsWith('https://itunes.apple.com')) {
-                Linking.openURL(url);
-                return false;
-              }
-              if (url.startsWith('market://details')) {
-                Linking.openURL(url);
-                return false;
-              }
-              return true;
-            }}
-          />
-        </View>
-      </View>
+            if (typeof callback === 'function') {
+              callback(response);
+            }
+          }}
+          startInLoadingState
+          renderLoading={() => (
+            <View style={loadingContainer}>{loading || <Loading />}</View>
+          )}
+          originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
+          onShouldStartLoadWithRequest={(request) => {
+            const { url } = request;
+            // console.log('url: ' + url);
+            const iamportUrl = new IamportUrl(url);
+            if (iamportUrl.isAppUrl()) {
+              /* 3rd-party 앱 오픈 */
+              iamportUrl.launchApp().catch((e) => {
+                const { code, message } = e;
+                callback({
+                  imp_success: false,
+                  error_code: code,
+                  error_msg: message,
+                });
+              });
+
+              return false;
+            }
+            if (iamportUrl.isPaymentOver(redirectUrl)) {
+              callback(iamportUrl.getQuery());
+              return false;
+            }
+
+            return true;
+          }}
+        />
+      </>
     );
   }
 

package/src/components/ErrorOnParams/index.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  View,
-  Image,
-  Text,
-  // TouchableOpacity,
-  StyleSheet,
-} from 'react-native';
+import { View, Image, Text, StyleSheet } from 'react-native';
 
 const logo = require('../../img/iamport-logo.png');
 
@@ -14,33 +8,20 @@ type ErrorProps = { message: string };
 function ErrorOnParams({ message }: ErrorProps) {
   return (
     <View style={styles.container}>
-      <View style={styles.contents}>
-        <Image style={styles.contents} source={logo} />
-        <Text style={styles.text}>{message}</Text>
-        {/*<TouchableOpacity
-          style={button}
-          onPress={}
-        >
-          <Text>돌아가기</Text>
-        </TouchableOpacity>*/}
-      </View>
+      <Image source={logo} />
+      <Text style={styles.text}>{message}</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  contents: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
   text: {
+    textAlign: 'center',
     fontSize: 16,
     marginTop: 20,
     lineHeight: 25,

package/src/components/Loading/index.tsx

@@ -6,25 +6,17 @@ const logo = require('../../img/iamport-logo.png');
 function Loading() {
   return (
     <View style={styles.container}>
-      <View style={styles.contents}>
-        <Image style={styles.contents} source={logo} />
-        <Text style={styles.text}>잠시만 기다려주세요...</Text>
-      </View>
+      <Image source={logo} />
+      <Text style={styles.text}>잠시만 기다려주세요...</Text>
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    ...StyleSheet.absoluteFillObject,
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  contents: {
     flex: 1,
     alignItems: 'center',
+    flexDirection: 'column',
     justifyContent: 'center',
   },
   text: {

package/src/components/Payment/index.tsx

@@ -14,7 +14,7 @@ type Props = {
   userCode: string;
   tierCode?: string;
   data: IMPData.PaymentData;
-  loading: any;
+  loading?: any;
   callback: (response: any) => any;
 };
 
@@ -27,6 +27,10 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
   const [isInicisTransPaid, setIsInicisTransPaid] = useState(false);
   const webview = createRef<WebView>();
   const smilepayRef = useRef(false);
+  let redirectUrl = IMPConst.M_REDIRECT_URL;
+  if (data.m_redirect_url !== undefined && data.m_redirect_url.trim() !== '') {
+    redirectUrl = data.m_redirect_url;
+  }
 
   useEffect(() => {
     const { pg } = data;
@@ -68,9 +72,9 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
         if (pg.startsWith('html5_inicis') && Platform.OS === 'ios') {
           if (isInicisTransPaid) {
             webview.current?.injectJavaScript(`
-              window.location.href = "${
-                IMPConst.M_REDIRECT_URL
-              }?${iamportUrl.getInicisTransQuery()}";
+              window.location.href = "${redirectUrl}?${iamportUrl.getInicisTransQuery(
+              redirectUrl
+            )}";
             `);
           } else {
             setIsInicisTransPaid(true);
@@ -94,7 +98,7 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
       }
     };
     Linking.addEventListener('url', handleOpenURL);
-  }, [data, isInicisTransPaid, webview]);
+  }, [data, isInicisTransPaid, redirectUrl, webview]);
 
   const removeLoadingNeeded = () => {
     if (showLoading && Platform.OS === 'android') {
@@ -135,30 +139,29 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
     data
   );
   if (validation.getIsValid()) {
-    const { wrapper, loadingContainer, webViewContainer } = viewStyles;
+    const { loadingContainer, webViewContainer } = viewStyles;
     return (
-      <View style={wrapper}>
-        <View style={webViewContainer}>
-          <WebView
-            ref={webview}
-            source={webviewSource}
-            onLoadEnd={() => {
-              if (!isWebViewLoaded) {
-                data.m_redirect_url = IMPConst.M_REDIRECT_URL;
-                if (data.pg.startsWith('eximbay')) {
-                  data.popup = false;
-                }
+      <>
+        <WebView
+          containerStyle={webViewContainer}
+          ref={webview}
+          source={webviewSource}
+          onLoadEnd={() => {
+            if (!isWebViewLoaded) {
+              if (data.pg.startsWith('eximbay')) {
+                data.popup = false;
+              }
 
-                if (tierCode) {
-                  webview.current?.injectJavaScript(`
+              if (tierCode) {
+                webview.current?.injectJavaScript(`
                     setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
                   `);
-                } else {
-                  webview.current?.injectJavaScript(`
+              } else {
+                webview.current?.injectJavaScript(`
                     setTimeout(function() { IMP.init("${userCode}"); });
                   `);
-                }
-                webview.current?.injectJavaScript(`
+              }
+              webview.current?.injectJavaScript(`
                   setTimeout(function() {
                     IMP.request_pay(${JSON.stringify(
                       data
@@ -167,73 +170,69 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
                     });
                   });
                 `);
-                setIsWebViewLoaded(true);
-              }
+              setIsWebViewLoaded(true);
+            }
 
-              // only for Android
-              if (removeLoadingNeeded()) {
-                setShowLoading(false);
-              }
-            }}
-            /* PG사가 callback을 지원하는 경우, 결제결과를 받아 callback을 실행한다 */
-            onMessage={(e) => {
-              const { data } = e.nativeEvent;
-              /**
-               * [v1.6.0] 다날의 경우 response에 주문명(name)이 포함되어 있는데
-               * 주문명에 %가 들어갈 경우, decodeURIComponent시 URI malformed 에러가 발생하는 것 대비해
-               * 우선 encodeURIComponent를 한 후, decodeURIComponent가 끝나면
-               * 최종적으로 decodeURIComponent를 한 번 더 한다
-               */
-              let response = encodeURIComponent(data);
-              while (decodeURIComponent(response) !== data) {
-                response = decodeURIComponent(response);
-              }
-              response = decodeURIComponent(response);
-              response = JSON.parse(response);
+            // only for Android
+            if (removeLoadingNeeded()) {
+              setShowLoading(false);
+            }
+          }}
+          /* PG사가 callback을 지원하는 경우, 결제결과를 받아 callback을 실행한다 */
+          onMessage={(e) => {
+            /**
+             * [v1.6.0] 다날의 경우 response에 주문명(name)이 포함되어 있는데
+             * 주문명에 %가 들어갈 경우, decodeURIComponent시 URI malformed 에러가 발생하는 것 대비해
+             * 우선 encodeURIComponent를 한 후, decodeURIComponent가 끝나면
+             * 최종적으로 decodeURIComponent를 한 번 더 한다
+             */
+            const encoded = encodeURIComponent(e.nativeEvent.data);
+            const decoded = decodeURIComponent(encoded);
+            const response = JSON.parse(decoded);
+            if (typeof callback === 'function') {
               callback(response);
-            }}
-            originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
-            sharedCookiesEnabled={true}
-            onShouldStartLoadWithRequest={(request) => {
-              const { url } = request;
-              const iamportUrl = new IamportUrl(url);
-              if (iamportUrl.isAppUrl()) {
-                /* 3rd-party 앱 오픈 */
-                iamportUrl.launchApp().catch((e) => {
-                  const { code, message } = e;
-                  callback({
-                    imp_success: false,
-                    error_code: code,
-                    error_msg: message,
-                  });
+            }
+          }}
+          originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
+          sharedCookiesEnabled={true}
+          onShouldStartLoadWithRequest={(request) => {
+            const { url } = request;
+            // console.log(`url: ${url}`);
+            const iamportUrl = new IamportUrl(url);
+            if (iamportUrl.isAppUrl()) {
+              /* 3rd-party 앱 오픈 */
+              iamportUrl.launchApp().catch((e) => {
+                const { code, message } = e;
+                callback({
+                  imp_success: false,
+                  error_code: code,
+                  error_msg: message,
                 });
+              });
 
-                return false;
-              }
-              if (iamportUrl.isPaymentOver()) {
+              return false;
+            }
+            if (iamportUrl.isPaymentOver(redirectUrl)) {
+              if (typeof callback === 'function') {
                 callback(iamportUrl.getQuery());
-                return false;
               }
-              if (
-                isWebViewLoaded &&
-                showLoading &&
-                iamportUrl.isIframeLoaded()
-              ) {
-                /**
-                 * only for IOS
-                 * iframe이 load되면(url이 about:blank 또는 https://service.iamport.kr이 아니면)
-                 * webview의 loading 상태를 해제한다
-                 */
-                setShowLoading(false);
-              }
-              return true;
-            }}
-          />
-        </View>
+              return false;
+            }
+            if (isWebViewLoaded && showLoading && iamportUrl.isIframeLoaded()) {
+              /**
+               * only for IOS
+               * iframe이 load되면(url이 about:blank 또는 https://service.iamport.kr이 아니면)
+               * webview의 loading 상태를 해제한다
+               */
+              setShowLoading(false);
+            }
+            return true;
+          }}
+        />
         {showLoading && (
           <View style={loadingContainer}>{loading || <Loading />}</View>
         )}
-      </View>
+      </>
     );
   }
 

package/src/constants/index.ts

@@ -25,6 +25,7 @@ namespace IMPConst {
     'alipay',
     'bluewalnut',
     'tosspay',
+    'smartro',
   ] as const;
 
   export const PAY_METHOD = [
@@ -77,7 +78,7 @@ namespace IMPConst {
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 
     <script type='text/javascript' src='https://code.jquery.com/jquery-latest.min.js' ></script>
-    <script type='text/javascript' src='https://cdn.iamport.kr/js/iamport.payment-1.1.8.js'></script>
+    <script type='text/javascript' src='https://cdn.iamport.kr/js/iamport.payment-1.2.0.js'></script>
   </head>
   <body></body>
 </html>
@@ -106,9 +107,14 @@ namespace IMPConst {
     LPAY: 'lpayapp',
     SSGPAY: 'shinsegaeeasypayment',
     KPAY: 'kpay',
+    KBANKPAY: 'ukbanksmartbanknonloginpay',
     PAYNOW: 'lguthepay-xpay',
     WOORIWONCARD: 'com.wooricard.smartapp',
     LPOINT: 'lmslpay',
+    KTFAUTH: 'ktauthexternalcall',
+    LGTAUTH: 'upluscorporation',
+    SKTAUTH: 'tauthlink',
+    WOORIWONBANK: 'wooribank',
   } as const;
 
   export const ANDROID_PACKAGE = {
@@ -134,9 +140,14 @@ namespace IMPConst {
     PACKAGE_LPAY: 'com.lotte.lpay',
     PACKAGE_SSGPAY: 'com.ssg.serviceapp.android.egiftcertificate',
     PACKAGE_KPAY: 'com.inicis.kpay',
+    PACKAGE_KBANKPAY: 'com.kbankwith.smartbank',
     PACKAGE_PAYNOW: 'com.lguplus.paynow',
     PACKAGE_WOORIWONCARD: 'com.wooricard.smartapp',
     PACKAGE_LPOINT: 'com.lottemembers.android',
+    PACKAGE_KTFAUTH: 'com.kt.ktauth',
+    PACKAGE_LGTAUTH: 'com.lguplus.smartotp',
+    PACKAGE_SKTAUTH: 'com.sktelecom.tauth',
+    PACKAGE_WOORIWONBANK: 'com.wooribank.smart.npib',
   } as const;
 }
 

package/src/utils/IamportUrl.ts

@@ -32,8 +32,7 @@ class IamportUrl {
               this.path = scheme + '://' + host;
               this.scheme = scheme;
             } else if (s.startsWith('package')) {
-              let p = s.split('=')[1];
-              this.package = p;
+              this.package = s.split('=')[1];
             }
           });
         } else {
@@ -49,8 +48,8 @@ class IamportUrl {
     return this.url;
   }
 
-  isPaymentOver() {
-    return this.url.includes(IMPConst.M_REDIRECT_URL);
+  isPaymentOver(redirectUrl: string) {
+    return this.url.includes(redirectUrl);
   }
 
   isAppUrl() {
@@ -98,7 +97,7 @@ class IamportUrl {
           return IMPConst.IOS_MARKET_PREFIX + 'id1036098908';
         case 'wooripay': // 우리페이
           return IMPConst.IOS_MARKET_PREFIX + 'id1201113419';
-        case 'com.wooricard.wcard':
+        case 'com.wooricard.wcard': // 우리WON카드
           return IMPConst.IOS_MARKET_PREFIX + 'id1499598869';
         case 'nhallonepayansimclick': // NH농협카드 올원페이(앱카드)
           return IMPConst.IOS_MARKET_PREFIX + 'id1177889176';
@@ -116,6 +115,10 @@ class IamportUrl {
           return IMPConst.IOS_MARKET_PREFIX + 'id1126232922';
         case 'supertoss': // 토스
           return IMPConst.IOS_MARKET_PREFIX + 'id839333328';
+        case 'newsmartpib': // 우리WON뱅킹
+          return IMPConst.IOS_MARKET_PREFIX + 'id1470181651';
+        case 'ukbanksmartbanknonloginpay': // 케이뱅크 페이
+          return IMPConst.IOS_MARKET_PREFIX + 'id1178872627';
         default:
           return this.url;
       }
@@ -234,6 +237,11 @@ class IamportUrl {
             IMPConst.ANDROID_MARKET_PREFIX +
             IMPConst.ANDROID_PACKAGE.PACKAGE_KPAY
           );
+        case IMPConst.ANDROID_APPSCHEME.KBANKPAY:
+          return (
+            IMPConst.ANDROID_MARKET_PREFIX +
+            IMPConst.ANDROID_PACKAGE.PACKAGE_KBANKPAY
+          );
         case IMPConst.ANDROID_APPSCHEME.PAYNOW:
           return (
             IMPConst.ANDROID_MARKET_PREFIX +
@@ -249,6 +257,26 @@ class IamportUrl {
             IMPConst.ANDROID_MARKET_PREFIX +
             IMPConst.ANDROID_PACKAGE.PACKAGE_LPOINT
           );
+        case IMPConst.ANDROID_APPSCHEME.KTFAUTH:
+          return (
+            IMPConst.ANDROID_MARKET_PREFIX +
+            IMPConst.ANDROID_PACKAGE.PACKAGE_KTFAUTH
+          );
+        case IMPConst.ANDROID_APPSCHEME.LGTAUTH:
+          return (
+            IMPConst.ANDROID_MARKET_PREFIX +
+            IMPConst.ANDROID_PACKAGE.PACKAGE_LGTAUTH
+          );
+        case IMPConst.ANDROID_APPSCHEME.SKTAUTH:
+          return (
+            IMPConst.ANDROID_MARKET_PREFIX +
+            IMPConst.ANDROID_PACKAGE.PACKAGE_SKTAUTH
+          );
+        case IMPConst.ANDROID_APPSCHEME.WOORIWONBANK:
+          return (
+            IMPConst.ANDROID_MARKET_PREFIX +
+            IMPConst.ANDROID_PACKAGE.PACKAGE_WOORIWONBANK
+          );
         default:
           return this.url;
       }
@@ -266,13 +294,10 @@ class IamportUrl {
     return queryString.extract(decodedUrl);
   }
 
-  getInicisTransQuery() {
+  getInicisTransQuery(redirectUrl: string) {
     const { m_redirect_url, imp_uid, merchant_uid } = this.getQuery();
-    const inicisTransQuery = {
-      imp_uid: imp_uid,
-      merchant_uid,
-    };
-    if (m_redirect_url?.includes(IMPConst.M_REDIRECT_URL)) {
+    const inicisTransQuery = { imp_uid, merchant_uid };
+    if (m_redirect_url?.includes(redirectUrl)) {
       inicisTransQuery.merchant_uid =
         typeof merchant_uid === 'object' ? merchant_uid![0] : merchant_uid;
     } else {
@@ -282,18 +307,13 @@ class IamportUrl {
   }
 
   async launchApp() {
-    if (Platform.OS === 'ios') {
-      if (await Linking.canOpenURL(this.url)) {
-        return await Linking.openURL(this.getAppUrl() as string);
-      }
-      try {
-        return await Linking.openURL(this.getAppUrl() as string);
-      } catch (e) {
-        return await Linking.openURL(this.getMarketUrl());
-      }
-    } else if (Platform.OS === 'android') {
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
       try {
-        return await Linking.openURL(this.getAppUrl() as string);
+        if (await Linking.canOpenURL(this.url)) {
+          return await Linking.openURL(this.getAppUrl() as string);
+        } else {
+          return await Linking.openURL(this.getAppUrl() as string);
+        }
       } catch (e) {
         return await Linking.openURL(this.getMarketUrl());
       }