iamport-react-native 2.0.13 → 2.0.14

package/exampleForExpo/metro.config.js

@@ -0,0 +1,62 @@
+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, 'exampleForWebView/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/exampleForExpo/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "iamport-react-native-expo-example",
+  "main": "index.js",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "web": "expo start --web",
+    "start": "expo start --dev-client"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^13.0.0",
+    "@react-native-community/masked-view": "0.1.11",
+    "@react-navigation/native": "^6.1.1",
+    "@react-navigation/stack": "^6.3.10",
+    "expo": "~49.0.13",
+    "expo-modules-core": "~1.5.10",
+    "expo-splash-screen": "~0.20.5",
+    "expo-status-bar": "~1.6.0",
+    "expo-updates": "~0.18.16",
+    "native-base": "^3.4.25",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "~2.12.0",
+    "react-native-reanimated": "~3.3.0",
+    "react-native-safe-area-context": "4.6.3",
+    "react-native-screens": "~3.22.0",
+    "react-native-svg": "13.9.0",
+    "react-native-webview": "13.2.2",
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.20.5",
+    "@babel/runtime": "^7.20.6",
+    "babel-plugin-module-resolver": "^4.1.0"
+  }
+}

package/exampleForExpo/src/App.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { NativeBaseProvider } from 'native-base';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import IamportNavigation from './NavigationService';
+
+export default function App() {
+  return (
+    <NativeBaseProvider>
+      <SafeAreaProvider>
+        <IamportNavigation />
+      </SafeAreaProvider>
+    </NativeBaseProvider>
+  );
+}

package/exampleForExpo/src/Certification/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import IMP from 'iamport-react-native';
+import { getUserCode } from '../utils';
+import Loading from '../Loading';
+
+export default function Certification({ route, navigation }) {
+  const params = route.params.params;
+  const tierCode = route.params.tierCode;
+  const userCode = getUserCode('danal', tierCode, 'certification');
+
+  return (
+    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
+      <IMP.Certification
+        userCode={userCode}
+        tierCode={tierCode}
+        data={params}
+        loading={<Loading />}
+        callback={(response) =>
+          navigation.replace('CertificationResult', response)
+        }
+      />
+    </SafeAreaView>
+  );
+}

package/exampleForExpo/src/CertificationResult/index.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Icon, IconButton, List, Text } from 'native-base';
+import { FontAwesome } from '@expo/vector-icons';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function CertificationResult({ route, navigation }) {
+  const success = route.params.success;
+  const imp_uid = route.params.imp_uid;
+  const merchant_uid = route.params.merchant_uid;
+  const error_msg = route.params.error_msg;
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        margin: 10,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+      }}
+    >
+      {success ? (
+        <Icon
+          as={FontAwesome}
+          name={'check-circle'}
+          size={20}
+          color={'#52c41a'}
+        />
+      ) : (
+        <Icon as={FontAwesome} name={'warning'} size={20} color={'#f5222d'} />
+      )}
+      <Text fontSize={25} fontWeight={'bold'} mb={20}>{`본인인증에 ${
+        success ? '성공' : '실패'
+      }하였습니다`}</Text>
+      <List width={'90%'} mb={50} borderRadius={3}>
+        <List.Item>
+          <Text w={'40%'}>아임포트 번호</Text>
+          <Text w={'60%'}>{imp_uid}</Text>
+        </List.Item>
+        {success ? (
+          <List.Item>
+            <Text w={'40%'}>주문번호</Text>
+            <Text w={'60%'}>{merchant_uid}</Text>
+          </List.Item>
+        ) : (
+          <List.Item>
+            <Text w={'40%'}>에러메시지</Text>
+            <Text w={'60%'}>{error_msg}</Text>
+          </List.Item>
+        )}
+      </List>
+      <IconButton
+        icon={<Icon as={FontAwesome} name={'arrow-left'} size={20} />}
+        /* @ts-ignore */
+        onPress={() => navigation.navigate('Home')}
+      >
+        <Text>돌아가기</Text>
+      </IconButton>
+    </SafeAreaView>
+  );
+}

package/exampleForExpo/src/CertificationTest/index.js

