iamport-react-native 2.0.15 → 3.0.1-alpha.0

package/exampleForWebView/metro.config.js

@@ -1,61 +0,0 @@
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/exclusionList');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
-
-const root = path.resolve(__dirname, '..');
-
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
-
-module.exports = {
-  projectRoot: __dirname,
-  watchFolders: [root],
-
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we blacklist them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    blacklistRE: blacklist(
-      modules.map(
-        m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
-      ),
-      modules.map(
-        m =>
-          new RegExp(
-            `^${escape(path.join(root, 'example/node_modules', m))}\\/.*$`,
-          ),
-      ),
-      modules.map(
-        m =>
-          new RegExp(
-            `^${escape(
-              path.join(root, 'exampleForExpo/node_modules', m),
-            )}\\/.*$`,
-          ),
-      ),
-      modules.map(
-        m =>
-          new RegExp(
-            `^${escape(
-              path.join(root, 'exampleForManagedExpo/node_modules', m),
-            )}\\/.*$`,
-          ),
-      ),
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-
-  transformer: {
-    getTransformOptions: async () => ({
-      transform: {
-        experimentalImportSupport: false,
-        inlineRequires: true,
-      },
-    }),
-  },
-};

package/exampleForWebView/package.json

@@ -1,54 +0,0 @@
-{
-  "name": "iamport-react-native-example-for-webview",
-  "version": "0.0.1",
-  "private": true,
-  "scripts": {
-    "android": "react-native run-android",
-    "ios": "react-native run-ios",
-    "start": "react-native start",
-    "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
-  },
-  "dependencies": {
-    "@react-native-community/masked-view": "^0.1.11",
-    "@react-navigation/native": "^6.1.1",
-    "@react-navigation/stack": "^6.3.10",
-    "query-string": "^8.1.0",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-gesture-handler": "^2.9.0",
-    "react-native-safe-area-context": "^4.4.1",
-    "react-native-screens": "^3.18.2",
-    "react-native-webview": "^13.6.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/runtime": "^7.20.6",
-    "@react-native-community/eslint-config": "^3.2.0",
-    "@types/jest": "^29.2.4",
-    "@types/react-native": "^0.70.8",
-    "@types/react-test-renderer": "^18.0.0",
-    "babel-jest": "^29.3.1",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.30.0",
-    "jest": "^29.3.1",
-    "metro-react-native-babel-preset": "^0.73.6",
-    "react-native-eject": "^0.2.0",
-    "react-test-renderer": "18.2.0",
-    "typescript": "^4.9.4"
-  },
-  "resolutions": {
-    "@types/react": "^18"
-  },
-  "jest": {
-    "preset": "react-native",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ]
-  }
-}

package/exampleForWebView/src/App.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
-import {createStackNavigator} from '@react-navigation/stack';
-import Home from './Home';
-import Certification from './Certification';
-import Payment from './Payment';
-
-interface HomeParams {
-  type: string;
-  response: any;
-}
-
-interface MessageParams {
-  userCode: string;
-  data: any;
-}
-
-export type RootStackParamList = {
-  Home: HomeParams | undefined;
-  Certification: MessageParams | undefined;
-  Payment: MessageParams | undefined;
-};
-
-const RootStack = createStackNavigator<RootStackParamList>();
-
-function App() {
-  return (
-    <NavigationContainer>
-      <RootStack.Navigator initialRouteName="Home">
-        <RootStack.Screen
-          options={{headerShown: false}}
-          name="Home"
-          component={Home}
-        />
-        <RootStack.Screen
-          options={{headerShown: false}}
-          name="Certification"
-          component={Certification}
-        />
-        <RootStack.Screen
-          options={{headerShown: false}}
-          name="Payment"
-          component={Payment}
-        />
-      </RootStack.Navigator>
-    </NavigationContainer>
-  );
-}
-
-export default App;

