iamport-react-native 2.0.13 → 2.0.14

package/example/metro.config.js

@@ -0,0 +1,66 @@
+const path = require('path');
+const blacklist = require('metro-config/src/defaults/exclusionList');
+const escape = require('escape-string-regexp');
+const pak = require('../package.json');
+
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const root = path.resolve(__dirname, '..');
+
+const modules = Object.keys({
+  ...pak.peerDependencies,
+});
+
+module.exports = mergeConfig(getDefaultConfig(__dirname), {
+  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, 'exampleForExpo/node_modules', m)
+            )}\\/.*$`
+          )
+      ),
+      modules.map(
+        (m) =>
+          new RegExp(
+            `^${escape(
+              path.join(root, 'exampleForManagedExpo/node_modules', m)
+            )}\\/.*$`
+          )
+      ),
+      modules.map(
+        (m) =>
+          new RegExp(
+            `^${escape(
+              path.join(root, 'exampleForWebView/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/example/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "iamport-react-native-example",
+  "description": "아임포트 리액트 네이티브 예제",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "android": "react-native run-android",
+    "ios": "react-native run-ios",
+    "start": "react-native start"
+  },
+  "dependencies": {
+    "@react-native-community/masked-view": "^0.1.11",
+    "@react-navigation/native": "^6.1.1",
+    "@react-navigation/stack": "^6.3.10",
+    "@types/react-native-vector-icons": "^6.4.12",
+    "@gluestack-ui/themed": "^1.0.33",
+    "@gluestack-ui/config": "^1.0.10",
+    "@gluestack-style/react": "^1.0.30",
+    "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-svg": "^13.6.0",
+    "react-native-vector-icons": "^9.2.0",
+    "react-native-webview": "^13.6.2",
+    "styled-components": "^5.3.6",
+    "styled-system": "^5.1.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/runtime": "^7.20.6",
+    "@types/react": "^18.0.26",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "metro-react-native-babel-preset": "^0.73.6",
+    "react-native-codegen": "^0.71.3",
+    "@react-native/metro-config": "^0.74.0"
+  }
+}

package/example/src/App.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { IamportNavigation } from './NavigationService';
+import { GluestackUIProvider } from '@gluestack-ui/themed';
+import { config } from '@gluestack-ui/config';
+
+function App() {
+  return (
+    <GluestackUIProvider config={config}>
+      <SafeAreaProvider>
+        <IamportNavigation />
+      </SafeAreaProvider>
+    </GluestackUIProvider>
+  );
+}
+
+export default App;

package/example/src/Certification/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import IMP from 'iamport-react-native';
+import type { RootStackParamList } from '../NavigationService';
+import type { StackScreenProps } from '@react-navigation/stack';
+import Loading from '../Loading';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+type Props = StackScreenProps<RootStackParamList, 'Certification'>;
+
+function Certification({ route, navigation }: Props) {
+  const params = route.params?.params!;
+  const tierCode = route.params?.tierCode;
+  const userCode = route.params?.userCode!;
+
+  return (
+    <SafeAreaView style={{ flex: 1, justifyContent: 'center' }}>
+      <IMP.Certification
+        userCode={userCode}
+        tierCode={tierCode}
+        data={params}
+        loading={<Loading />}
+        callback={(response) =>
+          navigation.replace('CertificationResult', response)
+        }
+      />
+    </SafeAreaView>
+  );
+}
+
+export default Certification;

package/example/src/CertificationResult/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import type { StackScreenProps } from '@react-navigation/stack';
+import type { RootStackParamList } from '../NavigationService';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  ArrowLeftIcon,
+  Box,
+  Button,
+  ButtonIcon,
+  ButtonText,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+} from '@gluestack-ui/themed';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+
+type Props = StackScreenProps<RootStackParamList, 'CertificationResult'>;
+
+function CertificationResult({ route, navigation }: Props) {
+  const imp_success = route.params?.imp_success;
+  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;
+
+  const isSuccess = !(
+    imp_success === 'false' ||
+    imp_success === false ||
+    success === 'false' ||
+    success === false
+  );
+
+  return (
+    <SafeAreaView
+      style={{
+        flex: 1,
+        justifyContent: 'center',
+        margin: 10,
+        backgroundColor: '#fff',
+        alignItems: 'center',
+      }}
+    >
+      {isSuccess ? (
+        <FontAwesome name={'check-circle'} color={'#52c41a'} size={150} />
+      ) : (
+        <FontAwesome name={'warning'} color={'#f5222d'} size={150} />
+      )}
+      <Heading size={'2xl'}>
+        {`본인인증에 ${isSuccess ? '성공' : '실패'}하였습니다`}
+      </Heading>
+      <Box>
+        <VStack my={10}>
+          <HStack mx={'15%'} my={10}>
+            <Text w={'40%'}>아임포트 번호</Text>
+            <Text w={'60%'}>{imp_uid}</Text>
+          </HStack>
+          {success ? (
+            <HStack mx={'15%'} my={10}>
+              <Text w={'40%'}>주문번호</Text>
+              <Text w={'60%'}>{merchant_uid}</Text>
+            </HStack>
+          ) : (
+            <HStack mx={'15%'} my={10}>
+              <Text w={'40%'}>에러메시지</Text>
+              <Text w={'60%'}>{error_msg}</Text>
+            </HStack>
+          )}
+        </VStack>
+      </Box>
+      <Button size={'md'} onPress={() => navigation.navigate('Home')}>
+        <ButtonIcon as={ArrowLeftIcon} />
+        <ButtonText>돌아가기</ButtonText>
+      </Button>
+    </SafeAreaView>
+  );
+}
+
+export default CertificationResult;

