iamport-react-native/lib/module/components/Certification/index.js

리액트 네이티브용 아임포트 결제/본인인증 연동 라이브러리

import React, { createRef, useState } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import Loading from '../Loading';
import ErrorOnParams from '../ErrorOnParams';
import { Validation } from '../../utils/Validation';
import { IMPConst } from '../../constants';
import viewStyles from '../../styles';
import IamportUrl from '../../utils/IamportUrl';
function Certification({
  userCode,
  tierCode,
  data,
  loading,
  callback
}) {
  const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
  const webview = /*#__PURE__*/createRef();
  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;
  } else {
    data.m_redirect_url = redirectUrl;
  }
  if (validation.getIsValid()) {
    const {
      loadingContainer,
      webViewContainer
    } = viewStyles;
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WebView, {
      containerStyle: webViewContainer,
      ref: webview,
      source: {
        html: IMPConst.WEBVIEW_SOURCE_HTML
      },
      mixedContentMode: 'always',
      onLoadEnd: () => {
        if (!isWebViewLoaded) {
          var _webview$current3;
          // html이 load되고 최초 한번만 inject javascript
          if (tierCode) {
            var _webview$current;
            (_webview$current = webview.current) === null || _webview$current === void 0 || _webview$current.injectJavaScript(`
          setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
        `);
          } else {
            var _webview$current2;
            (_webview$current2 = webview.current) === null || _webview$current2 === void 0 || _webview$current2.injectJavaScript(`
          setTimeout(function() { IMP.init("${userCode}"); });
        `);
          }
          (_webview$current3 = webview.current) === null || _webview$current3 === void 0 || _webview$current3.injectJavaScript(`
          setTimeout(function() {
            IMP.certification(${JSON.stringify(data)}, function(response) {
              window.ReactNativeWebView.postMessage(JSON.stringify(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: true,
      renderLoading: () => /*#__PURE__*/React.createElement(View, {
        style: loadingContainer
      }, loading || /*#__PURE__*/React.createElement(Loading, null)),
      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;
      }
    }));
  }
  return /*#__PURE__*/React.createElement(ErrorOnParams, {
    message: validation.getMessage()
  });
}
export default Certification;
//# sourceMappingURL=index.js.map