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

package/package.json

@@ -1,46 +1,30 @@
 {
   "name": "iamport-react-native",
-  "version": "2.0.15",
+  "version": "3.0.1-alpha.0",
   "description": "리액트 네이티브용 아임포트 결제/본인인증 연동 라이브러리",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
-  "react-native": "src/index",
-  "source": "src/index",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "src",
     "lib",
-    "android",
-    "ios",
-    "iamport-react-native.podspec",
-    "!lib/typescript/example",
-    "!android/build",
-    "!ios/build",
-    "!**/__tests__",
-    "!**/__fixtures__",
-    "!**/__mocks__"
+    "CHANGELOG.md"
   ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "prepare": "bob build",
-    "example": "yarn --cwd example",
-    "example-expo": "yarn --cwd exampleForExpo",
-    "example-managed-expo": "yarn --cwd exampleForManagedExpo",
-    "example-webview": "yarn --cwd exampleForWebView",
-    "pods-example": "cd example && pod-install --quiet",
-    "pods-example-webview": "cd exampleForWebView && pod-install --quiet",
-    "bootstrap": "yarn example && yarn example-expo && yarn example-managed-expo && yarn example-webview &&yarn && yarn pods-example && yarn pods-example-webview"
-  },
   "keywords": [
-    "iamport",
-    "react",
-    "react-native"
+    "react-native",
+    "ios",
+    "android"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/iamport/iamport-react-native"
+    "url": "git+https://github.com/iamport/iamport-react-native.git"
   },
   "author": "Hyukgyu Kwon <me@kwon.hk>",
   "license": "MIT",
@@ -48,54 +32,62 @@
     "url": "https://github.com/iamport/iamport-react-native/issues"
   },
   "homepage": "https://github.com/iamport/iamport-react-native#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
   "devDependencies": {
-    "@react-native-community/eslint-config": "^3.2.0",
-    "@types/react": "^18.0.26",
-    "@types/react-native": "^0.70.8",
-    "eslint": "^8.30.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "pod-install": "^0.1.38",
-    "prettier": "^2.8.1",
-    "query-string": "^8.1.0",
-    "react": "18.2.0",
-    "react-native": "0.72.6",
-    "react-native-builder-bob": "^0.20.3",
-    "react-native-webview": "^13.6.2",
-    "typescript": "^4.9.4"
+    "@changesets/cli": "^2.29.7",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.81.5",
+    "@react-native/eslint-config": "0.81.5",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^3.6.2",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-builder-bob": "^0.40.14",
+    "react-native-webview": "^13.16.0",
+    "release-it": "^19.0.4",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "query-string": "8.x || 9.x",
     "react": "*",
     "react-native": "*",
-    "react-native-webview": ">=11.x"
+    "react-native-webview": "*"
   },
-  "resolutions": {
-    "@types/react": "^18"
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/lib/"
+    ]
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native-community",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
         }
-      ]
+      }
     }
   },
-  "eslintIgnore": [
-    "node_modules/",
-    "lib/"
-  ],
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
@@ -107,8 +99,12 @@
     "source": "src",
     "output": "lib",
     "targets": [
-      "commonjs",
-      "module",
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
       [
         "typescript",
         {
@@ -117,5 +113,16 @@
       ]
     ]
   },
-  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
-}
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.54.8"
+  },
+  "scripts": {
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib",
+    "release": "release-it --only-version"
+  }
+}

package/src/components/Certification/index.tsx

@@ -1,12 +1,12 @@
-import React, { createRef, useState } from 'react';
+import { createRef, useState } from 'react';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-import Loading from '../Loading';
 import ErrorOnParams from '../ErrorOnParams';
+import Loading from '../Loading';
 
-import { IMPData, Validation } from '../../utils/Validation';
 import { IMPConst } from '../../constants';
+import { IMPData, Validation } from '../../utils/Validation';
 
 import viewStyles from '../../styles';
 import IamportUrl from '../../utils/IamportUrl';
