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

package/example/src/Payment/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import IMP from 'iamport-react-native';
-import type { StackScreenProps } from '@react-navigation/stack';
-import type { RootStackParamList } from '../NavigationService';
-import Loading from '../Loading';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-type Props = StackScreenProps<RootStackParamList, 'Payment'>;
-
-function Payment({ 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.Payment
-        userCode={userCode}
-        tierCode={tierCode}
-        loading={<Loading />}
-        data={params}
-        callback={(response) => navigation.replace('PaymentResult', response)}
-      />
-    </SafeAreaView>
-  );
-}
-
-export default Payment;

package/example/src/PaymentResult/index.tsx

@@ -1,96 +0,0 @@
-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, 'PaymentResult'>;
-
-function getBoolean(value: string | boolean | undefined) {
-  if (typeof value === 'boolean') return value;
-  if (typeof value === 'string') return value === 'true';
-  return undefined;
-}
-
-function PaymentResult({ route, navigation }: Props) {
-  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 ? (
-        <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 ?? tx_id}</Text>
-          </HStack>
-          {isSuccess ? (
-            <HStack mx={'15%'} my={10}>
-              <Text w={'40%'}>주문번호</Text>
-              <Text w={'60%'}>{merchant_uid ?? payment_id}</Text>
-            </HStack>
-          ) : (
-            <>
-              <HStack mx={'15%'} my={10}>
-                <Text w={'40%'}>에러코드</Text>
-                <Text w={'60%'}>{error_code ?? code}</Text>
-              </HStack>
-              <HStack mx={'15%'} my={10}>
-                <Text w={'40%'}>에러메시지</Text>
-                <Text w={'60%'}>{error_msg ?? message}</Text>
-              </HStack>
-            </>
-          )}
-        </VStack>
-      </Box>
-      <Button size={'md'} onPress={() => navigation.navigate('Home')}>
-        <ButtonIcon as={ArrowLeftIcon} />
-        <ButtonText>돌아가기</ButtonText>
-      </Button>
-    </SafeAreaView>
-  );
-}
-
-export default PaymentResult;

package/example/src/PaymentTest/index.tsx

