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

package/src/components/Payment/index.tsx

@@ -0,0 +1,243 @@
+import React, { createRef, useEffect, useRef, useState } from 'react';
+import type { IMPData } from '../../utils/Validation';
+import ValidationForPayment from '../../utils/ValidationForPayment';
+import ErrorOnParams from '../ErrorOnParams';
+import { Linking, Platform, View } from 'react-native';
+import { IMPConst } from '../../constants';
+import IamportUrl from '../../utils/IamportUrl';
+import WebView from 'react-native-webview';
+import viewStyles from '../../styles';
+import Loading from '../Loading';
+import type { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
+
+type Props = {
+  userCode: string;
+  tierCode?: string;
+  data: IMPData.PaymentData;
+  loading: any;
+  callback: (response: any) => any;
+};
+
+function Payment({ userCode, tierCode, data, loading, callback }: Props) {
+  const [webviewSource, setWebviewSource] = useState<WebViewSource>({
+    html: IMPConst.WEBVIEW_SOURCE_HTML,
+  });
+  const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
+  const [showLoading, setShowLoading] = useState(true);
+  const [isInicisTransPaid, setIsInicisTransPaid] = useState(false);
+  const webview = createRef<WebView>();
+  const smilepayRef = useRef(false);
+
+  useEffect(() => {
+    const { pg } = data;
+    if (
+      pg.startsWith('smilepay') &&
+      Platform.OS === 'ios' &&
+      !smilepayRef.current
+    ) {
+      /**
+       * [feature/smilepay] IOS - 스마일페이 대비 코드 작성
+       * 스마일페이 결제창을 iframe 방식으로 띄우기 때문에 WKWebView에서 서드 파티 쿠키가 허용되지 않아
+       * WKWebView의 baseUrl을 강제로 스마일페이 URL로 적용
+       */
+      setWebviewSource({
+        ...webviewSource,
+        baseUrl: IMPConst.SMILEPAY_BASE_URL,
+      });
+      smilepayRef.current = true;
+    }
+  }, [data, webviewSource]);
+
+  useEffect(() => {
+    const handleOpenURL = (event: { url: string }) => {
+      const { pg, pay_method } = data;
+      if (pay_method === 'trans') {
+        const iamportUrl = new IamportUrl(event.url);
+        /**
+         * [IOS] 웹 표준 이니시스 - 실시간 계좌이체 대비
+         * 아래 로직대로 동작해야 최종적으로 결제가 승인된 후 콜백 함수가 호출됨
+         * 1. 사파리 앱에서 복귀(app_scheme://imp_uid=%26merchant_uid=%26m_redirect_url=)
+         * 2. 최종 결제 승인을 위해 이니시스가 HTTP 리퀘스트 호출
+         * 3. "다음" 버튼이 있는 최종 화면으로 이동
+         * 4. "다음" 버튼을 클릭
+         * 5. 1번과 마찬가지로 app_scheme://imp_uid=%26merchant_uid=%26m_redirect_url=로 HTTP 리퀘스트 호출
+         * 6. 콜백 함수 호출
+         * 따라서 현재 handleOpenURL이 트리거 되는 사유가 1번 때문인지 5번 때문인지 구분이 필요하여
+         * 이를 위한 isInicisTransPaid 플래그 추가
+         */
+        if (pg.startsWith('html5_inicis') && Platform.OS === 'ios') {
+          if (isInicisTransPaid) {
+            webview.current?.injectJavaScript(`
+              window.location.href = "${
+                IMPConst.M_REDIRECT_URL
+              }?${iamportUrl.getInicisTransQuery()}";
+            `);
+          } else {
+            setIsInicisTransPaid(true);
+          }
+        }
+
+        /* 나이스 - 실시간 계좌이체 대비 */
+        if (pg.startsWith('nice')) {
+          const queryParameters = iamportUrl.getQuery();
+          const scheme = iamportUrl.scheme;
+          let niceTransRedirectionUrl;
+          if (scheme === data.app_scheme?.toLowerCase()) {
+            if (queryParameters.callbackparam1 != null) {
+              niceTransRedirectionUrl = queryParameters.callbackparam1;
+            }
+          }
+          webview.current?.injectJavaScript(`
+            window.location.href = "${niceTransRedirectionUrl}?${iamportUrl.getStringifiedQuery()}";
+          `);
+        }
+      }
+    };
+    Linking.addEventListener('url', handleOpenURL);
+  }, [data, isInicisTransPaid, webview]);
+
+  const removeLoadingNeeded = () => {
+    if (showLoading && Platform.OS === 'android') {
+      // 로딩상태. 안드로이드 플랫폼
+      if (isWebViewLoaded) {
+        // 웹뷰 로드 끝. 리디렉션 방식
+        return true;
+      }
+      return isIframeWayPayment();
+    }
+    // IOS
+    return false;
+  };
+
+  const isIframeWayPayment = () => {
+    const { pg, pay_method, customer_uid } = data;
+    if (pg.startsWith('html5_inicis') && customer_uid) {
+      // 이니시스 빌링결제
+      return true;
+    }
+    if (pg.startsWith('mobilians') && pay_method === 'phone') {
+      // 모빌리언스 휴대폰 소액결제
+      return true;
+    }
+    return (
+      pg.startsWith('danal') ||
+      pg.startsWith('danal_tpay') ||
+      pg.startsWith('smilepay') ||
+      pg.startsWith('payco') ||
+      pg.startsWith('bluewalnut')
+    );
+  };
+
+  const validation = new ValidationForPayment(
+    userCode,
+    loading,
+    callback,
+    data
+  );
+  if (validation.getIsValid()) {
+    const { wrapper, 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;
+                }
+
+                if (tierCode) {
+                  webview.current?.injectJavaScript(`
+                    setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
+                  `);
+                } else {
+                  webview.current?.injectJavaScript(`
+                    setTimeout(function() { IMP.init("${userCode}"); });
+                  `);
+                }
+                webview.current?.injectJavaScript(`
+                  setTimeout(function() {
+                    IMP.request_pay(${JSON.stringify(
+                      data
+                    )}, function(response) {
+                      window.ReactNativeWebView.postMessage(JSON.stringify(response));
+                    });
+                  });
+                `);
+                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);
+              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,
+                  });
+                });
+
+                return false;
+              }
+              if (iamportUrl.isPaymentOver()) {
+                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>
+        {showLoading && (
+          <View style={loadingContainer}>{loading || <Loading />}</View>
+        )}
+      </View>
+    );
+  }
+
+  return <ErrorOnParams message={validation.getMessage()} />;
+}
+
+export default Payment;