package/exampleForWebView/src/Certification.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import type {StackScreenProps} from '@react-navigation/stack';
-import type {RootStackParamList} from './App';
-import IMP from 'iamport-react-native';
-import Loading from './Loading';
-import {SafeAreaView} from 'react-native-safe-area-context';
-
-type Props = StackScreenProps<RootStackParamList, 'Certification'>;
-
-function Certification({navigation, route}: Props) {
-  /* 가맹점 식별코드, 본인인증 데이터 추출 */
-  const userCode = route.params?.userCode;
-  const data = route.params?.data;
-
-  /* [필수입력] 본인인증 후 실행될 콜백 함수 입력 */
-  function callback(response: any) {
-    const isSuccessed = getIsSuccessed(response);
-    if (isSuccessed) {
-      // 본인인증 성공한 경우, 리디렉션 위해 홈으로 이동한다
-      const params = {
-        response,
-        type: 'certification',
-      };
-      navigation.replace('Home', params);
-    } else {
-      // 본인인증 실패한 경우, 본래 페이지로 돌아간다
-      navigation.goBack();
-    }
-  }
-
-  function getIsSuccessed(response: any) {
-    const {success} = response;
-
-    if (typeof success === 'string') {
-      return success === 'true';
-    }
-    if (typeof success === 'boolean') {
-      return success === true;
-    }
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
-      <IMP.Certification
-        userCode={userCode as string}
-        loading={<Loading />}
-        data={data}
-        callback={callback}
-      />
-    </SafeAreaView>
-  );
-}
-
-export default Certification;

package/exampleForWebView/src/Home.tsx

@@ -1,49 +0,0 @@
-import React, {useEffect, useState} from 'react';
-import type {StackScreenProps} from '@react-navigation/stack';
-import type {RootStackParamList} from './App';
-import queryString from 'query-string';
-import WebView from 'react-native-webview';
-
-type Props = StackScreenProps<RootStackParamList, 'Home'>;
-
-function Home({navigation, route}: Props) {
-  const domain = 'http://10.160.43.111:3000';
-  const [uri, setUri] = useState(domain);
-
-  useEffect(() => {
-    const type = route.params?.type;
-    const response = route.params?.response;
-    if (response) {
-      const query = queryString.stringify(response);
-      if (type === 'payment') {
-        setUri(`${domain}/payment/result?${query}`);
-      } else {
-        setUri(`${domain}/certification/result?${query}`);
-      }
-    }
-  }, [route]);
-
-  return (
-    <WebView
-      style={{flex: 1}}
-      source={{uri}}
-      onMessage={e => {
-        try {
-          const {userCode, data, type} = JSON.parse(e.nativeEvent.data);
-          const params = {userCode, data};
-          navigation.push(
-            type === 'payment' ? 'Payment' : 'Certification',
-            params,
-          );
-        } catch (e) {}
-      }}
-      injectedJavascript={`(function() {
-        window.postMessage = function(data) {
-          window.ReactNativeWebView.postMessage(data);
-        };
-      })()`}
-    />
-  );
-}
-
-export default Home;

package/exampleForWebView/src/Loading.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-
-function Loading() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>잠시만 기다려주세요...</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 20,
-  },
-});
-
-export default Loading;

package/exampleForWebView/src/Payment.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import type {StackScreenProps} from '@react-navigation/stack';
-import type {RootStackParamList} from './App';
-import IMP from 'iamport-react-native';
-import Loading from './Loading';
-import {SafeAreaView} from 'react-native-safe-area-context';
-
-function getBoolean(value: string | boolean | undefined) {
-  if (typeof value === 'boolean') {
-    return value;
-  }
-  if (typeof value === 'string') {
-    return value === 'true';
-  }
-  return undefined;
-}
-
-type Props = StackScreenProps<RootStackParamList, 'Payment'>;
-
-function Payment({navigation, route}: Props) {
-  /* 가맹점 식별코드, 결제 데이터 추출 */
-  const userCode = route.params?.userCode;
-  const data = route.params?.data;
-
-  /* [필수입력] 결제 후 실행될 콜백 함수 입력 */
-  function callback(response: any) {
-    const isSuccessed = getIsSuccessed(response);
-    if (isSuccessed) {
-      // 결제 성공한 경우, 리디렉션 위해 홈으로 이동한다
-      const params = {
-        response,
-        type: 'payment',
-      };
-      navigation.replace('Home', params);
-    } else {
-      // 결제 실패한 경우, 본래 페이지로 돌아간다
-      navigation.goBack();
-    }
-  }
-
-  function getIsSuccessed(response: any) {
-    const {imp_success, success, error_code, code} = response;
-    return (
-      getBoolean(imp_success) ??
-      getBoolean(success) ??
-      (error_code == null && code == null)
-    );
-  }
-
-  return (
-    <SafeAreaView style={{flex: 1, justifyContent: 'center'}}>
-      <IMP.Payment
-        userCode={userCode as string}
-        loading={<Loading />}
-        data={{
-          ...data,
-          app_scheme: 'exampleforwebview',
-        }}
-        callback={callback}
-      />
-    </SafeAreaView>
-  );
-}
-
-export default Payment;