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

package/src/components/Payment/PaymentWebView.js

@@ -1,285 +0,0 @@
-
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { WebView } from 'react-native-webview';
-import { View, Linking, Platform, NativeModules } from 'react-native';
-
-import Loading from '../Loading';
-import ErrorOnParams from '../ErrorOnParams';
-
-import IamportUrl from '../../utils/IamportUrl.js';
-import ValidationForPayment from '../../utils/ValidationForPayment.js';
-import { viewStyles } from '../../styles';
-import {
-  PAY_METHOD,
-  CURRENCY,
-  WEBVIEW_SOURCE_HTML,
-  SMILEPAY_URL,
-} from '../../constants';
-
-const { RNCWebView } = NativeModules;
-
-export function PaymentWebView({
-  userCode,
-  tierCode,
-  data,
-  loading,
-  callback,
-  open3rdPartyApp,
-}) {
-  const [webviewSource, setWebviewSource] = useState({ html: WEBVIEW_SOURCE_HTML });
-  const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
-  const [showLoading, setShowLoading] = useState(true);
-  const [isInicisTransPaid, setIsInicisTransPaid] = useState(false);
-
-  useEffect(() => {
-    const { pg } = data;
-    if (pg.startsWith('smilepay') && Platform.OS === 'ios') {
-      /**
-       * [feature/smilepay] IOS - 스마일페이 대비 코드 작성
-       * 스마일페이 결제창을 iframe 방식으로 띄우기 때문에 WKWebView에서 서드 파티 쿠키가 허용되지 않아
-       * WKWebView의 baseUrl을 강제로 스마일페이 URL로 적용
-       */
-      setWebviewSource({ ...webviewSource, baseUrl: SMILEPAY_URL });
-    }
-  }, []);
-
-  useEffect(() => {
-    function handleOpenURL(event) {
-      const { pg, pay_method } = data;
-      if (pay_method === 'trans') {
-        const { url } = event;
-        const iamportUrl = new IamportUrl(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) {
-            this.xdm.injectJavaScript(`
-              window.location.href = "${IamportUrl.M_REDIRECT_URL}?${iamportUrl.getInicisTransQuery()}";
-            `);
-          } else {
-            setIsInicisTransPaid(true);
-          }
-        }
-
-        /* 나이스 - 실시간 계좌이체 대비 */
-        if (pg.startsWith('nice')) {
-          this.xdm.injectJavaScript(`
-            window.location.href = "${IamportUrl.NICE_TRANS_URL}?${iamportUrl.getStringifiedQuery()}";
-          `);
-        }
-      }
-    }
-    Linking.addEventListener('url', handleOpenURL);
-    
-    return function cleanup() {
-      Linking.removeEventListener('url', handleOpenURL);
-    }
-  });
-
-  function onLoadEnd() {
-    if (!isWebViewLoaded) {
-      // html이 load되고 최초 한번만 inject javascript
-      data.m_redirect_url = IamportUrl.M_REDIRECT_URL;
-      if (data.pg === 'eximbay') {
-        data.popup = false;
-      }
-
-      if (tierCode) {
-        this.xdm.injectJavaScript(`
-          setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
-        `);
-      } else {
-        this.xdm.injectJavaScript(`
-          setTimeout(function() { IMP.init("${userCode}"); });
-        `);
-      }
-      this.xdm.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);
-    }
-  }
-
-  function removeLoadingNeeded() {
-    const isAndroid = Platform.OS === 'android';
-    if (showLoading && isAndroid) {
-      // 로딩상태. 안드로이드 플랫폼
-      if (isWebViewLoaded) {
-        // 웹뷰 로드 끝. 리디렉션 방식
-        return true;
-      }
-      // 웹뷰 로드 중. iframe 방식
-      return isIframeWayPayment();
-    }
-    // IOS
-    return false;
-  }
-
-  function 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;
-    }
-    if (
-      pg.startsWith('danal') || // 다날 일반결제
-      pg.startsWith('danal_tpay') || // 다날 휴대폰 소액결제
-      pg.startsWith('smilepay') || // 스마일페이
-      pg.startsWith('payco') || // 페이코
-      pg.startsWith('bluewalnut')  // 블루월넛
-    ) {
-      return true;
-    }
-    return false;
-  }
-  
-  /* PG사가 callback을 지원하는 경우, 결제결과를 받아 callback을 실행한다 */
-  function 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);
-  }
-
-  function onShouldStartLoadWithRequest(request) {
-    const { url, lockIdentifier } = request;
-    const iamportUrl = new IamportUrl(url);
-    if (iamportUrl.isAppUrl()) {
-      if (lockIdentifier === 0 /* && react-native-webview 버전이 v10.8.3 이상 */) {
-        /**
-         * [feature/react-native-webview] 웹뷰 첫 렌더링시 lockIdentifier === 0
-         * 이때 무조건 onShouldStartLoadWithRequest를 true 처리하기 때문에
-         * Error Loading Page 에러가 발생하므로
-         * 강제로 lockIdentifier를 1로 변환시키도록 아래 네이티브 코드 호출
-         */
-        RNCWebView.onShouldStartLoadWithRequestCallback(false, lockIdentifier);
-      }
-
-      /* 3rd-party 앱 오픈 */
-      open3rdPartyApp(iamportUrl);
-      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;
-  }
-
-  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={(xdm) => this.xdm = xdm}
-            useWebKit
-            source={webviewSource}
-            onLoadEnd={onLoadEnd}
-            onMessage={onMessage}
-            originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
-            sharedCookiesEnabled
-            onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
-          />
-        </View>
-        {
-          showLoading &&
-          <View style={loadingContainer}>
-            {loading || <Loading />}
-          </View>
-        }
-      </View>
-    );
-  }
-  
-  return <ErrorOnParams message={validation.getMessage()} />;
-}
-
-PaymentWebView.propTypes = {
-  userCode: PropTypes.string.isRequired,
-  tierCode: PropTypes.string,
-  data: PropTypes.shape({
-    pg: PropTypes.string,
-    pay_method: PropTypes.oneOf(PAY_METHOD),
-    currency: PropTypes.oneOf(CURRENCY),
-    notice_url: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(PropTypes.string),
-    ]),
-    display: PropTypes.shape({
-      card_quota: PropTypes.arrayOf(PropTypes.number),
-    }),
-    merchant_uid: PropTypes.string.isRequired,
-    amount: PropTypes.oneOfType([
-      PropTypes.string.isRequired,
-      PropTypes.number.isRequired,
-    ]),
-    buyer_tel: PropTypes.string.isRequired,
-    app_scheme: PropTypes.string.isRequired,
-    escrow: PropTypes.bool,
-    name: PropTypes.string,
-    tax_free: PropTypes.number,
-    buyer_name: PropTypes.string,
-    buyer_email: PropTypes.string,
-    buyer_addr: PropTypes.string,
-    buyer_postcode: PropTypes.string,
-    custom_data: PropTypes.object,
-    vbank_due: PropTypes.string,
-    popup: PropTypes.bool,
-    digital: PropTypes.bool,
-  }),
-  callback: PropTypes.func.isRequired,
-  loading: PropTypes.shape({
-    message: PropTypes.string,
-    image: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  }),
-  open3rdPartyApp: PropTypes.func.isRequired,
-};
-
-export default PaymentWebView;

