iamport-react-native 1.6.4 → 2.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +25 -320
  3. package/android/build.gradle +114 -24
  4. package/android/gradle.properties +4 -0
  5. package/android/src/main/AndroidManifest.xml +1 -3
  6. package/android/src/main/java/com/iamportreactnative/IamportReactNativePackage.kt +17 -0
  7. package/android/src/main/java/com/iamportreactnative/IamportReactNativeViewManager.kt +20 -0
  8. package/iamport-react-native.podspec +19 -0
  9. package/ios/IamportReactNative-Bridging-Header.h +1 -0
  10. package/ios/IamportReactNative.xcodeproj/project.pbxproj +47 -20
  11. package/ios/IamportReactNativeViewManager.m +12 -0
  12. package/ios/IamportReactNativeViewManager.swift +32 -0
  13. package/lib/commonjs/components/Certification/index.js +154 -0
  14. package/lib/commonjs/components/Certification/index.js.map +1 -0
  15. package/lib/commonjs/components/ErrorOnParams/index.js +66 -0
  16. package/lib/commonjs/components/ErrorOnParams/index.js.map +1 -0
  17. package/lib/commonjs/components/Loading/index.js +50 -0
  18. package/lib/commonjs/components/Loading/index.js.map +1 -0
  19. package/lib/commonjs/components/Payment/index.js +288 -0
  20. package/lib/commonjs/components/Payment/index.js.map +1 -0
  21. package/lib/commonjs/constants/index.js +103 -0
  22. package/lib/commonjs/constants/index.js.map +1 -0
  23. package/{android/src/main/assets → lib/commonjs}/img/iamport-logo.png +0 -0
  24. package/lib/commonjs/index.js +36 -0
  25. package/lib/commonjs/index.js.map +1 -0
  26. package/lib/commonjs/styles.js +31 -0
  27. package/lib/commonjs/styles.js.map +1 -0
  28. package/lib/commonjs/utils/IamportUrl.js +334 -0
  29. package/lib/commonjs/utils/IamportUrl.js.map +1 -0
  30. package/lib/commonjs/utils/Validation.js +72 -0
  31. package/lib/commonjs/utils/Validation.js.map +1 -0
  32. package/lib/commonjs/utils/ValidationForPayment.js +143 -0
  33. package/lib/commonjs/utils/ValidationForPayment.js.map +1 -0
  34. package/lib/module/components/Certification/index.js +132 -0
  35. package/lib/module/components/Certification/index.js.map +1 -0
  36. package/lib/module/components/ErrorOnParams/index.js +55 -0
  37. package/lib/module/components/ErrorOnParams/index.js.map +1 -0
  38. package/lib/module/components/Loading/index.js +38 -0
  39. package/lib/module/components/Loading/index.js.map +1 -0
  40. package/lib/module/components/Payment/index.js +266 -0
  41. package/lib/module/components/Payment/index.js.map +1 -0
  42. package/lib/module/constants/index.js +98 -0
  43. package/lib/module/constants/index.js.map +1 -0
  44. package/lib/module/img/iamport-logo.png +0 -0
  45. package/lib/module/index.js +10 -0
  46. package/lib/module/index.js.map +1 -0
  47. package/lib/module/styles.js +21 -0
  48. package/lib/module/styles.js.map +1 -0
  49. package/lib/module/utils/IamportUrl.js +322 -0
  50. package/lib/module/utils/IamportUrl.js.map +1 -0
  51. package/{src → lib/module}/utils/Validation.js +25 -9
  52. package/lib/module/utils/Validation.js.map +1 -0
  53. package/{src → lib/module}/utils/ValidationForPayment.js +23 -13
  54. package/lib/module/utils/ValidationForPayment.js.map +1 -0
  55. package/lib/typescript/components/Certification/index.d.ts +10 -0
  56. package/lib/typescript/components/ErrorOnParams/index.d.ts +5 -0
  57. package/lib/typescript/components/Loading/index.d.ts +2 -0
  58. package/lib/typescript/components/Payment/index.d.ts +10 -0
  59. package/lib/typescript/constants/index.d.ts +76 -0
  60. package/lib/typescript/index.d.ts +9 -0
  61. package/lib/typescript/styles.d.ts +19 -0
  62. package/lib/typescript/utils/IamportUrl.d.ts +19 -0
  63. package/lib/typescript/utils/Validation.d.ts +58 -0
  64. package/lib/typescript/utils/ValidationForPayment.d.ts +7 -0
  65. package/package.json +98 -20
  66. package/src/components/Certification/index.tsx +112 -0
  67. package/src/components/ErrorOnParams/{index.js → index.tsx} +20 -25
  68. package/src/components/Loading/{index.js → index.tsx} +9 -10
  69. package/src/components/Payment/index.tsx +243 -0
  70. package/src/constants/index.ts +150 -0
  71. package/src/{index.js → index.tsx} +4 -1
  72. package/src/{styles.js → styles.ts} +3 -1
  73. package/src/utils/IamportUrl.ts +319 -0
  74. package/src/utils/Validation.ts +101 -0
  75. package/src/utils/ValidationForPayment.ts +146 -0
  76. package/IamportReactNative.podspec +0 -19
  77. package/android/gradle/wrapper/gradle-wrapper.jar +0 -0
  78. package/android/gradle/wrapper/gradle-wrapper.properties +0 -6
  79. package/android/gradlew +0 -172
  80. package/android/gradlew.bat +0 -84
  81. package/android/src/main/java/com/iamport/IamportModule.java +0 -88
  82. package/android/src/main/java/com/iamport/IamportPackage.java +0 -23
  83. package/ios/IamportReactNative.h +0 -11
  84. package/ios/IamportReactNative.m +0 -23
  85. package/ios/IamportReactNative.xcodeproj/project.xcworkspace/contents.xcworkspacedata +0 -7
  86. package/ios/IamportReactNative.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +0 -8
  87. package/ios/IamportReactNative.xcworkspace/contents.xcworkspacedata +0 -9
  88. package/manuals/CALLBACK.md +0 -68
  89. package/manuals/EXAMPLE.md +0 -175
  90. package/manuals/EXPO.md +0 -66
  91. package/manuals/INSTALL.md +0 -72
  92. package/manuals/SETTING.md +0 -72
  93. package/manuals/SUPPORT.md +0 -30
  94. package/manuals/TRANS.md +0 -122
  95. package/manuals/VERSION.md +0 -114
  96. package/manuals/assets/webview-peer-dependency.png +0 -0
  97. package/src/components/Certification/index.js +0 -99
  98. package/src/components/Payment/PaymentWebView.js +0 -285
  99. package/src/components/Payment/index.android.js +0 -51
  100. package/src/components/Payment/index.ios.js +0 -30
  101. package/src/constants/index.js +0 -83
  102. package/src/img/after-linking-iamport.png +0 -0
  103. package/src/img/after-linking-webview.png +0 -0
  104. package/src/img/allow-arbitrary.gif +0 -0
  105. package/src/img/android-studio-avd-manager.png +0 -0
  106. package/src/img/android-studio-build.png +0 -0
  107. package/src/img/app-scheme-registry.gif +0 -0
  108. package/src/img/expo-eject.png +0 -0
  109. package/src/img/ios-emulator-certification.png +0 -0
  110. package/src/img/ios-emulator-home.png +0 -0
  111. package/src/img/ios-emulator-payment.png +0 -0
  112. package/src/img/ios-trans-create-header-file-1.png +0 -0
  113. package/src/img/ios-trans-create-header-file-2.png +0 -0
  114. package/src/img/ios-trans-create-objectivec-file-1.png +0 -0
  115. package/src/img/ios-trans-create-objectivec-file-2.png +0 -0
  116. package/src/img/ios-trans-result.png +0 -0
  117. package/src/utils/IamportUrl.js +0 -103
