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

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

@@ -78,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>
@@ -107,12 +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 = {
@@ -138,12 +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 +
@@ -264,6 +272,11 @@ class IamportUrl {
             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;
       }
@@ -281,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 {
@@ -297,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);
-      }
+    if (Platform.OS === 'ios' || Platform.OS === 'android') {
       try {
-        return await Linking.openURL(this.getAppUrl() as string);
-      } catch (e) {
-        return await Linking.openURL(this.getMarketUrl());
-      }
-    } else if (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());
       }

package/src/utils/Validation.ts

@@ -41,9 +41,22 @@ class Validation {
     this.validateCallback();
   }
 
-  validateCallback() {}
+  validateCallback() {
+    if (this.callback !== undefined && typeof this.callback !== 'function') {
+      this.isValid = false;
+      this.message = '콜백 함수(callback)가 올바르지 않습니다.';
+      return;
+    }
+    this.validateData();
+  }
 
-  validateData() {}
+  validateData() {
+    if (this.data?.popup) {
+      this.isValid = false;
+      this.message = '해당 모듈은 팝업을 지원하지 않습니다.';
+      return;
+    }
+  }
 
   getIsValid() {
     return this.isValid;
@@ -55,17 +68,49 @@ class Validation {
 }
 
 namespace IMPData {
-  export interface CertificationData {
+  interface ICertificationData {
     merchant_uid: string;
     company: string;
     carrier: string;
     name: string;
     phone: string;
     min_age?: string;
+    popup?: boolean;
+    m_redirect_url?: string;
+  }
+
+  export class CertificationData implements ICertificationData {
+    constructor(
+      carrier: string,
+      company: string,
+      merchant_uid: string,
+      name: string,
+      phone: string,
+      min_age?: string,
+      popup?: boolean,
+      m_redirect_url?: string
+    ) {
+      this.carrier = carrier;
+      this.company = company;
+      this.merchant_uid = merchant_uid;
+      this.name = name;
+      this.phone = phone;
+      this.min_age = min_age;
+      this.popup = popup;
+      this.m_redirect_url = m_redirect_url;
+    }
+
+    carrier: string;
+    company: string;
+    merchant_uid: string;
+    name: string;
+    phone: string;
+    min_age?: string;
+    popup?: boolean;
     m_redirect_url?: string;
   }
 
-  export interface PaymentData {
+  interface IPaymentData {
     pg: string;
     pay_method: string;
     currency?: string;
@@ -95,6 +140,98 @@ namespace IMPData {
     naverUseCfm?: string;
     naverProducts?: object[];
     m_redirect_url?: string;
+    niceMobileV2?: boolean;
+  }
+
+  export class PaymentData implements IPaymentData {
+    constructor(
+      amount: string | number,
+      buyer_email: string,
+      buyer_name: string,
+      buyer_tel: string,
+      escrow: boolean,
+      merchant_uid: string,
+      name: string,
+      pay_method: string,
+      pg: string,
+      language?: string,
+      naverPopupMode?: boolean,
+      naverProducts?: object[],
+      naverUseCfm?: string,
+      niceMobileV2?: boolean,
+      notice_url?: string | string[],
+      m_redirect_url?: string,
+      currency?: string,
+      custom_data?: object,
+      customer_uid?: string,
+      digital?: boolean,
+      display?: { card_quota: number[] },
+      buyer_postcode?: string,
+      app_scheme?: string,
+      biz_num?: string,
+      buyer_addr?: string,
+      popup?: boolean,
+      tax_free?: number,
+      vbank_due?: string
+    ) {
+      this.amount = amount;
+      this.app_scheme = app_scheme;
+      this.biz_num = biz_num;
+      this.buyer_addr = buyer_addr;
+      this.buyer_email = buyer_email;
+      this.buyer_name = buyer_name;
+      this.buyer_postcode = buyer_postcode;
+      this.buyer_tel = buyer_tel;
+      this.currency = currency;
+      this.custom_data = custom_data;
+      this.customer_uid = customer_uid;
+      this.digital = digital;
+      this.display = display;
+      this.escrow = escrow;
+      this.language = language;
+      this.m_redirect_url = m_redirect_url;
+      this.merchant_uid = merchant_uid;
+      this.name = name;
+      this.naverPopupMode = naverPopupMode;
+      this.naverProducts = naverProducts;
+      this.naverUseCfm = naverUseCfm;
+      this.niceMobileV2 = niceMobileV2;
+      this.notice_url = notice_url;
+      this.pay_method = pay_method;
+      this.pg = pg;
+      this.popup = popup;
+      this.tax_free = tax_free;
+      this.vbank_due = vbank_due;
+    }
+
+    amount: string | number;
+    app_scheme?: string;
+    biz_num?: string;
+    buyer_addr?: string;
+    buyer_email: string;
+    buyer_name: string;
+    buyer_postcode?: string;
+    buyer_tel: string;
+    currency?: string;
+    custom_data?: object;
+    customer_uid?: string;
+    digital?: boolean;
+    display?: { card_quota: number[] };
+    escrow: boolean;
+    language?: string;
+    m_redirect_url?: string;
+    merchant_uid: string;
+    name: string;
+    naverPopupMode?: boolean;
+    naverProducts?: object[];
+    naverUseCfm?: string;
+    niceMobileV2?: boolean = true;
+    notice_url?: string | string[];
+    pay_method: string;
+    pg: string;
+    popup?: boolean;
+    tax_free?: number;
+    vbank_due?: string;
   }
 }
 

package/src/utils/ValidationForPayment.ts

@@ -6,20 +6,11 @@ class ValidationForPayment extends Validation {
     userCode: string,
     loading: object,
     callback: (response: any) => any,
-    data: IMPData.PaymentData,
+    data: IMPData.PaymentData
   ) {
     super(userCode, loading, callback, data);
   }
 
-  validateCallback() {
-    if (this.callback !== undefined && typeof this.callback !== 'function') {
-      this.isValid = false;
-      this.message = '콜백 함수(callback)가 올바르지 않습니다.';
-      return;
-    }
-    this.validateData();
-  }
-
   validateData() {
     const {
       pg,
@@ -83,7 +74,7 @@ class ValidationForPayment extends Validation {
               '올바르지 않은 언어 설정입니다.\n 선택하신 PG사는 ko, en, zh jp 옵션을 지원합니다.';
             return;
           }
-        } else if (IMPConst.LANGUAGE.indexOf(language as any) !== -1) {
+        } else if (IMPConst.LANGUAGE.indexOf(language as any) === -1) {
           this.isValid = false;
           this.message =
             '올바르지 않은 언어 설정입니다.\n 선택하신 PG사는 ko 또는 en 옵션을 지원합니다.';
@@ -109,13 +100,13 @@ class ValidationForPayment extends Validation {
       return;
     }
 
-    if (pg === 'paypal' && popup) {
+    if (popup) {
       this.isValid = false;
-      this.message = '해당 모듈에서 popup은\n페이팔 결제시 지원하지 않습니다.';
+      this.message = '해당 모듈은 팝업을 지원하지 않습니다.';
       return;
     }
 
-    if ((pg === 'naverpay') && naverPopupMode) {
+    if (pg === 'naverpay' && naverPopupMode) {
       this.isValid = false;
       this.message =
         '해당 모듈에서 popup은\n네이버 페이 결제시 지원하지 않습니다.';