iamport-react-native 2.0.13 → 2.0.14

package/exampleForWebView/metro.config.js

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,54 @@
+{
+  "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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,65 @@
+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;