@@ -1,383 +0,0 @@
-import React, { useState } from 'react';
-import { PGS } from '../constants';
-import { getMethods, getQuotas } from '../utils';
-import type { StackScreenProps } from '@react-navigation/stack';
-import type { PaymentParams, RootStackParamList } from '../NavigationService';
-import { IMPConst } from 'iamport-react-native';
-import {
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import { Platform } from 'react-native';
-import {
-  Button,
-  ButtonText,
-  FormControl,
-  Input,
-  InputField,
-  KeyboardAvoidingView,
-  ScrollView,
-  Switch,
-  Text,
-  VStack,
-} from '@gluestack-ui/themed';
-import Picker from '../Picker';
-
-type Props = StackScreenProps<RootStackParamList, 'PaymentTest'>;
-
-function PaymentTest({ navigation }: Props) {
-  const [userCode, setUserCode] = useState('');
-  const [pg, setPg] = useState('html5_inicis');
-  const [tierCode, setTierCode] = useState('');
-  const [method, setMethod] = useState('card');
-  const [cardQuota, setCardQuota] = useState(0);
-  const [merchantUid, setMerchantUid] = useState(`mid_${new Date().getTime()}`);
-  const [name, setName] = useState('아임포트 결제데이터분석');
-  const [amount, setAmount] = useState('1000');
-  const [buyerName, setBuyerName] = useState('홍길동');
-  const [buyerTel, setBuyerTel] = useState('01012341234');
-  const [buyerEmail, setBuyerEmail] = useState('example@example.com');
-  const [vbankDue, setVbankDue] = useState('');
-  const [bizNum, setBizNum] = useState('');
-  const [escrow, setEscrow] = useState(false);
-  const [digital, setDigital] = useState(false);
-
-  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={PGS}
-                selectedValue={pg}
-                onValueChange={(value) => {
-                  setPg(value);
-                  const methods = getMethods(value);
-                  setMethod(methods[0].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={tierCode}
-                  onChangeText={(value) => setTierCode(value)}
-                />
-              </Input>
-            </VStack>
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  결제수단
-                </Text>
-              </FormControl.Label>
-              <Picker
-                data={getMethods(pg)}
-                selectedValue={method}
-                onValueChange={(value) => setMethod(value)}
-              />
-            </VStack>
-            {method === 'card' && (
-              <VStack>
-                <FormControl.Label my={1}>
-                  <Text color={'#9e9e9e'} fontSize={15}>
-                    할부개월수
-                  </Text>
-                </FormControl.Label>
-                <Picker
-                  data={getQuotas(pg)}
-                  selectedValue={cardQuota}
-                  onValueChange={(value) => setCardQuota(parseInt(value, 10))}
-                />
-              </VStack>
-            )}
-            {method === 'vbank' && (
-              <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={vbankDue}
-                    onChangeText={(value) => setVbankDue(value)}
-                  />
-                </Input>
-              </VStack>
-            )}
-            {method === 'vbank' && pg === 'danal_tpay' && (
-              <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={bizNum}
-                    onChangeText={(value) => setBizNum(value)}
-                  />
-                </Input>
-              </VStack>
-            )}
-            {method === 'phone' && (
-              <VStack>
-                <FormControl.Label my={1}>
-                  <Text color={'#9e9e9e'} fontSize={15}>
-                    실물컨텐츠
-                  </Text>
-                </FormControl.Label>
-                <Switch
-                  mx={2}
-                  mb={1}
-                  p={1}
-                  value={digital}
-                  alignSelf={'flex-start'}
-                  onValueChange={(value) => setDigital(value)}
-                />
-              </VStack>
-            )}
-            <VStack>
-              <FormControl.Label my={1}>
-                <Text color={'#9e9e9e'} fontSize={15}>
-                  에스크로
-                </Text>
-              </FormControl.Label>
-              <Switch
-                mx={2}
-                mb={1}
-                p={1}
-                value={escrow}
-                alignSelf={'flex-start'}
-                onValueChange={(value) => setEscrow(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={amount}
-                  onChangeText={(value) => setAmount(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={merchantUid}
-                  onChangeText={(value) => setMerchantUid(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={buyerName}
-                  onChangeText={(value) => setBuyerName(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={buyerTel}
-                  onChangeText={(value) => setBuyerTel(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={buyerEmail}
-                  onChangeText={(value) => setBuyerEmail(value)}
-                />
-              </Input>
-            </VStack>
-            <Button
-              bgColor={'#344e81'}
-              mt={4}
-              /* @ts-ignore */
-              onPress={() => {
-                const data: PaymentParams = {
-                  params: {
-                    pg,
-                    pay_method: method,
-                    currency: undefined,
-                    notice_url: undefined,
-                    display: undefined,
-                    merchant_uid: merchantUid,
-                    name,
-                    amount,
-                    app_scheme: 'exampleforrn',
-                    tax_free: undefined,
-                    buyer_name: buyerName,
-                    buyer_tel: buyerTel,
-                    buyer_email: buyerEmail,
-                    buyer_addr: undefined,
-                    buyer_postcode: undefined,
-                    custom_data: undefined,
-                    vbank_due: undefined,
-                    digital: undefined,
-                    language: undefined,
-                    biz_num: undefined,
-                    customer_uid: undefined,
-                    naverPopupMode: undefined,
-                    naverUseCfm: undefined,
-                    naverProducts: undefined,
-                    m_redirect_url: IMPConst.M_REDIRECT_URL,
-                    niceMobileV2: true,
-                    escrow,
-                  },
-                  userCode,
-                  tierCode,
-                };
-
-                // 신용카드의 경우, 할부기한 추가
-                if (method === 'card' && cardQuota !== 0) {
-                  data.params.display = {
-                    card_quota: cardQuota === 1 ? [] : [cardQuota],
-                  };
-                }
-
-                // 가상계좌의 경우, 입금기한 추가
-                if (method === 'vbank' && vbankDue) {
-                  data.params.vbank_due = vbankDue;
-                }
-
-                // 다날 && 가상계좌의 경우, 사업자 등록번호 10자리 추가
-                if (method === 'vbank' && pg === 'danal_tpay') {
-                  data.params.biz_num = bizNum;
-                }
-
-                // 휴대폰 소액결제의 경우, 실물 컨텐츠 여부 추가
-                if (method === 'phone') {
-                  data.params.digital = digital;
-                }
-
-                // 정기결제의 경우, customer_uid 추가
-                if (pg === 'kcp_billing') {
-                  data.params.customer_uid = `cuid_${new Date().getTime()}`;
-                }
-
-                if (pg === 'naverpay') {
-                  const today = new Date();
-                  const oneMonthLater = new Date(
-                    today.setMonth(today.getMonth() + 1)
-                  );
-                  const dd = String(oneMonthLater.getDate()).padStart(2, '0');
-                  const mm = String(oneMonthLater.getMonth() + 1).padStart(
-                    2,
-                    '0'
-                  ); // January is 0!
-                  const yyyy = oneMonthLater.getFullYear();
-
-                  data.params.naverPopupMode = false;
-                  data.params.naverUseCfm = `${yyyy}${mm}${dd}`;
-                  data.params.naverProducts = [
-                    {
-                      categoryType: 'BOOK',
-                      categoryId: 'GENERAL',
-                      uid: '107922211',
-                      name: '한국사',
-                      payReferrer: 'NAVER_BOOK',
-                      count: 10,
-                    },
-                  ];
-                }
-
-                navigation.navigate('Payment', data);
-              }}
-            >
-              <ButtonText fontWeight={'bold'} color={'#fff'}>
-                결제하기
-              </ButtonText>
-            </Button>
-          </FormControl>
-        </ScrollView>
-      </KeyboardAvoidingView>
-    </SafeAreaView>
-  );
-}
-
-export default PaymentTest;

package/example/src/Picker/index.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import {
-  ChevronDownIcon,
-  Icon,
-  Select,
-  SelectBackdrop,
-  SelectContent,
-  SelectDragIndicator,
-  SelectDragIndicatorWrapper,
-  SelectIcon,
-  SelectInput,
-  SelectItem,
-  SelectPortal,
-  SelectTrigger,
-} from '@gluestack-ui/themed';
-
-type PickerProps = {
-  data: any[];
-  selectedValue: string | number | undefined;
-  onValueChange?: ((value: any) => void) | undefined;
-};
-
-function Picker(props: PickerProps) {
-  return (
-    <Select
-      mx={2}
-      mb={1}
-      flex={1}
-      p={1}
-      selectedValue={
-        props.data.find(({ value }) => value === props.selectedValue)?.value
-      }
-      selectedLabel={
-        props.data.find(({ value }) => value === props.selectedValue)?.label
-      }
-      onValueChange={props.onValueChange}
-    >
-      <SelectTrigger variant={'underlined'}>
-        <SelectInput />
-        <SelectIcon>
-          <Icon as={ChevronDownIcon} />
-        </SelectIcon>
-      </SelectTrigger>
-      <SelectPortal>
-        <SelectBackdrop />
-        <SelectContent>
-          <SelectDragIndicatorWrapper>
-            <SelectDragIndicator />
-          </SelectDragIndicatorWrapper>
-          {props.data.map((e, index) => {
-            const { label, value } = e;
-            return <SelectItem label={label} value={value} key={index} />;
-          })}
-        </SelectContent>
-      </SelectPortal>
-    </Select>
-  );
-}
-
-export default Picker;