@@ -0,0 +1,151 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  Input,
+  ScrollView,
+  Select,
+  Stack,
+  Text,
+} from 'native-base';
+import Picker from '../Picker';
+import { CARRIERS, TIER_CODES } from '../constants';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+
+export default function CertificationTest({ navigation }) {
+  const [merchantUid, setMerchantUid] = useState(`mid_${new Date().getTime()}`);
+  const [company, setCompany] = useState('아임포트');
+  const [carrier, setCarrier] = useState('SKT');
+  const [name, setName] = useState('');
+  const [phone, setPhone] = useState('');
+  const [minAge, setMinAge] = useState('');
+  const [tierCode, setTierCode] = useState('');
+
+  const insets = useSafeAreaInsets();
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        backgroundColor: '#f5f5f5',
+        paddingTop: -insets.top,
+      }}
+    >
+      <ScrollView m={2} backgroundColor={'#fff'}>
+        <FormControl p={'5%'} borderRadius={3}>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              주문번호
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={merchantUid}
+              onChangeText={(value) => setMerchantUid(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              회사명
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={company}
+              onChangeText={(value) => setCompany(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              통신사
+            </FormControl.Label>
+            <Select
+              mb={2}
+              flex={1}
+              borderColor={'transparent'}
+              selectedValue={carrier}
+              onValueChange={(value) => setCarrier(value)}
+            >
+              {CARRIERS.map(({ label, value }, index) => {
+                return <Select.Item label={label} value={value} key={index} />;
+              })}
+            </Select>
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              이름
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={name}
+              onChangeText={(value) => setName(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              전화번호
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={phone}
+              keyboardType="number-pad"
+              returnKeyType={'done'}
+              onChangeText={(value) => setPhone(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              최소연령
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={minAge}
+              keyboardType="number-pad"
+              returnKeyType={'done'}
+              onChangeText={(value) => setMinAge(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              티어 코드
+            </FormControl.Label>
+            <Picker
+              data={TIER_CODES}
+              selectedValue={tierCode}
+              onValueChange={(value) => setTierCode(value)}
+            />
+          </Stack>
+          <Button
+            bgColor={'#344e81'}
+            /* @ts-ignore */
+            onPress={() => {
+              const data = {
+                params: {
+                  merchant_uid: merchantUid,
+                  company,
+                  carrier,
+                  name,
+                  phone,
+                  min_age: minAge,
+                },
+                tierCode,
+              };
+              navigation.navigate('Certification', data);
+            }}
+          >
+            <Text fontWeight={'bold'} color={'#fff'}>
+              본인인증 하기
+            </Text>
+          </Button>
+        </FormControl>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/exampleForExpo/src/Home/index.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button, Icon, Text, View } from 'native-base';
+import { FontAwesome } from '@expo/vector-icons';
+
+export default function Home({ navigation }) {
+  return (
+    <View flex={1}>
+      <View
+        flex={1}
+        pos={'relative'}
+        alignItems={'center'}
+        bgColor={'#344e81'}
+        justifyContent={'center'}
+      >
+        <Text
+          color={'#fff'}
+          fontSize={20}
+          mb={10}
+          fontWeight={'bold'}
+          textAlign={'center'}
+        >
+          아임포트 테스트
+        </Text>
+        <Text color={'#fff'} fontSize={15} textAlign={'center'}>
+          아임포트 리액트 네이티브 모듈 테스트 화면입니다.
+        </Text>
+        <Text color={'#fff'} fontSize={15} textAlign={'center'}>
+          아래 버튼을 눌러 결제 또는 본인인증 테스트를 진행해주세요.
+        </Text>
+      </View>
+      <View
+        flex={1}
+        pos={'relative'}
+        bottom={'0%'}
+        w={'90%'}
+        flexDir={'row'}
+        alignSelf={'center'}
+      >
+        <Button.Group bottom={'16.5%'} width={'100%'} alignSelf={'center'}>
+          <Button
+            m={'4%'}
+            bgColor={'#fff'}
+            borderRadius={3}
+            flex={1}
+            shadow={1}
+            /* @ts-ignore */
+            onPress={() => navigation.push('PaymentTest')}
+          >
+            <Icon
+              as={FontAwesome}
+              name={'credit-card'}
+              textAlign={'center'}
+              w={'100%'}
+              mb={'6%'}
+            />
+            <Text>결제 테스트</Text>
+          </Button>
+          <Button
+            m={'4%'}
+            bgColor={'#fff'}
+            borderRadius={3}
+            flex={1}
+            shadow={1}
+            /* @ts-ignore */
+            onPress={() => navigation.push('CertificationTest')}
+          >
+            <Icon
+              as={FontAwesome}
+              name={'user'}
+              textAlign={'center'}
+              w={'100%'}
+              mb={'6%'}
+            />
+            <Text>본인인증 테스트</Text>
+          </Button>
+        </Button.Group>
+      </View>
+    </View>
+  );
+}

package/exampleForExpo/src/Loading/index.js

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

package/exampleForExpo/src/NavigationService.js

@@ -0,0 +1,102 @@
+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 CertificationTest from './CertificationTest';
+import CertificationResult from './CertificationResult';
+import Payment from './Payment';
+import PaymentTest from './PaymentTest';
+import PaymentResult from './PaymentResult';
+
+const RootStack = createStackNavigator();
+
+export default function IamportNavigation() {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator
+        initialRouteName="Home"
+        // screenOptions={{ headerShown: false }}
+      >
+        <RootStack.Screen
+          options={{ headerShown: false }}
+          name="Home"
+          component={Home}
+        />
+        <RootStack.Screen
+          options={{ headerShown: false }}
+          name="Certification"
+          component={Certification}
+        />
+        <RootStack.Screen
+          options={{
+            headerTitle: '아임포트 본인인증 테스트',
+            headerTitleAlign: 'center',
+            headerStyle: {
+              backgroundColor: '#344e81',
+            },
+            headerTitleStyle: {
+              color: '#fff',
+            },
+            headerTintColor: '#fff',
+            headerBackTitle: ' ',
+          }}
+          name="CertificationTest"
+          component={CertificationTest}
+        />
+        <RootStack.Screen
+          options={{
+            headerTitle: '아임포트 본인인증 결과',
+            headerTitleAlign: 'center',
+            headerStyle: {
+              backgroundColor: '#344e81',
+            },
+            headerTitleStyle: {
+              color: '#fff',
+            },
+            headerLeft: () => null,
+          }}
+          name="CertificationResult"
+          component={CertificationResult}
+        />
+        <RootStack.Screen
+          options={{ headerShown: false }}
+          name="Payment"
+          component={Payment}
+        />
+        <RootStack.Screen
+          options={{
+            headerTitle: '아임포트 결제 테스트',
+            headerTitleAlign: 'center',
+            headerStyle: {
+              backgroundColor: '#344e81',
+            },
+            headerTitleStyle: {
+              color: '#fff',
+            },
+            headerTintColor: '#fff',
+            headerBackTitle: ' ',
+          }}
+          name="PaymentTest"
+          component={PaymentTest}
+        />
+        <RootStack.Screen
+          options={{
+            headerTitle: '아임포트 결제 결과',
+            headerTitleAlign: 'center',
+            headerStyle: {
+              backgroundColor: '#344e81',
+            },
+            headerTitleStyle: {
+              color: '#fff',
+            },
+            headerTintColor: '#fff',
+            headerLeft: () => null,
+          }}
+          name="PaymentResult"
+          component={PaymentResult}
+        />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+}

package/exampleForExpo/src/Payment/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import IMP from 'iamport-react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { getUserCode } from '../utils';
+import Loading from '../Loading';
+
+export default function Payment({ route, navigation }) {
+  const params = route.params.params;
+  const tierCode = route.params.tierCode;
+  const userCode = getUserCode(params.pg, tierCode);
+
+  return (
+    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
+      <IMP.Payment
+        userCode={userCode}
+        tierCode={tierCode}
+        loading={<Loading />}
+        data={params}
+        callback={(response) => navigation.replace('PaymentResult', response)}
+      />
+    </SafeAreaView>
+  );
+}

package/exampleForExpo/src/PaymentResult/index.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Icon, IconButton, List, Text } from 'native-base';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { FontAwesome } from '@expo/vector-icons';
+
+function getBoolean(value) {
+  if (typeof value === 'boolean') return value;
+  if (typeof value === 'string') return value === 'true';
+  return undefined;
+}
+
+export default function PaymentResult({ route, navigation }) {
+  const imp_success = route.params?.imp_success;
+  const success = route.params?.success;
+  const imp_uid = route.params?.imp_uid;
+  const tx_id = route.params?.txId;
+  const merchant_uid = route.params?.merchant_uid;
+  const payment_id = route.params?.paymentId;
+  const error_code = route.params?.error_code;
+  const code = route.params?.code;
+  const message = route.params?.message;
+  const error_msg = route.params?.error_msg;
+
+  // [WARNING: 이해를 돕기 위한 것일 뿐, imp_success 또는 success 파라미터로 결제 성공 여부를 장담할 수 없습니다.]
+  // 아임포트 서버로 결제내역 조회(GET /payments/${imp_uid})를 통해 그 응답(status)에 따라 결제 성공 여부를 판단하세요.
+  const isSuccess =
+    getBoolean(imp_success) ??
+    getBoolean(success) ??
+    (error_code == null && code == null);
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        margin: 10,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+      }}
+    >
+      {isSuccess ? (
+        <Icon
+          as={FontAwesome}
+          name={'check-circle'}
+          size={20}
+          color={'#52c41a'}
+        />
+      ) : (
+        <Icon as={FontAwesome} name={'warning'} size={20} color={'#f5222d'} />
+      )}
+      <Text fontSize={25} fontWeight={'bold'} mb={20}>{`결제에 ${
+        isSuccess ? '성공' : '실패'
+      }하였습니다`}</Text>
+      <List width={'90%'} mb={50} borderRadius={3}>
+        <List.Item>
+          <Text w={'40%'}>아임포트 번호</Text>
+          <Text w={'60%'}>{imp_uid ?? tx_id}</Text>
+        </List.Item>
+        {isSuccess ? (
+          <List.Item>
+            <Text w={'40%'}>주문번호</Text>
+            <Text w={'60%'}>{merchant_uid ?? payment_id}</Text>
+          </List.Item>
+        ) : (
+          <List.Item>
+            <Text w={'40%'}>에러코드</Text>
+            <Text w={'60%'}>{error_code ?? code}</Text>
+            <Text w={'40%'}>에러메시지</Text>
+            <Text w={'60%'}>{error_msg ?? message}</Text>
+          </List.Item>
+        )}
+      </List>
+      <IconButton
+        icon={<Icon as={FontAwesome} name={'arrow-left'} size={20} />}
+        /* @ts-ignore */
+        onPress={() => navigation.navigate('Home')}
+      >
+        <Text>돌아가기</Text>
+      </IconButton>
+    </SafeAreaView>
+  );
+}