package/manuals/EXPO.md DELETED
@@ -1,66 +0,0 @@
1
- # 엑스포에서 아임포트 연동하기
2
- 엑스포 환경에서 아임포트 모듈을 연동하려면 반드시 EJECT 하셔야 합니다. 아임포트 모듈이 네이티브단 코드를 포함하고 있기 때문입니다. 아래는 엑스포 환경에서 EJECT를 통해 아임포트 모듈을 연동하는 방법에 대해 안내합니다. 해당 안내는 엑스포 공식문서 [Ejecting to ExpoKit](https://docs.expo.io/versions/latest/expokit/eject/)를 기반으로 작성했습니다.
3
-
4
- ## 1. 엑스포 CLI 설치하기
5
- ```
6
- $ npm install -g expo-cli
7
- ```
8
-
9
- ## 2. 설정 파일(app.json) 확인하기
10
-
11
- 원활한 ejecting을 위해 아래와 같이 설정되어 있는지 확인합니다.
12
-
13
- ```
14
- // app.json
15
- {
16
- "expo": {
17
- "name": "Your App Name",
18
- "icon": "./path/to/your/app-icon.png",
19
- "version": "1.0.0",
20
- "slug": "your-app-slug",
21
- "sdkVersion": "XX.0.0",
22
- "ios": {
23
- "bundleIdentifier": "com.yourcompany.yourappname"
24
- },
25
- "android": {
26
- "package": "com.yourcompany.yourappname"
27
- }
28
- }
29
- }
30
- ```
31
-
32
- - IOS의 `bundleIdentifier`값과 Android의 `package`값에 알맞은 값을 넣어야 합니다.
33
- - `name`, `icon` 그리고 `version` 필드는 필수입력입니다.
34
- - 보다 자세한 내용은 엑스포 공식문서 [Configure app.json](https://docs.expo.io/versions/latest/distribution/building-standalone-apps/#2-configure-appjson)을 참고해주세요.
35
-
36
- ## 3. EJECT 하기
37
-
38
- 프로젝트 폴더에서 expo 명령어를 통해 eject 합니다. android와 ios 폴더가 생성되며 필요한 dependency들이 설치됩니다.
39
-
40
- ```
41
- $ expo eject
42
- ```
43
-
44
- 위 명령어를 실행하면 아래와 같은 내용이 출력됩니다.
45
-
46
- ![](../src/img/expo-eject.png)
47
-
48
- 두번째 `ExpoKit: I'll create or log in with an Expo account to use React Native and the Expo SDK.`를 선택합니다. 이후 모든 과정은 아임포트 RN 모듈 사용법과 동일합니다.
49
-
50
- ## 4. [아임포트 설치 및 링킹하기](./INSTALL.md)
51
- ```
52
- $ npm install --save iamport-react-native
53
- $ npm install --save react-native-webview@7.0.5 // EXPO와 호환되는 최신 버전 7.0.5 설치
54
- $ react-native link iamport-react-native
55
- ```
56
-
57
- ## 5. 설정하기
58
- - [IOS 설정하기](./SETTING.md)
59
- - [실시간 계좌이체 설정하기](./TRANS.md)
60
-
61
- ## 6. [예제](./EXAMPLE.md)
62
-
63
- - [예제 코드 작성하기](./EXAMPLE.md)
64
- - [예제 프로젝트 실행하기](../exampleForExpo/README.md)
65
-
66
- ## 7. [콜백 함수 설정하기](./CALLBACK.md)
@@ -1,72 +0,0 @@
1
- # 설치하기
2
- 아임포트 리액트 네이티브 모듈 설치 안내입니다. 아래 명령어를 통해 아임포트 모듈을 귀하의 리액트 네이티브 프로젝트에 추가할 수 있습니다. `react-native-webview` 모듈은 아임포트 모듈에 dependent하기 때문에 반드시 함께 설치해야 합니다. IOS12부터 UIWebView는 deprecated되어 warning이 뜨지만 IOS13부터는 에러가 발생합니다. 때문에 `react-native-webview` 모듈은 이에 대비하기 위해 7.x 이상 버전이 요구됩니다. 이미 `react-native-webview` 모듈을 사용하고 계시다면, 버전 체크 후 7.x 버전으로 업그레이드 하셔야 합니다.
3
-
4
- ```
5
- $ npm install iamport-react-native --save
6
- $ npm install react-native-webview --save // IOS13 대비 7.0.0 이상 버전 설치 필수
7
- ```
8
-
9
- 아래 다음 명령어를 통해 아임포트 모듈을 귀하의 안드로이드/IOS 프로젝트에 추가할 수 있습니다.
10
-
11
- ```
12
- $ npm install -g react-native-cli
13
- $ react-native link iamport-react-native
14
- $ react-native link react-native-webview
15
- ```
16
-
17
- 성공적으로 마쳤을 경우, 아래와 같은 화면을 보실 수 있습니다.
18
-
19
- ![](../src/img/after-linking-iamport.png)
20
- ![](../src/img/after-linking-webview.png)
21
-
22
- 실패한 경우, 아래 과정을 통해 iamport-react-native 모듈을 귀하의 프로젝트에 [수동으로 연결](https://facebook.github.io/react-native/docs/linking-libraries-ios)시킬 수 있습니다.
23
-
24
- #### IOS
25
-
26
- 1. XCode 프로젝트(`[...]/ios/[...].xcodeproj`)를 더블클릭해 오픈합니다.
27
- 2. 왼쪽 프로젝트 네비게이터에서, `Libraries` 폴더를 마우스 오른쪽 클릭 ➜ `Add Files to [your project's name]`를 클릭합니다.
28
- 3. `[...]/node_modules/iamport-react-native/ios/IamportReactNative.xcodeproj`와 `[...]/node_modules/react-native-webview/ios/RNCWebView.xcodeprof`를 선택해 추가합니다.
29
- 4. 왼쪽 프로젝트 네비게이터에서, 귀하의 타깃을 클릭 ➜ 오른쪽 상단 `Build Phases`를 클릭합니다.
30
- 5. 세번째 메뉴인 `Link Binary With Libraries`를 열어 `libIamportReactNative.a` 파일과 `libRNCWebView.a` 파일을 추가합니다.
31
-
32
- #### 안드로이드
33
-
34
- 1. `android/app/src/main/java/[...]/MainApplication.java` 파일을 열어 아래 코드를 추가합니다.
35
- ```java
36
- import com.iamport.IamportPackage; // 아임포트 패키지를 불러옵니다.
37
- import com.reactnativecommunity.webview.RNCWebViewPackage; // 리액트 네이티브 웹뷰 패키지를 불러옵니다.
38
- ...
39
-
40
- @Override
41
- protected List<ReactPackage> getPackages() {
42
- return Arrays.<ReactPackage>asList(
43
- new MainReactPackage(),
44
- new IamportPackage(), // 아임포트 패키지를 추가합니다.
45
- new RNCWebViewPackage(), // 리액트 네이티브 웹뷰 패키지를 추가합니다.
46
- );
47
- }
48
- ```
49
-
50
- 2. `android/settings.gradle` 파일을 열고 아래 코드를 추가합니다.
51
- ```java
52
- ...
53
-
54
- include ':iamport-react-native'
55
- project(':iamport-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/iamport-react-native/android')
56
- include ':react-native-webview'
57
- project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
58
-
59
- ...
60
- ```
61
-
62
- 3. `android/app/build.gradle` 파일을 열고 아래 코드를 추가합니다.
63
- ```java
64
- dependencies {
65
- ...
66
-
67
- implementation project(':iamport-react-native')
68
- implementation project(':react-native-webview')
69
-
70
- ...
71
- }
72
- ```
@@ -1,72 +0,0 @@
1
- # IOS 설정하기
2
-
3
- 아임포트 리액트 네이티브 모듈 설정 안내입니다. IOS에서 아임포트 결제연동 모듈을 사용하기 위해서는 아래 3가지 항목을 설정해주셔야 합니다.
4
-
5
- #### 1. App Scheme 등록
6
- 외부 결제 앱(예) 페이코, 신한 판 페이)에서 결제 후 돌아올 때 사용할 URL identifier를 설정해야합니다.
7
-
8
- ![](../src/img/app-scheme-registry.gif)
9
-
10
- 1. `[프로젝트 폴더]/ios/[프로젝트 이름]/info.plist` 파일을 연 후 `URL types`속성을 추가합니다.
11
- 2. item `0`를 확장하여 `URL schemes`를 선택합니다.
12
- 3. item `0`에 App Scheme을 작성합니다.
13
-
14
-
15
- #### 2. 외부 앱 리스트 등록
16
- 3rd party앱(예) 간편결제 앱)을 실행할 수 있도록 외부 앱 리스트를 등록해야합니다.
17
-
18
- 1. `[프로젝트 폴더]/ios/[프로젝트 이름]/info.plist` 파일을 오픈합니다.
19
- 2. [LSApplicationQueriesSchemes](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW14)속성을 추가하고 아래에 외부 앱 리스트를 등록합니다.
20
-
21
- ```html
22
- <key>LSApplicationQueriesSchemes</key>
23
- <array>
24
- <string>kftc-bankpay</string> <!-- 계좌이체 -->
25
- <string>ispmobile</string> <!-- ISP모바일 -->
26
- <string>itms-apps</string> <!-- 앱스토어 -->
27
- <string>hdcardappcardansimclick</string> <!-- 현대카드-앱카드 -->
28
- <string>smhyundaiansimclick</string> <!-- 현대카드-공인인증서 -->
29
- <string>shinhan-sr-ansimclick</string> <!-- 신한카드-앱카드 -->
30
- <string>smshinhanansimclick</string> <!-- 신한카드-공인인증서 -->
31
- <string>kb-acp</string> <!-- 국민카드-앱카드 -->
32
- <string>mpocket.online.ansimclick</string> <!-- 삼성카드-앱카드 -->
33
- <string>ansimclickscard</string> <!-- 삼성카드-온라인결제 -->
34
- <string>ansimclickipcollect</string> <!-- 삼성카드-온라인결제 -->
35
- <string>vguardstart</string> <!-- 삼성카드-백신 -->
36
- <string>samsungpay</string> <!-- 삼성카드-삼성페이 -->
37
- <string>scardcertiapp</string> <!-- 삼성카드-공인인증서 -->
38
- <string>lottesmartpay</string> <!-- 롯데카드-모바일결제 -->
39
- <string>lotteappcard</string> <!-- 롯데카드-앱카드 -->
40
- <string>cloudpay</string> <!-- 하나카드-앱카드 -->
41
- <string>nhappcardansimclick</string> <!-- 농협카드-앱카드 -->
42
- <string>nonghyupcardansimclick</string> <!-- 농협카드-공인인증서 -->
43
- <string>citispay</string> <!-- 씨티카드-앱카드 -->
44
- <string>citicardappkr</string> <!-- 씨티카드-공인인증서 -->
45
- <string>citimobileapp</string> <!-- 씨티카드-간편결제 -->
46
- <string>kakaotalk</string> <!-- 카카오톡 -->
47
- <string>payco</string> <!-- 페이코 -->
48
- <string>lpayapp</string> <!-- 롯데 L페이 -->
49
- <string>hanamopmoasign</string> <!-- 하나카드 공인인증앱 -->
50
- <string>wooripay</string> <!-- 우리페이 -->
51
- <string>nhallonepayansimclick</string> <!-- NH 올원페이 -->
52
- <string>hanawalletmembers</string> <!-- 하나카드(하나멤버스 월렛) -->
53
- </array>
54
- ```
55
-
56
-
57
- #### 3. App Transport Security 설정
58
- ![](../src/img/allow-arbitrary.gif)
59
-
60
- 1. `[프로젝트 폴더]/ios/[프로젝트 이름]/info.plist` 파일을 오픈합니다.
61
- 2. `App Transport Security` 속성을 추가합니다.
62
- 3. 하부 속성에 `Allow Arbitrary Loads in Web Content`,`Allow Arbitrary Loads` 속성을 추가하고 각각의 값(value)을 `YES`로 변경합니다.
63
-
64
- ```html
65
- <key>NSAppTransportSecurity</key>
66
- <dict>
67
- <key>NSAllowsArbitraryLoadsInWebContent</key>
68
- <true/>
69
- <key>NSAllowsArbitraryLoads</key>
70
- <true/>
71
- </dict>
72
- ```
@@ -1,30 +0,0 @@
1
- # 지원정보
2
-
3
- 아임포트 리액트 네이티브(이하 RN) 모듈이 지원하는 PG사 및 결제수단 안내입니다.
4
-
5
- | pg | 이름 | 결제수단 |
6
- | ------------ | ------------------- | ------------------------------------------------------------------------------------------------ |
7
- | html5_inicis | 웹 표준 이니시스 | 신용카드, 가상계좌, 실시간 계좌이체(IOS 별도 설정 필요), 휴대폰 소액결제, 삼성페이, KPAY, 문화상품권, 스마트문상, 해피머니 |
8
- | kcp | NHN KCP | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제, 삼성페이 |
9
- | kcp_billing | NHN KCP 정기결제 | 신용카드 |
10
- | uplus | 토스페이먼츠 - (구)LG 유플러스 | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제, 문화상품권, 스마트문상, 도서상푼권 |
11
- | jtnet | JTNET | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제 |
12
- | nice | 나이스 정보통신 | 신용카드, 가상계좌, 실시간 계좌이체(IOS/안드로이드 별도 설정 필요), 휴대폰 소액결제 |
13
- | kakaopay | 신 - 카카오페이 | 신용카드 |
14
- | kakao | 구 - LG CNS 카카오페이 | 신용카드 |
15
- | danal | 다날 휴대폰 소액결제 | 휴대폰 소액결제 |
16
- | danal_tpay | 다날 일반결제 | 신용카드, 가상계좌, 실시간 계좌이체 |
17
- | kicc | 한국정보통신 | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제 |
18
- | paypal | 페이팔 | 신용카드 |
19
- | mobilians | 모빌리언스 | 신용카드, 가상계좌(준비중), 실시간 계좌이체(준비중), 휴대폰 소액결제 |
20
- | payco | 페이코 | 신용카드 |
21
- | eximbay | 엑심베이 | 신용카드 [주의사항](https://github.com/iamport/iamport-react-native/issues/70#issuecomment-704601908) |
22
- | settle | 세틀뱅크 | 가상계좌 |
23
- | naverco | 네이버 체크아웃 | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제 |
24
- | naverpay | 네이버페이 | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제 |
25
- | smilepay | 스마일페이 | 신용카드 [주의사항](https://github.com/iamport/iamport-react-native/issues/71) |
26
- | chai | 차이페이 | 신용카드 |
27
- | payple | 페이플 | 실시간 계좌이체 |
28
- | alipay | 알리페이 | 신용카드 |
29
- | bluewalnut | 블루월넛 | 신용카드, 가상계좌, 실시간 계좌이체, 휴대폰 소액결제 |
30
- | tosspay | 토스 - 간편결제 | 신용카드 |
package/manuals/TRANS.md DELETED
@@ -1,122 +0,0 @@
1
-
2
- # 실시간 계좌이체 설정하기
3
-
4
- ## 1. IOS - 웹 표준 이니시스 또는 나이스 정보통신
5
- IOS에서 `웹 표준 이니시스(이하 이니시스)` 또는 `나이스 정보통신(이하 나이스)` `실시간 계좌이체`를 연동하는 경우 별도 설정이 요구됩니다. 이니시스는 결제완료 후 콜백이 실행되지 않고, 나이스는 결제인증 후 결제완료 처리가 되지 않기 때문입니다. 이는 이니시스와 나이스 결제모듈 자체 문제입니다. 아임포트 RN 모듈은 이에 대응하기 위한 안내를 제공하고 있습니다.
6
-
7
- ### 실시간 계좌이체 결제처리 원리
8
- 먼저 뱅크페이 앱에서 귀하의 앱으로 복귀할때를 트리거해야 합니다. 아임포트 RN 모듈은 트리거 된 순간 이니시스의 경우 콜백을 실행시키고, 나이스의 경우 나이스로 결제정보가 담긴 POST 요청을 보냅니다. Objective C는 들어오는(incoming) 앱 링크를 트리거 하기 위해 `openURL` 메소드를 제공합니다. 이때 RN `Linking`을 활용해 RN단에서 들어오는 앱 링크를 트리거 하게 만들 수 있습니다. 자세한 내용은 [RN Linking](https://facebook.github.io/react-native/docs/linking)을 참고하세요.
9
-
10
- ### 프로젝트에 openURL 메소드 추가하기
11
- 프로젝트에 openURL 메소드를 추가하는 방법은 총 2가지입니다.
12
-
13
- 1.`*AppDelegate.m` 파일에 아래 코드를 복사합니다.
14
-
15
- ```objectivec
16
- // iOS 9.x or newer
17
- #import <React/RCTLinkingManager.h>
18
-
19
- - (BOOL)application:(UIApplication *)application
20
- openURL:(NSURL *)url
21
- options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
22
- {
23
- return [RCTLinkingManager application:application openURL:url options:options];
24
- }
25
- ```
26
-
27
- ```objectivec
28
- // iOS 8.x or older
29
- #import <React/RCTLinkingManager.h>
30
-
31
- - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
32
- sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
33
- {
34
- return [RCTLinkingManager application:application openURL:url
35
- sourceApplication:sourceApplication annotation:annotation];
36
- }
37
- ```
38
-
39
- 2. 프로젝트에 아임포트 RN 모듈 예제 프로젝트 AppDelegate 파일을 추가합니다.
40
- - Xcode 프로젝트를 오픈합니다.
41
- - 왼쪽 프로젝트 네비게이터에서 타깃에 커서를 두고 마우스 오른쪽 버튼을 클릭합니다.
42
- - 하위 메뉴에서 `New File...`을 클릭합니다.
43
- - 아래와 같이 `Header File`을 선택하고 Next 버튼을 누릅니다.
44
-
45
- ![](../src/img/ios-trans-create-header-file-1.png)
46
-
47
- - 파일 이름을 적는 란에 `AppDelegate+Iamport`를 입력하고 Create 버튼을 누릅니다.
48
-
49
- ![](../src/img/ios-trans-create-header-file-2.png)
50
-
51
- - 생성된 `AppDelegate+Iamport.h` 파일에 아래 코드(iamport-react-native/example/ios/AppDelegate+Iamport.h와 동일)를 복사합니다.
52
- ```objectivec
53
- #ifndef AppDelegate_Iamport_h
54
- #define AppDelegate_Iamport_h
55
-
56
- #import "AppDelegate.h"
57
-
58
- @interface AppDelegate (프로젝트 이름 EX. example)
59
-
60
- @end
61
-
62
- #endif
63
- ```
64
- - 같은 방식으로 타깃에서 마우스 오른쪽 버튼 클릭 후 `New File...`을 클릭합니다.
65
- - 아래와 같이 `Objective-C File`을 클릭하고 Next 버튼을 누릅니다.
66
-
67
- ![](../src/img/ios-trans-create-objectivec-file-1.png)
68
-
69
- - 파일 이름을 적는 란에 `AppDelegate+Iamport`를 입력하고 Next 버튼을 누릅니다.
70
-
71
- ![](../src/img/ios-trans-create-objectivec-file-2.png)
72
-
73
- - 마지막 화면에서 Create 버튼을 누릅니다.
74
- - 생성된 AppDelegate+Iamport.m 파일에 아래 코드(iamport-react-native/example/ios/AppDelegate+Iamport.m와 동일)를 복사합니다.
75
-
76
- ```objectivec
77
- #import "AppDelegate+Iamport.h"
78
- #import <React/RCTLinkingManager.h>
79
-
80
- @implementation AppDelegate (프로젝트 이름 EX. example)
81
-
82
- - (BOOL)application:(UIApplication *)application
83
- openURL:(NSURL *)url
84
- options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
85
- {
86
- return [RCTLinkingManager application:application openURL:url options:options];
87
- }
88
-
89
- @end
90
- ```
91
- - 생성된 결과는 아래와 같습니다.
92
-
93
- ![](../src/img/ios-trans-result.png)
94
-
95
- ## 2. Android - 나이스 정보통신
96
- Android에서는 `나이스` `실시간 계좌이체`를 연동하는 경우 IOS와 같은 이유로 별도 설정이 요구됩니다.
97
-
98
- ### 실시간 계좌이체 결제처리 원리
99
- IOS와 동일하게 뱅크페이 앱에서 귀하의 앱으로 복귀할때를 트리거해야 합니다. 아임포트 RN 모듈은 트리거 된 순간 나이스로 결제정보가 담긴 POST 요청을 보냅니다. Java는 들어오는(incoming) 앱 링크를 트리거 하기 위해 deep linking 기능을 제공합니다.
100
-
101
- ### Intent Filter 추가하고 launchMode 설정하기
102
- deep linking 기능을 활성화하기 위해 `Intent Filter`를 추가하고 `MainActivity`의 `launchMode`를 아래와 같이 `singleTask`로 설정해야 합니다. 자세한 내용은 [RN Linking](https://facebook.github.io/react-native/docs/linking)을 참고하세요.
103
-
104
- ```xml
105
- ..
106
- <!-- [프로젝트 폴더]/android/app/src/main/AndroidManifest.xml -->.
107
- <!-- MainActivity의 launchMode를 singleTask로 설정 -->
108
- <activity
109
- android:name=".MainActivity"
110
- android:launchMode="singleTask"
111
- >
112
- ...
113
- <!-- Intent Filter 추가 -->
114
- <intent-filter>
115
- <action android:name="android.intent.action.VIEW"/>
116
- <category android:name="android.intent.category.DEFAULT"/>
117
- <category android:name="android.intent.category.BROWSABLE"/>
118
- <data android:scheme="앱 스킴 값 EX. example" />
119
- </intent-filter>
120
- </activity>
121
- ...
122
- ```
@@ -1,114 +0,0 @@
1
- # 버전정보
2
-
3
- 아임포트 리액트 네이티브 모듈 버전 정보 안내입니다.
4
-
5
- - [v1.6.4](https://github.com/iamport/iamport-react-native/tree/master)
6
- - 토스 - 간편결제(tosspay)를 추가하였습니다.
7
-
8
- - [v1.6.3](https://github.com/iamport/iamport-react-native/tree/v1.6.4)
9
- - 엑심베이 전용 결제 수단 및 결제창 언어 옵션을 추가하였습니다.
10
-
11
- - [v1.6.2](https://github.com/iamport/iamport-react-native/tree/v1.6.2)
12
- - [IOS / 이니시스 - 실시간 계좌이체] 결제 승인 플로우 관련 버그를 수정하였습니다.
13
-
14
- - [v1.6.1](https://github.com/iamport/iamport-react-native/tree/v1.6.1)
15
- - 블루월넛 PG사 대비 로직을 작성하였습니다.
16
-
17
- - [v1.6.0](https://github.com/iamport/iamport-react-native/tree/v1.6.0)
18
- - 다날 결제시, 주문명에 %를 포함하는 경우 URI malformed 에러를 해결하였습니다.
19
- - [IOS / 네이버페이] 네이버페이 앱 로그인 마켓 URL을 추가하였습니다.
20
- - [IOS / 스마일페이] 쿠키 허용을 위해 baseURL을 스마일페이로 설정한 feature 브랜치(feature/smilepay)를 머지하였습니다.
21
- - [안드로이드 / react-native-webview] v10.8.3 이상에서 원활한 동작을 위해 작성한 feature 브랜치(feature/react-native-webview)를 머지 하였습니다.
22
-
23
- - [v1.5.2](https://github.com/iamport/iamport-react-native/tree/v1.5.2)
24
- - [안드로이드] KG이니시스 - 실시간계좌이체시 국민리브, NH앱캐시, NG상상뱅크, BNK경남은행 앱의 링크가 누락된 부분을 추가하였습니다.
25
- - 예제 코드에 네이버페이 원활한 사용을 위한 네이버페이 전용 파라미터를 추가하였습니다.
26
-
27
- - [v1.5.1](https://github.com/iamport/iamport-react-native/tree/v1.5.1)
28
- - [IOS] 페이코 및 시티카드 앱의 마켓 URL 오타를 수정하였습니다.
29
-
30
- - [v1.5.0](https://github.com/iamport/iamport-react-native/tree/v1.5.0)
31
- - agency 기능을 위한 tierCode prop을 추가하였습니다.
32
-
33
- - [v1.4.4](https://github.com/iamport/iamport-react-native/tree/v1.4.4)
34
- - 새로운 PG사 및 결제수단을 추가하였습니다.
35
- - PG사의 prop type을 enum에서 string으로 변경하였습니다.
36
- - inject javascript는 웹뷰 로드 후 최초 한번만 실행하도록 flag를 추가하였습니다.
37
- - 로딩 컴포넌트 렌더링 시간을 inject javascript 이후로 연장하였습니다. (안드로이드 - iframe 방식은 제외)
38
-
39
- - [v1.4.0](https://github.com/iamport/iamport-react-native/tree/v1.4.0)
40
- - 엑심베이 지원을 위한 코드를 추가하였습니다.
41
- - 아임포트 javascript SDK 버전을 1.1.8로 업그레이드 하였습니다.
42
-
43
- - [v1.3.0](https://github.com/iamport/iamport-react-native/tree/v1.3.0)
44
- - IOS13의 UIWebView deprecated error에 대응하기 위해 react-native-webview의 버전을 7.4.2로 업데이트 하였습니다.
45
- - expo 사용자를 위한 가이드 문서와 예제 프로젝트를 추가하였습니다.
46
-
47
- - [v1.2.3](https://github.com/iamport/iamport-react-native/tree/v1.2.3)
48
- - 3rd-party 앱 URL scheme값에 하나멤버스를 추가하였습니다.
49
-
50
- - [v1.2.2](https://github.com/iamport/iamport-react-native/tree/v1.2.2)
51
- - [IOS] package.json에 homepage값을 추가하였습니다.
52
-
53
- - [v1.2.1](https://github.com/iamport/iamport-react-native/tree/v1.2.1)
54
- - [IOS] RN v0.60이상에서 동작하기 위해 podspec 파일을 추가하였습니다.
55
-
56
- - [v1.2.0](https://github.com/iamport/iamport-react-native/tree/v1.2.0)
57
- - [IOS] ipa 파일 설치시 결제/본인인증 창이 뜨지 않는 이슈를 해결하였습니다.
58
- - [안드로이드] native code의 역할을 react-native단에서 수행하도록 수정하였습니다.
59
- - [본인인증] 회사명(`company`)과 통신사(`carrier`) 파라메터를 추가하였습니다.
60
- - 웹뷰 로딩 파라메터를 컴포넌트로 수정하였습니다.
61
-
62
- - [v1.1.4-rc.1](https://github.com/iamport/iamport-react-native/tree/v1.1.4-rc.1)
63
- - [exampleForWebView] 기존에 작성된 웹 페이지를 리액트 네이티브에서 웹뷰로 재활용하는 경우를 위한 exampleForWebView 예제 프로젝트를 추가하였습니다.
64
- - [example] 예제 프로젝트의 신용카드 할부 개월수 변수명 오타를 수정하였습니다.
65
- - [결제] 웹 표준 이니시스 & 실시간 계좌이체 결제 중단시 처리 로직을 추가하였습니다.
66
-
67
- - [v1.1.4-rc.0](https://github.com/iamport/iamport-react-native/tree/v1.1.4-rc.0)
68
- - [안드로이드] react-native-fbsdk와 충돌하는 이슈를 해결하였습니다.
69
-
70
- - [v1.1.3-rc](https://github.com/iamport/iamport-react-native/tree/v1.1.3-rc)
71
- - [IOS] duplicate symbols for architecture x86_64 에러를 해결하였습니다.
72
-
73
- - [v1.1.2](https://github.com/iamport/iamport-react-native/tree/v1.1.2)
74
- - [결제] 결제 종료 후 merchant_uid를 전달하기 위해 default m_redirect_url을 지정하였습니다.
75
-
76
- - [v1.1.1](https://github.com/iamport/iamport-react-native/tree/v1.1.1)
77
- - jQuery cdn을 변경하였습니다.
78
-
79
- - [v1.1.0](https://github.com/iamport/iamport-react-native/tree/v1.1.0)
80
- - React(v16.8.6), React Native(v0.59.8) 버전을 업그레이드 하였습니다.
81
- - React Hook을 적용하였습니다.
82
- - WebView 라이브러리를 react-native에서 react-native-webview로 변경하였습니다.
83
- - 로딩 데이터가 없어도 에러가 발생하지 않도록 조치하였습니다.
84
- - [결제]
85
- - 결제 데이터에 Array 타입의 값을 허용하도록 설정하였습니다.
86
- - 스마일페이를 추가하였습니다.
87
- - 모빌리언스 신용카드 결제를 추가하였습니다.
88
- - 가상계좌 발급시 콜백 미실행 버그를 해결하였습니다.
89
- - 실시간 계좌이체 뱅크페이 앱 결제 후 후속처리 로직을 추가하였습니다.
90
- - [본인인증] PASS 앱 사용을 위한 설정을 추가하였습니다.
91
- - [Vue Native] VN 지원을 위해, onMessage로 전달되는 data를 decode 하는 코드를 추가하였습니다.
92
-
93
- - [v1.0.6](https://github.com/iamport/iamport-react-native/tree/v1.0.6)
94
- - [IOS] 페이코 웹 결제시, 결제 완료 전 postMessage 수신으로 발생하는 이슈를 해결하였습니다.
95
-
96
- - [v1.0.5](https://github.com/iamport/iamport-react-native/tree/v1.0.5)
97
- - [IOS] 프로덕션 모드에서 js assets이 포함되지 않는 이슈를 해결하였습니다.
98
-
99
- - [v1.0.4](https://github.com/iamport/iamport-react-native/tree/v1.0.4)
100
- - [결제] m_redirect_url 변수가 deprecated 되었습니다.
101
-
102
- - [v1.0.3](https://github.com/iamport/iamport-react-native/tree/v1.0.3)
103
- - 콜백 함수를 필수입력으로 설정하였습니다.
104
-
105
- - [v1.0.2](https://github.com/iamport/iamport-react-native/tree/v1.0.2)
106
- - [결제] 다날, 카카오페이, 모빌리언스 등 콜백 지원 PG에 대해 결제시도 완료 후 콜백이 트리거 되지 않는 이슈를 해결하였습니다.
107
-
108
- - [v1.0.1](https://github.com/iamport/iamport-react-native/tree/v1.0.1)
109
- - 안드로이드와 IOS 모두 지원합니다.
110
- - 일반/정기결제 및 휴대폰 본인인증 기능을 제공합니다.
111
-
112
- - [v0.8.0](https://github.com/iamport/iamport-react-native/tree/v0.8.0)
113
- - 안드로이드만 지원합니다.
114
- - 일반/정기결제 기능만 제공합니다.
@@ -1,99 +0,0 @@
1
- import React, { useState } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { Linking } from 'react-native';
4
- import { WebView } from 'react-native-webview';
5
-
6
- import Loading from '../Loading';
7
- import ErrorOnParams from '../ErrorOnParams';
8
-
9
- import Validation from '../../utils/Validation';
10
- import { WEBVIEW_SOURCE_HTML, CARRIERS } from '../../constants';
11
-
12
- export function Certification({ userCode, tierCode, data, loading, callback }) {
13
- const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
14
-
15
- function onLoadEnd() {
16
- if (!isWebViewLoaded) {
17
- // html이 load되고 최초 한번만 inject javascript
18
- if (tierCode) {
19
- this.xdm.injectJavaScript(`
20
- setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
21
- `);
22
- } else {
23
- this.xdm.injectJavaScript(`
24
- setTimeout(function() { IMP.init("${userCode}"); });
25
- `);
26
- }
27
- this.xdm.injectJavaScript(`
28
- setTimeout(function() {
29
- IMP.certification(${JSON.stringify(data)}, function(response) {
30
- window.ReactNativeWebView.postMessage(JSON.stringify(response));
31
- });
32
- });
33
- `);
34
- setIsWebViewLoaded(true);
35
- }
36
- }
37
-
38
- function onMessage(e) { // 본인인증 결과를 받아 callback을 실행한다
39
- const { data } = e.nativeEvent;
40
- let response = data;
41
- while(decodeURIComponent(response) !== response) {
42
- response = decodeURIComponent(response);
43
- }
44
- response = JSON.parse(response);
45
-
46
- if (typeof callback === 'function') {
47
- callback(response);
48
- }
49
- }
50
-
51
- function onShouldStartLoadWithRequest(request) {
52
- const { url } = request;
53
- if (url.startsWith('https://itunes.apple.com')) { // IOS
54
- Linking.openURL(url);
55
- return false;
56
- }
57
- if (url.startsWith('market://details')) { // Android
58
- Linking.openURL(url);
59
- return false;
60
- }
61
- return true;
62
- }
63
-
64
- const validation = new Validation(userCode, loading);
65
- if (validation.getIsValid()) {
66
- return (
67
- <WebView
68
- ref={(xdm) => this.xdm = xdm}
69
- useWebKit
70
- source={{ html: WEBVIEW_SOURCE_HTML }}
71
- onLoadEnd={onLoadEnd}
72
- onMessage={onMessage}
73
- startInLoadingState
74
- renderLoading={() => loading || <Loading />}
75
- originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
76
- onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
77
- />
78
- );
79
- }
80
-
81
- return <ErrorOnParams message={validation.getMessage()} />;
82
- }
83
-
84
- Certification.propTypes = {
85
- userCode: PropTypes.string.isRequired,
86
- tierCode: PropTypes.string,
87
- data: PropTypes.shape({
88
- merchant_uid: PropTypes.string,
89
- company: PropTypes.string,
90
- carrier: PropTypes.oneOf(CARRIERS),
91
- name: PropTypes.string,
92
- phone: PropTypes.string,
93
- min_age: PropTypes.string,
94
- }),
95
- callback: PropTypes.func.isRequired,
96
- loading: PropTypes.object,
97
- };
98
-
99
- export default Certification;