iamport-react-native 2.0.13 → 2.0.15

package/example/src/Payment/index.tsx

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

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

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

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