package/src/components/Payment/index.android.js

@@ -1,51 +0,0 @@
-
-import React from 'react';
-import { Linking, NativeModules } from 'react-native';
-
-import PaymentWebView from './PaymentWebView';
-
-const { Iamport } = NativeModules;
-
-export function Payment({ userCode, tierCode, data, loading, callback }) {
-  async function open3rdPartyApp(iamportUrl) {
-    const url = iamportUrl.getUrl();
-    try {
-      /* 3rd-party 앱 오픈 */
-      const appUrl = await Iamport.getAppUrl(url);
-      Linking.openURL(appUrl)
-      .catch(async () => {
-        /* 앱 미설치시 마켓 오픈 */
-        try {
-          const marketUrl = await Iamport.getMarketUrl(url);
-          Linking.openURL(marketUrl);
-        } catch (e) {
-          handleOpen3rdPartyAppError(e);
-        }
-      });
-    } catch (e) {
-      handleOpen3rdPartyAppError(e);
-    }
-  }
-
-  function handleOpen3rdPartyAppError(e) {
-    const { code, message } = e;
-    callback({
-      imp_success: false,
-      error_code: code,
-      error_msg: message,
-    });
-  }
-
-  return (
-    <PaymentWebView
-      userCode={userCode}
-      tierCode={tierCode}
-      data={data}
-      loading={loading}
-      callback={callback}
-      open3rdPartyApp={open3rdPartyApp}
-    />
-  );
-}
-
-export default Payment;

package/src/components/Payment/index.ios.js

@@ -1,30 +0,0 @@
-
-import React from 'react';
-import { Linking } from 'react-native';
-
-import PaymentWebView from './PaymentWebView';
-
-export function Payment({ userCode, tierCode, data, loading, callback }) {
-
-  function open3rdPartyApp(iamportUrl) {
-    // 앱 오픈
-    Linking.openURL(iamportUrl.getAppUrl())
-    .catch(() => {
-      // 앱 미설치 경우, 마켓 URL로 연결
-      Linking.openURL(iamportUrl.getMarketUrl());
-    });
-  }
-
-  return (
-    <PaymentWebView
-      userCode={userCode}
-      tierCode={tierCode}
-      data={data}
-      loading={loading}
-      callback={callback}
-      open3rdPartyApp={open3rdPartyApp}
-    />
-  );
-}
-
-export default Payment;

package/src/constants/index.js

