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

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

"use strict";

import { createRef, useState } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
import ErrorOnParams from "../ErrorOnParams/index.js";
import Loading from "../Loading/index.js";
import { IMPConst } from "../../constants/index.js";
import { Validation } from "../../utils/Validation.js";
import viewStyles from "../../styles.js";
import IamportUrl from "../../utils/IamportUrl.js";
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
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__*/_jsx(_Fragment, {
      children: /*#__PURE__*/_jsx(WebView, {
        containerStyle: webViewContainer,
        ref: webview,
        source: {
          html: IMPConst.WEBVIEW_SOURCE_HTML
        },
        mixedContentMode: 'always',
        onLoadEnd: () => {
          if (!isWebViewLoaded) {
            // html이 load되고 최초 한번만 inject javascript
            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.certification(${JSON.stringify(data)}, function(response) {
              window.ReactNativeWebView.postMessage(JSON.stringify(response));
            });
          });
        `);
            setIsWebViewLoaded(true);
          }
        },
        onMessage: e => {
          let messageData = e.nativeEvent.data;
          if (decodeURIComponent(messageData) !== messageData) {
            messageData = decodeURIComponent(messageData);
          }
          let response = JSON.parse(messageData);
          if (typeof callback === 'function') {
            callback(response);
          }
        },
        startInLoadingState: true,
        renderLoading: () => /*#__PURE__*/_jsx(View, {
          style: loadingContainer,
          children: loading || /*#__PURE__*/_jsx(Loading, {})
        }),
        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__*/_jsx(ErrorOnParams, {
    message: validation.getMessage()
  });
}
export default Certification;
//# sourceMappingURL=index.js.map