iamport-react-native 2.0.13 → 2.0.14

package/exampleForExpo/src/PaymentTest/index.js

@@ -0,0 +1,313 @@
+import React, { useState } from 'react';
+import {
+  Button,
+  FormControl,
+  Input,
+  ScrollView,
+  Stack,
+  Switch,
+  Text,
+} from 'native-base';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Picker from '../Picker';
+import { PGS, TIER_CODES } from '../constants';
+import { getMethods, getQuotas } from '../utils';
+import { IMPConst } from 'iamport-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function PaymentTest({ navigation }) {
+  const [pg, setPg] = useState('html5_inicis');
+  const [tierCode, setTierCode] = useState(undefined);
+  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('39000');
+  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,
+      }}
+    >
+      <ScrollView m={2} backgroundColor={'#fff'}>
+        <FormControl p={'5%'} borderRadius={3}>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              PG사
+            </FormControl.Label>
+            <Picker
+              data={PGS}
+              selectedValue={pg}
+              onValueChange={(value) => {
+                setPg(value);
+                const methods = getMethods(value);
+                setMethod(methods[0].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>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              결제수단
+            </FormControl.Label>
+            <Picker
+              data={getMethods(pg)}
+              selectedValue={method}
+              onValueChange={(value) => setMethod(value)}
+            />
+          </Stack>
+          {method === 'card' && (
+            <Stack direction={'row'}>
+              <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+                할부개월수
+              </FormControl.Label>
+              <Picker
+                data={getQuotas(pg)}
+                selectedValue={cardQuota}
+                onValueChange={(value) => setCardQuota(parseInt(value, 10))}
+              />
+            </Stack>
+          )}
+          {method === 'vbank' && (
+            <Stack direction={'row'}>
+              <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+                입금기한
+              </FormControl.Label>
+              <Input
+                mb={2}
+                flex={1}
+                value={vbankDue}
+                onChangeText={(value) => setVbankDue(value)}
+              />
+            </Stack>
+          )}
+          {method === 'vbank' && pg === 'danal_tpay' && (
+            <Stack direction={'row'}>
+              <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+                사업자번호
+              </FormControl.Label>
+              <Input
+                mb={2}
+                flex={1}
+                value={bizNum}
+                keyboardType="number-pad"
+                returnKeyType={'done'}
+                onChangeText={(value) => setBizNum(value)}
+              />
+            </Stack>
+          )}
+          {method === 'phone' && (
+            <Stack direction={'row'}>
+              <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+                실물컨텐츠
+              </FormControl.Label>
+              <Switch
+                mb={2}
+                value={digital}
+                onValueChange={(value) => setDigital(value)}
+              />
+            </Stack>
+          )}
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              에스크로
+            </FormControl.Label>
+            <Switch
+              mb={2}
+              value={escrow}
+              onValueChange={(value) => setEscrow(value)}
+            />
+          </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={amount}
+              keyboardType="number-pad"
+              returnKeyType={'done'}
+              onChangeText={(value) => setAmount(value)}
+            />
+          </Stack>
+          <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={buyerName}
+              onChangeText={(value) => setBuyerName(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              전화번호
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={buyerTel}
+              keyboardType="number-pad"
+              returnKeyType={'done'}
+              onChangeText={(value) => setBuyerTel(value)}
+            />
+          </Stack>
+          <Stack direction={'row'}>
+            <FormControl.Label alignItems={'center'} mb={2} w={'18%'}>
+              이메일
+            </FormControl.Label>
+            <Input
+              mb={2}
+              flex={1}
+              value={buyerEmail}
+              onChangeText={(value) => setBuyerEmail(value)}
+            />
+          </Stack>
+          <Button
+            bgColor={'#344e81'}
+            /* @ts-ignore */
+            onPress={() => {
+              const data = {
+                params: {
+                  pg,
+                  pay_method: method,
+                  currency: undefined,
+                  notice_url: undefined,
+                  display: undefined,
+                  merchant_uid: merchantUid,
+                  name,
+                  amount,
+                  app_scheme: 'exampleforexpo',
+                  tax_free: undefined,
+                  buyer_name: buyerName,
+                  buyer_tel: buyerTel,
+                  buyer_email: buyerEmail,
+                  buyer_addr: undefined,
+                  buyer_postcode: undefined,
+                  custom_data: undefined,
+                  vbank_due: undefined,
+                  popup: undefined,
+                  digital: undefined,
+                  language: undefined,
+                  biz_num: undefined,
+                  customer_uid: undefined,
+                  naverPopupMode: undefined,
+                  naverUseCfm: undefined,
+                  naverProducts: undefined,
+                  m_redirect_url: IMPConst.M_REDIRECT_URL,
+                  escrow,
+                },
+                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);
+            }}
+          >
+            <Text fontWeight={'bold'} color={'#fff'}>
+              결제하기
+            </Text>
+          </Button>
+        </FormControl>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/exampleForExpo/src/Picker/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Select } from 'native-base';
+
+export default function Picker(props) {
+  return (
+    <Select
+      mb={2}
+      flex={1}
+      borderColor={'transparent'}
+      selectedValue={props.selectedValue}
+      onValueChange={props.onValueChange}
+    >
+      {props.data.map((e, index) => {
+        const { label, value } = e;
+        return <Select.Item label={label} value={value} key={index} />;
+      })}
+    </Select>
+  );
+}

package/exampleForExpo/src/constants.js

@@ -0,0 +1,322 @@
+const PGS = [
+  {
+    value: 'html5_inicis',
+    label: '웹 표준 이니시스',
+  },
+  {
+    value: 'kcp',
+    label: 'NHN KCP',
+  },
+  {
+    value: 'kcp_billing',
+    label: 'NHN KCP 정기결제',
+  },
+  {
+    value: 'uplus',
+    label: '토스페이먼츠 - (구)LG 유플러스',
+  },
+  {
+    value: 'jtnet',
+    label: 'JTNET',
+  },
+  {
+    value: 'nice',
+    label: '나이스 정보통신',
+  },
+  {
+    value: 'kakaopay',
+    label: '신 - 카카오페이',
+  },
+  {
+    value: 'kakao',
+    label: '구 - LG CNS 카카오페이',
+  },
+  {
+    value: 'danal',
+    label: '다날 휴대폰 소액결제',
+  },
+  {
+    value: 'danal_tpay',
+    label: '다날 일반결제',
+  },
+  {
+    value: 'kicc',
+    label: '한국정보통신',
+  },
+  {
+    value: 'paypal',
+    label: '페이팔',
+  },
+  {
+    value: 'mobilians',
+    label: '모빌리언스',
+  },
+  {
+    value: 'payco',
+    label: '페이코',
+  },
+  {
+    value: 'eximbay',
+    label: '엑심베이',
+  },
+  {
+    value: 'settle',
+    label: '세틀뱅크 가상계좌',
+  },
+  {
+    value: 'naverco',
+    label: '네이버 체크아웃',
+  },
+  {
+    value: 'naverpay',
+    label: '네이버페이',
+  },
+  {
+    value: 'smilepay',
+    label: '스마일페이',
+  },
+  {
+    value: 'chai',
+    label: '차이페이',
+  },
+  {
+    value: 'payple',
+    label: '페이플',
+  },
+  {
+    value: 'alipay',
+    label: '알리페이',
+  },
+  {
+    value: 'bluewalnut',
+    label: '블루월넛',
+  },
+  {
+    value: 'tosspay',
+    label: '토스 - 간편결제',
+  },
+  {
+    value: 'smartro',
+    label: '스마트로',
+  },
+  {
+    value: 'tosspayments',
+    label: '토스페이먼츠 (신모듈)',
+  },
+  {
+    value: 'ksnet',
+    label: 'KSNET',
+  },
+];
+
+const TIER_CODES = [
+  {
+    value: 'ADD',
+    label: '아디다스',
+  },
+  {
+    value: 'RBK',
+    label: '리복 - 복수PG 사용중',
+  },
+  {
+    value: 'HKT',
+    label: '에어텔닷컴 렌트카 테스트',
+  },
+  {
+    value: 'HKK',
+    label: 'YES Angel',
+  },
+  {
+    value: 'DGA',
+    label: 'CAMPVR대구',
+  },
+  {
+    value: 'SCH',
+    label: 'CAMPVR광화문',
+  },
+  {
+    value: 'SNL',
+    label: '토즈_선릉점',
+  },
+  {
+    value: '111',
+    label: '여기어때',
+  },
+  {
+    value: 'ABC',
+    label: '삼성점',
+  },
+  {
+    value: 'XYZ',
+    label: '삼성점',
+  },
+  {
+    value: '123',
+    label: 'aaaaaaa',
+  },
+  {
+    value: 'AAZ',
+    label: '테스트하위가맹',
+  },
+  {
+    value: '001',
+    label: '테스트',
+  },
+  {
+    value: 'A01',
+    label: '행복쇼핑',
+  },
+  {
+    value: 'T11',
+    label: 'test11',
+  },
+];
+
+const METHODS = [
+  {
+    value: 'card',
+    label: '신용카드',
+  },
+  {
+    value: 'vbank',
+    label: '가상계좌',
+  },
+  {
+    value: 'trans',
+    label: '실시간 계좌이체',
+  },
+  {
+    value: 'phone',
+    label: '휴대폰 소액결제',
+  },
+];
+
+const METHODS_FOR_INICIS = METHODS.concat([
+  {
+    value: 'samsung',
+    label: '삼성페이',
+  },
+  {
+    value: 'kapy',
+    label: 'KPAY',
+  },
+  {
+    value: 'cultureland',
+    label: '문화상품권',
+  },
+  {
+    value: 'smartculture',
+    label: '스마트문상',
+  },
+  {
+    value: 'happymoney',
+    label: '해피머니',
+  },
+]);
+
+const METHODS_FOR_UPLUS = METHODS.concat([
+  {
+    value: 'cultureland',
+    label: '문화상품권',
+  },
+  {
+    value: 'smartculture',
+    label: '스마트문상',
+  },
+  {
+    value: 'booknlife',
+    label: '도서상품권',
+  },
+]);
+
+const METHODS_FOR_KCP = METHODS.concat([
+  {
+    value: 'samsung',
+    label: '삼성페이',
+  },
+]);
+
+const METHODS_FOR_MOBILIANS = [
+  {
+    value: 'card',
+    label: '신용카드',
+  },
+  {
+    value: 'phone',
+    label: '휴대폰 소액결제',
+  },
+];
+
+const METHOD_FOR_CARD = [
+  {
+    value: 'card',
+    label: '신용카드',
+  },
+];
+
+const METHOD_FOR_PHONE = [
+  {
+    value: 'phone',
+    label: '휴대폰 소액결제',
+  },
+];
+
+const METHOD_FOR_VBANK = [
+  {
+    value: 'vbank',
+    label: '가상계좌',
+  },
+];
+
+const METHOD_FOR_TRANS = [
+  {
+    value: 'trans',
+    label: '실시간 계좌이체',
+  },
+];
+
+const QUOTAS = [
+  {
+    value: 0,
+    label: 'PG사 기본 제공',
+  },
+  {
+    value: 1,
+    label: '일시불',
+  },
+];
+
+const CARRIERS = [
+  {
+    value: 'SKT',
+    label: 'SKT',
+  },
+  {
+    value: 'KTF',
+    label: 'KT',
+  },
+  {
+    value: 'LGT',
+    label: 'LGU+',
+  },
+  {
+    value: 'MVNO',
+    label: '알뜰폰',
+  },
+];
+
+export {
+  PGS,
+  TIER_CODES,
+  METHODS,
+  METHODS_FOR_INICIS,
+  METHODS_FOR_UPLUS,
+  METHODS_FOR_KCP,
+  METHODS_FOR_MOBILIANS,
+  METHOD_FOR_CARD,
+  METHOD_FOR_PHONE,
+  METHOD_FOR_VBANK,
+  METHOD_FOR_TRANS,
+  QUOTAS,
+  CARRIERS,
+};