package/src/constants/index.ts

@@ -0,0 +1,150 @@
+namespace IMPConst {
+  export const PG = [
+    'html5_inicis',
+    'inicis',
+    'uplus',
+    'kcp',
+    'kcp_billing',
+    'nice',
+    'jtnet',
+    'kakao',
+    'kakaopay',
+    'danal',
+    'danal_tpay',
+    'kicc',
+    'settle',
+    'mobilians',
+    'payco',
+    'eximbay',
+    'paypal',
+    'naverco',
+    'naverpay',
+    'smilepay',
+    'chai',
+    'payple',
+    'alipay',
+    'bluewalnut',
+    'tosspay',
+    'smartro',
+  ] as const;
+
+  export const PAY_METHOD = [
+    'card',
+    'trans',
+    'vbank',
+    'phone',
+    'samsung',
+    'kpay',
+    'cultureland',
+    'smartculture',
+    'happymoney',
+    'booknlife',
+    'kakaopay',
+    'lpay',
+    'payco',
+    'ssgpay',
+    'tosspay',
+    // 엑심베이 전용
+    'unionpay', // 유니온페이
+    'alipay', // 알리페이
+    'tenpay', // 텐페이
+    'wechat', // 위챗페이
+    'molpay', // 몰페이
+    'paysbuy', // 태국 paysbuy
+  ] as const;
+  export const CURRENCY = ['KRW', 'USD', 'EUR', 'JPY'] as const;
+  export const LANGUAGE = ['ko', 'en'] as const;
+  export const EN_AVAILABLE_PG = [
+    'inicis',
+    'html5_inicis',
+    'uplus',
+    'nice',
+    'eximbay',
+  ] as const;
+  export const CARRIERS = ['SKT', 'KTF', 'LGT', 'MVNO'] as const;
+
+  export const ANDROID_MARKET_PREFIX = 'market://details?id=';
+  export const IOS_MARKET_PREFIX = 'https://apps.apple.com/app/';
+  export const M_REDIRECT_URL = 'http://detectchangingwebview/iamport/rn';
+  export const NICE_TRANS_URL =
+    'https://web.nicepay.co.kr/smart/bank/payTrans.jsp';
+  export const IMP_SDK_URL = 'https://service.iamport.kr';
+  export const SMILEPAY_BASE_URL = 'https://www.mysmilepay.com';
+
+  export const WEBVIEW_SOURCE_HTML = `
+<html>
+  <head>
+    <meta http-equiv='content-type' content='text/html; charset=utf-8'>
+    <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>
+  </head>
+  <body></body>
+</html>
+`;
+
+  export const ANDROID_APPSCHEME = {
+    ISP: 'ispmobile',
+    BANKPAY: 'kftc-bankpay',
+    KB_BANKPAY: 'kb-bankpay',
+    NH_BANKPAY: 'nhb-bankpay',
+    MG_BANKPAY: 'mg-bankpay',
+    KN_BANKPAY: 'kn-bankpay',
+    KAKAOPAY: 'kakaotalk',
+    SMILEPAY: 'smilepayapp',
+    CHAIPAY: 'chaipayment',
+    PAYCO: 'payco',
+    HYUNDAICARD: 'hdcardappcardansimclick',
+    TOSS: 'supertoss',
+    SHINHANCARD: 'shinhan-sr-ansimclick',
+    HANACARD: 'cloudpay',
+    SAMSUNGCARD: 'mpocket.online.ansimclick',
+    KBCARD: 'kb-acp',
+    NHCARD: 'nhallonepayansimclick',
+    CITICARD: 'citimobileapp',
+    LOTTECARD: 'lotteappcard',
+    LPAY: 'lpayapp',
+    SSGPAY: 'shinsegaeeasypayment',
+    KPAY: 'kpay',
+    PAYNOW: 'lguthepay-xpay',
+    WOORIWONCARD: 'com.wooricard.smartapp',
+    LPOINT: 'lmslpay',
+    KTFAUTH: 'ktauthexternalcall',
+    LGTAUTH: 'upluscorporation',
+    SKTAUTH: 'tauthlink',
+  } as const;
+
+  export const ANDROID_PACKAGE = {
+    PACKAGE_ISP: 'kvp.jjy.MispAndroid320',
+    PACKAGE_BANKPAY: 'com.kftc.bankpay.android',
+    PACKAGE_KB_BANKPAY: 'com.kbstar.liivbank',
+    PACKAGE_NH_BANKPAY: 'com.nh.cashcardapp',
+    PACKAGE_MG_BANKPAY: 'kr.co.kfcc.mobilebank',
+    PACKAGE_KN_BANKPAY: 'com.knb.psb',
+    PACKAGE_KAKAOPAY: 'com.kakao.talk',
+    PACKAGE_SMILEPAY: 'com.mysmilepay.app',
+    PACKAGE_CHAIPAY: 'finance.chai.app',
+    PACKAGE_PAYCO: 'com.nhnent.payapp',
+    PACKAGE_HYUNDAICARD: 'com.hyundaicard.appcard',
+    PACKAGE_TOSS: 'viva.republica.toss',
+    PACKAGE_SHINHANCARD: 'com.shcard.smartpay',
+    PACKAGE_HANACARD: 'com.hanaskard.paycla',
+    PACKAGE_SAMSUNGCARD: 'kr.co.samsungcard.mpocket',
+    PACKAGE_KBCARD: 'com.kbcard.cxh.appcard',
+    PACKAGE_NHCARD: 'nh.smart.nhallonepay',
+    PACKAGE_CITICARD: 'kr.co.citibank.citimobile',
+    PACKAGE_LOTTECARD: 'com.lcacApp',
+    PACKAGE_LPAY: 'com.lotte.lpay',
+    PACKAGE_SSGPAY: 'com.ssg.serviceapp.android.egiftcertificate',
+    PACKAGE_KPAY: 'com.inicis.kpay',
+    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',
+  } as const;
+}
+
+export { IMPConst };

package/src/{index.js → index.tsx}

@@ -1,9 +1,12 @@
 import Payment from './components/Payment';
 import Certification from './components/Certification';
 
+export { IMPData } from './utils/Validation';
+export { IMPConst } from './constants';
+
 const IMP = {
   Payment,
   Certification,
 };
 
-export default IMP;
+export default IMP;

package/src/{styles.js → styles.ts}

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
 
-export const viewStyles = StyleSheet.create({
+const viewStyles = StyleSheet.create({
   wrapper: {
     flex: 1,
   },
@@ -18,3 +18,5 @@ export const viewStyles = StyleSheet.create({
     zIndex: 0,
   },
 });
+
+export default viewStyles;