@@ -62,11 +62,11 @@ function Certification({ userCode, tierCode, data, loading, callback }: Props) {
             }
           }}
           onMessage={(e) => {
-            let data = e.nativeEvent.data;
-            if (decodeURIComponent(data) !== data) {
-              data = decodeURIComponent(data);
+            let messageData = e.nativeEvent.data;
+            if (decodeURIComponent(messageData) !== messageData) {
+              messageData = decodeURIComponent(messageData);
             }
-            let response = JSON.parse(data);
+            let response = JSON.parse(messageData);
 
             if (typeof callback === 'function') {
               callback(response);

package/src/components/ErrorOnParams/index.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { View, Image, Text, StyleSheet } from 'react-native';
+import { Image, StyleSheet, Text, View } from 'react-native';
 
 const logo = require('../../img/iamport-logo.png');
 

package/src/components/Loading/index.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { View, Image, Text, StyleSheet } from 'react-native';
+import { Image, StyleSheet, Text, View } from 'react-native';
 
 const logo = require('../../img/iamport-logo.png');
 

package/src/components/Payment/index.tsx

@@ -1,14 +1,14 @@
-import React, { createRef, useEffect, useRef, useState } from 'react';
 import type { IMPData } from 'iamport-react-native';
-import ValidationForPayment from '../../utils/ValidationForPayment';
-import ErrorOnParams from '../ErrorOnParams';
-import { Linking, Platform, View } from 'react-native';
-import { IMPConst } from '../../constants';
-import IamportUrl from '../../utils/IamportUrl';
+import { createRef, useEffect, useRef, useState } from 'react';
+import { Alert, Linking, Platform, View } from 'react-native';
 import WebView from 'react-native-webview';
+import type { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
+import { IMPConst } from '../../constants';
 import viewStyles from '../../styles';
+import IamportUrl from '../../utils/IamportUrl';
+import ValidationForPayment from '../../utils/ValidationForPayment';
+import ErrorOnParams from '../ErrorOnParams';
 import Loading from '../Loading';
-import type { WebViewSource } from 'react-native-webview/lib/WebViewTypes';
 
 type Props = {
   userCode: string;
@@ -129,6 +129,30 @@ function Payment({ userCode, tierCode, data, loading, callback }: Props) {
           ref={webview}
           source={webviewSource}
           mixedContentMode={'always'}
+          onError={(event) => {
+            console.warn(
+              'Encountered an error loading page',
+              event.nativeEvent
+            );
+            // 탐색이 실패하면 react-native-webview는 바로 오류 화면을 표시하려 한다
+            // 한편 별도 설정 안 한 WKWebView는 오류를 무시하여 결제를 계속 진행할 수 있는 경우가 있다
+            // 오류 화면 표시를 막는다
+            event.preventDefault();
+            // Domain=NSURLErrorDomain Code=-1005 Description="The network connection was lost."
+            // 지속적으로 폴링하는 카드사(현대카드)의 경우 카드사 앱에서 돌아올 때 HTTP 요청이 강제 중단되어 -1005 오류 발생
+            // 별도 설정 안 한 WKWebView에서 간헐적으로 자동 리다이렉트가 안 되고 버튼을 누르라고 하는 경우 이 경우이다
+            // 무시한다
+            if (
+              Platform.OS === 'ios' ||
+              (Platform.OS === 'macos' && event.nativeEvent.code === -1005)
+            ) {
+              return;
+            }
+            // 이외의 경우에는 어떻게 처리해야 할지 확실하지 않지만 우선 알림을 보여 주도록 구현
+            Alert.alert(
+              `탐색 오류가 발생했습니다\n도메인: ${event.nativeEvent.domain}\n오류 코드: ${event.nativeEvent.code}\n설명: ${event.nativeEvent.description}`
+            );
+          }}
           onLoadEnd={() => {
             if (!isWebViewLoaded) {
               if (data.pg.startsWith('eximbay')) {

package/src/utils/IamportUrl.ts

@@ -1,5 +1,4 @@
 import type { IMPData } from 'iamport-react-native';
-import queryString from 'query-string';
 import { Linking, Platform } from 'react-native';
 import { IMPConst } from '../constants';
 
@@ -11,32 +10,36 @@ class IamportUrl {
 
   constructor(url: string) {
     this.url = url;
-    this.scheme = url.split('://', 1)[0];
-    let splittedUrl = [this.scheme, url.slice(this.scheme.length + 3)];
+    const [scheme, location] = splitFirst(url, '://');
+    this.scheme = scheme;
     if (Platform.OS === 'ios') {
       this.path = this.scheme.startsWith('itms')
-        ? `https://${splittedUrl[1]}`
+        ? `https://${location}`
         : this.url;
     } else if (Platform.OS === 'android') {
       if (this.isAppUrl()) {
         if (this.scheme.includes('intent')) {
-          let intentUrl = splittedUrl[1].split('#Intent;');
-          let host = intentUrl[0];
-          let args = intentUrl[1].split(';');
-
+          const [host, argText] = splitFirst(location!!, '#Intent;');
+          const args = argText!!.split(';');
           if (this.scheme !== 'intent') {
-            this.scheme = this.scheme.split(':')[1];
+            this.scheme = this.scheme.split(':')[1]!!;
             this.path = this.scheme + '://' + host;
           }
-          args.forEach((s) => {
-            if (s.startsWith('scheme')) {
-              let scheme = s.split('=')[1];
-              this.path = scheme + '://' + host;
-              this.scheme = scheme;
-            } else if (s.startsWith('package')) {
-              this.package = s.split('=')[1];
+          for (const arg of args) {
+            const [key, rawValue] = splitFirst(arg, '=');
+            const value =
+              rawValue === undefined ? undefined : decodeURIComponent(rawValue);
+            switch (key) {
+              case 'scheme':
+                if (value !== undefined) {
+                  this.path = `${value}://${host}`;
+                  this.scheme = value;
+                }
+                break;
+              case 'package':
+                this.package = value;
             }
-          });
+          }
         } else {
           this.path = this.url;
         }
@@ -50,14 +53,13 @@ class IamportUrl {
     return this.url;
   }
 
-  isPaymentOver(redirectUrl: string, data?: IMPData.PaymentData) {
+  isPaymentOver(redirectUrl: string, data?: IMPData.PaymentData): boolean {
     if (this.url.startsWith(redirectUrl)) {
       return true;
     }
 
     if (data?.pay_method === 'trans') {
-      const decodeUrl = decodeURIComponent(this.url);
-      const parsedUrl = queryString.parse(decodeUrl);
+      const searchParams = new URLSearchParams(extractQuery(this.url));
       const scheme = data?.app_scheme;
       /**
        * [IOS] 웹 표준 이니시스 - 실시간 계좌이체 대비
@@ -72,17 +74,17 @@ class IamportUrl {
        * 이를 위한 isInicisTransPaid 플래그 추가
        */
       if (data.pg.startsWith('html5_inicis') && Platform.OS === 'ios') {
-        const query = parsedUrl;
         if (
-          query.m_redirect_url !== null &&
+          searchParams.has('m_redirect_url') &&
           scheme === data.app_scheme?.toLowerCase()
         ) {
-          if ((query.m_redirect_url as string | null)?.includes(redirectUrl)) {
+          if (searchParams.get('m_redirect_url')?.includes(redirectUrl)) {
             return true;
           }
         }
       }
     }
+    return false;
   }
 
   isAppUrl() {
@@ -333,12 +335,15 @@ class IamportUrl {
   }
 
   getQuery() {
-    return queryString.parse(this.getStringifiedQuery());
+    return Object.fromEntries(
+      new URLSearchParams(this.getStringifiedQuery()).entries()
+    );
   }
 
   getStringifiedQuery() {
-    const decodedUrl = decodeURIComponent(this.url);
-    return queryString.extract(decodedUrl);
+    const query = extractQuery(this.url);
+    if (query === undefined) return undefined;
+    return decodeQueryParam(query);
   }
 
   getInicisTransQuery(redirectUrl: string) {
@@ -368,4 +373,27 @@ class IamportUrl {
   }
 }
 
+function splitFirst(
+  text: string,
+  delimiter: string
+): [string] | [string, string] {
+  const index = text.indexOf(delimiter);
+  if (index === -1) return [text];
+  return [text.slice(0, index), text.slice(index + delimiter.length)];
+}
+
+// PG사 URL은 표준적인 URL이 아닐 수 있다.
+function extractQuery(url: string): string | undefined {
+  const hashIndex = url.indexOf('#');
+  const beforeHash = hashIndex === -1 ? url : url.slice(0, hashIndex);
+  const queryIndex = beforeHash.indexOf('?');
+  if (queryIndex === -1) return undefined;
+  return beforeHash.slice(queryIndex);
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent#decoding_query_parameters_from_a_url
+function decodeQueryParam(query: string): string {
+  return decodeURIComponent(query.replaceAll('+', ' '));
+}
+
 export default IamportUrl;

package/.circleci/config.yml

@@ -1,98 +0,0 @@
-version: 2.1
-
-executors:
-  default:
-    docker:
-      - image: circleci/node:10
-    working_directory: ~/project
-
-commands:
-  attach_project:
-    steps:
-      - attach_workspace:
-          at: ~/project
-
-jobs:
-  install-dependencies:
-    executor: default
-    steps:
-      - checkout
-      - attach_project
-      - restore_cache:
-          keys:
-            - dependencies-{{ checksum "package.json" }}
-            - dependencies-
-      - restore_cache:
-          keys:
-            - dependencies-example-{{ checksum "example/package.json" }}
-            - dependencies-example-
-      - run:
-          name: Install dependencies
-          command: |
-            yarn install --cwd example --frozen-lockfile
-            yarn install --frozen-lockfile
-      - save_cache:
-          key: dependencies-{{ checksum "package.json" }}
-          paths: node_modules
-      - save_cache:
-          key: dependencies-example-{{ checksum "example/package.json" }}
-          paths: example/node_modules
-      - persist_to_workspace:
-          root: .
-          paths: .
-
-  lint:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Lint files
-          command: |
-            yarn lint
-
-  typescript:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Typecheck files
-          command: |
-            yarn typescript
-
-  unit-tests:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Run unit tests
-          command: |
-            yarn test --coverage
-      - store_artifacts:
-          path: coverage
-          destination: coverage
-
-  build-package:
-    executor: default
-    steps:
-      - attach_project
-      - run:
-          name: Build package
-          command: |
-            yarn prepare
-
-workflows:
-  build-and-test:
-    jobs:
-      - install-dependencies
-      - lint:
-          requires:
-            - install-dependencies
-      - typescript:
-          requires:
-            - install-dependencies
-      - unit-tests:
-          requires:
-            - install-dependencies
-      - build-package:
-          requires:
-            - install-dependencies

package/.editorconfig

@@ -1,15 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-
-indent_style = space
-indent_size = 2
-
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.gitattributes

@@ -1,3 +0,0 @@
-*.pbxproj -text
-# specific for windows script files
-*.bat text eol=crlf

package/.gitignore

@@ -1,69 +0,0 @@
-# OSX
-#
-.DS_Store
-
-# XDE
-.expo/
-
-# VSCode
-.vscode/
-jsconfig.json
-
-# Xcode
-#
-build/
-*.pbxuser
-!default.pbxuser
-*.mode1v3
-!default.mode1v3
-*.mode2v3
-!default.mode2v3
-*.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
-*.xcuserstate
-project.xcworkspace
-
-# Android/IJ
-#
-.idea
-.gradle
-local.properties
-android.iml
-
-# Cocoapods
-#
-example/ios/Pods
-
-# node.js
-#
-node_modules/
-npm-debug.log
-yarn-debug.log
-yarn-error.log
-
-# BUCK
-buck-out/
-\.buckd/
-android/app/libs
-android/keystores/debug.keystore
-
-# Expo
-.expo/*
-
-# generated by bob
-lib/
-
-# yarn
-.yarn/*
-!.yarn/cache
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions

package/.yarnrc

@@ -1,3 +0,0 @@
-# Override Yarn command so we can automatically setup the repo on running `yarn`
-
-yarn-path "scripts/bootstrap.js"

package/.yarnrc.yml

@@ -1 +0,0 @@
-nodeLinker: node-modules

package/android/.gradle/buildOutputCleanup/cache.properties

@@ -1,2 +0,0 @@
-#Thu Feb 13 15:06:16 KST 2025
-gradle.version=8.9