package/example/src/CertificationTest/index.tsx

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+import type { StackScreenProps } from '@react-navigation/stack';
+import type {
+  CertificationParams,
+  RootStackParamList,
+} from '../NavigationService';
+import { CARRIERS, CERT_PGS } from '../constants';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
+import { IMPConst } from 'iamport-react-native';
+import { Platform } from 'react-native';
+import {
+  Button,
+  ButtonText,
+  FormControl,
+  Input,
+  InputField,
+  KeyboardAvoidingView,
+  ScrollView,
+  Text,
+  VStack,
+} from '@gluestack-ui/themed';
+import Picker from '../Picker';
+
+type Props = StackScreenProps<RootStackParamList, 'CertificationTest'>;
+
+function CertificationTest({ navigation }: Props) {
+  const [userCode, setUserCode] = useState('');
+  const [pg, setPg] = useState('danal');
+  const [merchantUid, setMerchantUid] = useState(`mid_${new Date().getTime()}`);
+  const [company, setCompany] = useState('아임포트');
+  const [carrier, setCarrier] = useState('');
+  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,
+      }}
+    >
+      <KeyboardAvoidingView
+        flex={1}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 95 : undefined}
+      >
+        <ScrollView mx={1} backgroundColor={'#fff'}>
+          <FormControl p={2} borderRadius={3}>
+            <VStack>
+              <FormControl.Label my={1}>
+                <Text color={'#9e9e9e'} fontSize={15}>
+                  가맹점 식별코드
+                </Text>
+              </FormControl.Label>
+              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                <InputField
+                  value={userCode}
+                  onChangeText={(value) => setUserCode(value)}
+                />
+              </Input>
+            </VStack>
+            <VStack>
+              <FormControl.Label my={1}>
+                <Text color={'#9e9e9e'} fontSize={15}>
+                  PG사
+                </Text>
+              </FormControl.Label>
+              <Picker
+                data={CERT_PGS}
+                selectedValue={pg}
+                onValueChange={(value) => setPg(value)}
+              />
+            </VStack>
+            <VStack>
+              <FormControl.Label my={1}>
+                <Text color={'#9e9e9e'} fontSize={15}>
+                  주문번호
+                </Text>
+              </FormControl.Label>
+              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                <InputField
+                  value={merchantUid}
+                  onChangeText={(value) => setMerchantUid(value)}
+                />
+              </Input>
+            </VStack>
+            {pg === 'danal' && (
+              <>
+                <VStack>
+                  <FormControl.Label my={1}>
+                    <Text color={'#9e9e9e'} fontSize={15}>
+                      회사명
+                    </Text>
+                  </FormControl.Label>
+                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                    <InputField
+                      value={company}
+                      onChangeText={(value) => setCompany(value)}
+                    />
+                  </Input>
+                </VStack>
+                <VStack>
+                  <FormControl.Label my={1}>
+                    <Text color={'#9e9e9e'} fontSize={15}>
+                      통신사
+                    </Text>
+                  </FormControl.Label>
+                  <Picker
+                    data={CARRIERS}
+                    selectedValue={carrier}
+                    onValueChange={(value) => setCarrier(value)}
+                  />
+                </VStack>
+                <VStack>
+                  <FormControl.Label my={1}>
+                    <Text color={'#9e9e9e'} fontSize={15}>
+                      이름
+                    </Text>
+                  </FormControl.Label>
+                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                    <InputField
+                      value={name}
+                      onChangeText={(value) => setName(value)}
+                    />
+                  </Input>
+                </VStack>
+                <VStack>
+                  <FormControl.Label my={1}>
+                    <Text color={'#9e9e9e'} fontSize={15}>
+                      전화번호
+                    </Text>
+                  </FormControl.Label>
+                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                    <InputField
+                      keyboardType="number-pad"
+                      returnKeyType={'done'}
+                      value={phone}
+                      onChangeText={(value) => setPhone(value)}
+                    />
+                  </Input>
+                </VStack>
+                <VStack>
+                  <FormControl.Label my={1}>
+                    <Text color={'#9e9e9e'} fontSize={15}>
+                      최소연령
+                    </Text>
+                  </FormControl.Label>
+                  <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                    <InputField
+                      keyboardType="number-pad"
+                      returnKeyType={'done'}
+                      value={minAge}
+                      onChangeText={(value) => setMinAge(value)}
+                    />
+                  </Input>
+                </VStack>
+              </>
+            )}
+            <VStack>
+              <FormControl.Label my={1}>
+                <Text color={'#9e9e9e'} fontSize={15}>
+                  티어 코드
+                </Text>
+              </FormControl.Label>
+              <Input mx={2} mb={1} flex={1} p={1} variant={'underlined'}>
+                <InputField
+                  value={tierCode}
+                  onChangeText={(value) => setTierCode(value)}
+                />
+              </Input>
+            </VStack>
+            <Button
+              mt={4}
+              bgColor={'#344e81'}
+              /* @ts-ignore */
+              onPress={() => {
+                const data: CertificationParams = {
+                  params: {
+                    merchant_uid: merchantUid,
+                    company,
+                    carrier,
+                    name,
+                    phone,
+                    pg,
+                    min_age: minAge,
+                    m_redirect_url: IMPConst.M_REDIRECT_URL,
+                  },
+                  userCode,
+                  tierCode,
+                };
+                navigation.navigate('Certification', data);
+              }}
+            >
+              <ButtonText fontWeight={'bold'} color={'#fff'}>
+                본인인증 하기
+              </ButtonText>
+            </Button>
+          </FormControl>
+        </ScrollView>
+      </KeyboardAvoidingView>
+    </SafeAreaView>
+  );
+}
+
+export default CertificationTest;