@@ -1,83 +0,0 @@
-
-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',
-];
-
-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
-];
-const CURRENCY = ['KRW', 'USD', 'EUR', 'JPY'];
-const LANGUAGE = ['ko', 'en'];
-const EN_AVAILABLE_PG = ['inicis', 'html5_inicis', 'uplus', 'nice', 'eximbay'];
-const CARRIERS = ['SKT', 'KTF', 'LGT', 'MVNO'];
-
-const SMILEPAY_URL = 'https://www.mysmilepay.com';
-
-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 {
-  PG,
-  PAY_METHOD,
-  CURRENCY,
-  LANGUAGE,
-  EN_AVAILABLE_PG,
-  CARRIERS,
-  WEBVIEW_SOURCE_HTML,
-  SMILEPAY_URL,
-};

package/src/utils/IamportUrl.js

@@ -1,103 +0,0 @@
-import queryString from 'query-string';
-
-class IamportUrl {
-  static M_REDIRECT_URL = 'http://localhost/iamport';
-  static NICE_TRANS_URL = 'https://web.nicepay.co.kr/smart/bank/payTrans.jsp';
-  static IMP_SDK_URL = 'https://service.iamport.kr';
-
-  constructor(url) {
-    this.url = url;
-
-    const [scheme, path] = url.split('://');
-    this.scheme = scheme;
-    this.path = path;
-  }
-
-  getUrl() {
-    return this.url;
-  }
-
-  isPaymentOver() {
-    return this.url.includes(IamportUrl.M_REDIRECT_URL);
-  }
-
-  isAppUrl() {
-    return this.scheme !== 'http' && this.scheme !== 'https' && this.scheme !== 'about:blank';
-  }
-
-  isIframeLoaded() {
-    return this.url !== 'about:blank' && !this.url.startsWith(IamportUrl.IMP_SDK_URL);
-  }
-
-  getAppUrl() {
-    return this.scheme === 'itmss' ? `https://${this.path}` :  this.url;
-  }
-
-  getMarketUrl() {
-    switch (this.scheme) {
-      case 'kftc-bankpay': // 뱅크페이
-        return 'https://itunes.apple.com/kr/app/id398456030';
-      case 'ispmobile': // ISP/페이북
-        return 'https://itunes.apple.com/kr/app/id369125087';
-      case 'hdcardappcardansimclick': // 현대카드 앱카드
-        return 'https://itunes.apple.com/kr/app/id702653088';
-      case 'shinhan-sr-ansimclick': // 신한 앱카드
-        return 'https://itunes.apple.com/app/id572462317';
-      case 'kb-acp': // KB국민 앱카드
-        return 'https://itunes.apple.com/kr/app/id695436326';
-      case 'mpocket.online.ansimclick': // 삼성앱카드
-        return 'https://itunes.apple.com/kr/app/id535125356';
-      case 'lottesmartpay': // 롯데 모바일결제
-        return 'https://itunes.apple.com/kr/app/id668497947';
-      case 'lotteappcard': // 롯데 앱카드
-        return 'https://itunes.apple.com/kr/app/id688047200';
-      case 'cloudpay': // 하나1Q페이(앱카드)
-        return 'https://itunes.apple.com/kr/app/id847268987';
-      case 'citimobileapp': // 시티은행 앱카드
-        return 'https://itunes.apple.com/kr/app/id1179759666';
-      case 'payco': // 페이코
-        return 'https://itunes.apple.com/kr/app/id924292102';
-      case 'kakaotalk': // 카카오톡
-        return 'https://itunes.apple.com/kr/app/id362057947';
-      case 'lpayapp': // 롯데 L.pay
-        return 'https://itunes.apple.com/kr/app/id1036098908';
-      case 'wooripay': // 우리페이
-        return 'https://itunes.apple.com/kr/app/id1201113419';
-      case 'nhallonepayansimclick': // NH농협카드 올원페이(앱카드)
-        return 'https://itunes.apple.com/kr/app/id1177889176';
-      case 'hanawalletmembers': // 하나카드(하나멤버스 월렛)
-        return 'https://itunes.apple.com/kr/app/id1038288833';
-      case 'shinsegaeeasypayment': // 신세계 SSGPAY
-        return 'https://itunes.apple.com/app/id666237916';
-      case 'naversearchthirdlogin': // 네이버페이 앱 로그인
-        return 'https://itunes.apple.com/kr/app/id393499958';
-      default:
-        return this.url;
-    }
-  }
-
-  getQuery() {
-    const decodedUrl = decodeURIComponent(this.url);
-    const extractedQuery = queryString.extract(decodedUrl);
-    const query = queryString.parse(extractedQuery);
-    return query;
-  }
-
-  getStringifiedQuery() {
-    const decodedUrl = decodeURIComponent(this.url);
-    return queryString.extract(decodedUrl);
-  }
-
-  getInicisTransQuery() {
-    const { m_redirect_url, imp_uid, merchant_uid } = this.getQuery();
-    const inicisTransQuery = { imp_uid };
-    if (m_redirect_url.includes(IamportUrl.M_REDIRECT_URL)) {
-      inicisTransQuery.merchant_uid = typeof merchant_uid === 'object' ? merchant_uid[0] : merchant_uid;
-    } else {
-      inicisTransQuery.merchant_uid = merchant_uid;
-    }
-    return queryString.stringify(inicisTransQuery);
-  }
-}
-
-export default IamportUrl;