package/example/src/Home/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
+import type { StackScreenProps } from '@react-navigation/stack';
+import type { RootStackParamList } from '../NavigationService';
+import {
+  Button,
+  ButtonGroup,
+  Center,
+  Text,
+  View,
+  VStack,
+} from '@gluestack-ui/themed';
+
+type Props = StackScreenProps<RootStackParamList, 'Home'>;
+
+function Home({ navigation }: Props) {
+  return (
+    <View flex={1}>
+      <View
+        flex={1}
+        position={'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}
+        position={'relative'}
+        bottom={'0%'}
+        w={'90%'}
+        flexDirection={'row'}
+        alignSelf={'center'}
+      >
+        <ButtonGroup bottom={'50%'} width={'100%'} alignSelf={'center'}>
+          <Button
+            h={60}
+            m={'4%'}
+            bgColor={'#fff'}
+            borderRadius={3}
+            flex={1}
+            onPress={() => navigation.push('PaymentTest')}
+          >
+            <VStack alignItems={'center'}>
+              <Center>
+                <FontAwesome name={'credit-card'} size={30} />
+                <Text fontSize={15}>결제 테스트</Text>
+              </Center>
+            </VStack>
+          </Button>
+          <Button
+            h={60}
+            m={'4%'}
+            bgColor={'#fff'}
+            borderRadius={3}
+            flex={1}
+            onPress={() => navigation.push('CertificationTest')}
+          >
+            <VStack alignItems={'center'}>
+              <Center>
+                <FontAwesome name={'user'} size={30} />
+                <Text fontSize={15}>본인인증 테스트</Text>
+              </Center>
+            </VStack>
+          </Button>
+        </ButtonGroup>
+      </View>
+    </View>
+  );
+}
+
+export default Home;

package/example/src/Loading/index.tsx

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

package/example/src/NavigationService.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+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';
+import type { IMPData } from 'iamport-react-native';
+
+export interface CertificationParams {
+  params: IMPData.CertificationData;
+  userCode: string;
+  tierCode?: string;
+}
+
+export interface PaymentParams {
+  params: IMPData.PaymentData;
+  userCode: string;
+  tierCode?: string;
+}
+
+export type RootStackParamList = {
+  Home: undefined;
+  Certification: CertificationParams | undefined;
+  CertificationTest: undefined;
+  CertificationResult: any;
+  Payment: PaymentParams | undefined;
+  PaymentTest: undefined;
+  PaymentResult: any;
+};
+
+const RootStack = createStackNavigator<RootStackParamList>();
+
+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>
+  );
+}
+
+export { RootStack, IamportNavigation };