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/lib/typescript/components/Payment/index.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import type { IMPData } from '../../utils/Validation';
2
+ declare type Props = {
3
+ userCode: string;
4
+ tierCode?: string;
5
+ data: IMPData.PaymentData;
6
+ loading: any;
7
+ callback: (response: any) => any;
8
+ };
9
+ declare function Payment({ userCode, tierCode, data, loading, callback }: Props): JSX.Element;
10
+ export default Payment;
package/lib/typescript/constants/index.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ declare namespace IMPConst {
2
+ const PG: readonly ["html5_inicis", "inicis", "uplus", "kcp", "kcp_billing", "nice", "jtnet", "kakao", "kakaopay", "danal", "danal_tpay", "kicc", "settle", "mobilians", "payco", "eximbay", "paypal", "naverco", "naverpay", "smilepay", "chai", "payple", "alipay", "bluewalnut", "tosspay", "smartro"];
3
+ const PAY_METHOD: readonly ["card", "trans", "vbank", "phone", "samsung", "kpay", "cultureland", "smartculture", "happymoney", "booknlife", "kakaopay", "lpay", "payco", "ssgpay", "tosspay", "unionpay", "alipay", "tenpay", "wechat", "molpay", "paysbuy"];
4
+ const CURRENCY: readonly ["KRW", "USD", "EUR", "JPY"];
5
+ const LANGUAGE: readonly ["ko", "en"];
6
+ const EN_AVAILABLE_PG: readonly ["inicis", "html5_inicis", "uplus", "nice", "eximbay"];
7
+ const CARRIERS: readonly ["SKT", "KTF", "LGT", "MVNO"];
8
+ const ANDROID_MARKET_PREFIX = "market://details?id=";
9
+ const IOS_MARKET_PREFIX = "https://apps.apple.com/app/";
10
+ const M_REDIRECT_URL = "http://detectchangingwebview/iamport/rn";
11
+ const NICE_TRANS_URL = "https://web.nicepay.co.kr/smart/bank/payTrans.jsp";
12
+ const IMP_SDK_URL = "https://service.iamport.kr";
13
+ const SMILEPAY_BASE_URL = "https://www.mysmilepay.com";
14
+ const WEBVIEW_SOURCE_HTML = "\n<html>\n <head>\n <meta http-equiv='content-type' content='text/html; charset=utf-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n\n <script type='text/javascript' src='https://code.jquery.com/jquery-latest.min.js' ></script>\n <script type='text/javascript' src='https://cdn.iamport.kr/js/iamport.payment-1.1.8.js'></script>\n </head>\n <body></body>\n</html>\n";
15
+ const ANDROID_APPSCHEME: {
16
+ readonly ISP: "ispmobile";
17
+ readonly BANKPAY: "kftc-bankpay";
18
+ readonly KB_BANKPAY: "kb-bankpay";
19
+ readonly NH_BANKPAY: "nhb-bankpay";
20
+ readonly MG_BANKPAY: "mg-bankpay";
21
+ readonly KN_BANKPAY: "kn-bankpay";
22
+ readonly KAKAOPAY: "kakaotalk";
23
+ readonly SMILEPAY: "smilepayapp";
24
+ readonly CHAIPAY: "chaipayment";
25
+ readonly PAYCO: "payco";
26
+ readonly HYUNDAICARD: "hdcardappcardansimclick";
27
+ readonly TOSS: "supertoss";
28
+ readonly SHINHANCARD: "shinhan-sr-ansimclick";
29
+ readonly HANACARD: "cloudpay";
30
+ readonly SAMSUNGCARD: "mpocket.online.ansimclick";
31
+ readonly KBCARD: "kb-acp";
32
+ readonly NHCARD: "nhallonepayansimclick";
33
+ readonly CITICARD: "citimobileapp";
34
+ readonly LOTTECARD: "lotteappcard";
35
+ readonly LPAY: "lpayapp";
36
+ readonly SSGPAY: "shinsegaeeasypayment";
37
+ readonly KPAY: "kpay";
38
+ readonly PAYNOW: "lguthepay-xpay";
39
+ readonly WOORIWONCARD: "com.wooricard.smartapp";
40
+ readonly LPOINT: "lmslpay";
41
+ readonly KTFAUTH: "ktauthexternalcall";
42
+ readonly LGTAUTH: "upluscorporation";
43
+ readonly SKTAUTH: "tauthlink";
44
+ };
45
+ const ANDROID_PACKAGE: {
46
+ readonly PACKAGE_ISP: "kvp.jjy.MispAndroid320";
47
+ readonly PACKAGE_BANKPAY: "com.kftc.bankpay.android";
48
+ readonly PACKAGE_KB_BANKPAY: "com.kbstar.liivbank";
49
+ readonly PACKAGE_NH_BANKPAY: "com.nh.cashcardapp";
50
+ readonly PACKAGE_MG_BANKPAY: "kr.co.kfcc.mobilebank";
51
+ readonly PACKAGE_KN_BANKPAY: "com.knb.psb";
52
+ readonly PACKAGE_KAKAOPAY: "com.kakao.talk";
53
+ readonly PACKAGE_SMILEPAY: "com.mysmilepay.app";
54
+ readonly PACKAGE_CHAIPAY: "finance.chai.app";
55
+ readonly PACKAGE_PAYCO: "com.nhnent.payapp";
56
+ readonly PACKAGE_HYUNDAICARD: "com.hyundaicard.appcard";
57
+ readonly PACKAGE_TOSS: "viva.republica.toss";
58
+ readonly PACKAGE_SHINHANCARD: "com.shcard.smartpay";
59
+ readonly PACKAGE_HANACARD: "com.hanaskard.paycla";
60
+ readonly PACKAGE_SAMSUNGCARD: "kr.co.samsungcard.mpocket";
61
+ readonly PACKAGE_KBCARD: "com.kbcard.cxh.appcard";
62
+ readonly PACKAGE_NHCARD: "nh.smart.nhallonepay";
63
+ readonly PACKAGE_CITICARD: "kr.co.citibank.citimobile";
64
+ readonly PACKAGE_LOTTECARD: "com.lcacApp";
65
+ readonly PACKAGE_LPAY: "com.lotte.lpay";
66
+ readonly PACKAGE_SSGPAY: "com.ssg.serviceapp.android.egiftcertificate";
67
+ readonly PACKAGE_KPAY: "com.inicis.kpay";
68
+ readonly PACKAGE_PAYNOW: "com.lguplus.paynow";
69
+ readonly PACKAGE_WOORIWONCARD: "com.wooricard.smartapp";
70
+ readonly PACKAGE_LPOINT: "com.lottemembers.android";
71
+ readonly PACKAGE_KTFAUTH: "com.kt.ktauth";
72
+ readonly PACKAGE_LGTAUTH: "com.lguplus.smartotp";
73
+ readonly PACKAGE_SKTAUTH: "com.sktelecom.tauth";
74
+ };
75
+ }
76
+ export { IMPConst };
package/lib/typescript/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import Payment from './components/Payment';
2
+ import Certification from './components/Certification';
3
+ export { IMPData } from './utils/Validation';
4
+ export { IMPConst } from './constants';
5
+ declare const IMP: {
6
+ Payment: typeof Payment;
7
+ Certification: typeof Certification;
8
+ };
9
+ export default IMP;
package/lib/typescript/styles.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ declare const viewStyles: {
2
+ wrapper: {
3
+ flex: number;
4
+ };
5
+ loadingContainer: {
6
+ position: "absolute";
7
+ left: number;
8
+ right: number;
9
+ top: number;
10
+ bottom: number;
11
+ flex: number;
12
+ zIndex: number;
13
+ };
14
+ webViewContainer: {
15
+ flex: number;
16
+ zIndex: number;
17
+ };
18
+ };
19
+ export default viewStyles;
package/lib/typescript/utils/IamportUrl.d.ts ADDED
@@ -0,0 +1,19 @@
1
+ import queryString from 'query-string';
2
+ declare class IamportUrl {
3
+ url: string;
4
+ scheme: string;
5
+ path?: string;
6
+ package?: string;
7
+ constructor(url: string);
8
+ getUrl(): string;
9
+ isPaymentOver(): boolean;
10
+ isAppUrl(): boolean;
11
+ isIframeLoaded(): boolean;
12
+ getAppUrl(): string | undefined;
13
+ getMarketUrl(): string;
14
+ getQuery(): queryString.ParsedQuery<string>;
15
+ getStringifiedQuery(): string;
16
+ getInicisTransQuery(): string;
17
+ launchApp(): Promise<any>;
18
+ }
19
+ export default IamportUrl;
package/lib/typescript/utils/Validation.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ declare class Validation {
2
+ userCode: string;
3
+ loading: object;
4
+ callback: ((response: any) => any) | undefined;
5
+ data: IMPData.CertificationData | IMPData.PaymentData | undefined;
6
+ isValid: boolean;
7
+ message: string;
8
+ constructor(userCode: string, loading: object, callback?: (response: any) => any, data?: IMPData.CertificationData | IMPData.PaymentData);
9
+ validateUserCode(): void;
10
+ validateLoading(): void;
11
+ validateCallback(): void;
12
+ validateData(): void;
13
+ getIsValid(): boolean;
14
+ getMessage(): string;
15
+ }
16
+ declare namespace IMPData {
17
+ interface CertificationData {
18
+ merchant_uid: string;
19
+ company: string;
20
+ carrier: string;
21
+ name: string;
22
+ phone: string;
23
+ min_age?: string;
24
+ m_redirect_url?: string;
25
+ }
26
+ interface PaymentData {
27
+ pg: string;
28
+ pay_method: string;
29
+ currency?: string;
30
+ notice_url?: string | string[];
31
+ display?: {
32
+ card_quota: number[];
33
+ };
34
+ merchant_uid: string;
35
+ amount: string | number;
36
+ buyer_tel: string;
37
+ app_scheme?: string;
38
+ escrow: boolean;
39
+ name: string;
40
+ tax_free?: number;
41
+ buyer_name: string;
42
+ buyer_email: string;
43
+ buyer_addr?: string;
44
+ buyer_postcode?: string;
45
+ custom_data?: object;
46
+ vbank_due?: string;
47
+ popup?: boolean;
48
+ digital?: boolean;
49
+ language?: string;
50
+ biz_num?: string;
51
+ customer_uid?: string;
52
+ naverPopupMode?: boolean;
53
+ naverUseCfm?: string;
54
+ naverProducts?: object[];
55
+ m_redirect_url?: string;
56
+ }
57
+ }
58
+ export { Validation, IMPData };
package/lib/typescript/utils/ValidationForPayment.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { Validation, IMPData } from './Validation';
2
+ declare class ValidationForPayment extends Validation {
3
+ constructor(userCode: string, loading: object, callback: (response: any) => any, data: IMPData.PaymentData);
4
+ validateCallback(): void;
5
+ validateData(): void;
6
+ }
7
+ export default ValidationForPayment;
package/package.json CHANGED
@@ -1,39 +1,117 @@
1
1
  {
2
2
  "name": "iamport-react-native",
3
- "version": "1.6.4",
3
+ "version": "2.0.0-rc.2",
4
4
  "description": "리액트 네이티브용 아임포트 결제/본인인증 연동 라이브러리",
5
- "main": "./src/index.js",
5
+ "main": "lib/commonjs/index",
6
+ "module": "lib/module/index",
7
+ "types": "lib/typescript/index.d.ts",
8
+ "react-native": "src/index",
9
+ "source": "src/index",
10
+ "files": [
11
+ "src",
12
+ "lib",
13
+ "android",
14
+ "ios",
15
+ "iamport-react-native.podspec",
16
+ "!lib/typescript/example",
17
+ "!android/build",
18
+ "!ios/build",
19
+ "!**/__tests__",
20
+ "!**/__fixtures__",
21
+ "!**/__mocks__"
22
+ ],
6
23
  "scripts": {
7
- "test": "echo \"Error: no test specified\" && exit 1"
24
+ "test": "echo \"Error: no test specified\" && exit 1",
25
+ "typescript": "tsc --noEmit",
26
+ "lint": "eslint \"**/*.{js,ts,tsx}\"",
27
+ "prepare": "bob build",
28
+ "example": "yarn --cwd example",
29
+ "example-expo": "yarn --cwd exampleForExpo",
30
+ "example-managed-expo": "yarn --cwd exampleForManagedExpo",
31
+ "example-webview": "yarn --cwd exampleForWebView",
32
+ "pods-example": "cd example && pod-install --quiet",
33
+ "pods-example-webview": "cd exampleForWebView && pod-install --quiet",
34
+ "bootstrap": "yarn example && yarn example-expo && yarn example-managed-expo && yarn example-webview &&yarn && yarn pods-example && yarn pods-example-webview"
8
35
  },
9
36
  "keywords": [
10
37
  "iamport",
11
38
  "react",
12
39
  "react-native"
13
40
  ],
14
- "author": "Solee Deedee Choi",
15
- "license": "MIT",
16
- "dependencies": {
17
- "prop-types": "^15.6.2",
18
- "query-string": "^6.1.0",
19
- "react-native-webview": ">=10.8.3"
20
- },
21
- "homepage": "https://github.com/iamport/iamport-react-native",
22
41
  "repository": {
23
42
  "type": "git",
24
43
  "url": "https://github.com/iamport/iamport-react-native"
25
44
  },
45
+ "author": "Hyukgyu Kwon <me@kwon.hk>",
46
+ "license": "MIT",
47
+ "bugs": {
48
+ "url": "https://github.com/iamport/iamport-react-native/issues"
49
+ },
50
+ "homepage": "https://github.com/iamport/iamport-react-native#readme",
51
+ "devDependencies": {
52
+ "@react-native-community/eslint-config": "^2.0.0",
53
+ "@types/react": "^16.9.19",
54
+ "@types/react-native": "0.62.13",
55
+ "eslint": "^7.2.0",
56
+ "eslint-config-prettier": "^7.0.0",
57
+ "eslint-plugin-prettier": "^3.1.3",
58
+ "pod-install": "^0.1.0",
59
+ "prettier": "^2.0.5",
60
+ "query-string": "^7.0.1",
61
+ "react": "16.13.1",
62
+ "react-native": "0.63.4",
63
+ "react-native-builder-bob": "^0.18.0",
64
+ "react-native-webview": "^11.6.4",
65
+ "typescript": "^4.1.3"
66
+ },
26
67
  "peerDependencies": {
27
68
  "react": "*",
28
- "react-native": "*",
29
- "@babel/runtime": "*",
30
- "prop-types": "*",
31
- "query-string": "*",
32
- "react-native-webview": ">=10.8.3"
69
+ "react-native": ">=0.60.0",
70
+ "react-native-webview": ">=10.8.3",
71
+ "query-string": "*"
33
72
  },
34
- "devDependencies": {
35
- "@babel/runtime": "^7.4.5",
36
- "react": "^16.8.6",
37
- "react-native": "^0.59.8"
73
+ "eslintConfig": {
74
+ "root": true,
75
+ "extends": [
76
+ "@react-native-community",
77
+ "prettier"
78
+ ],
79
+ "rules": {
80
+ "prettier/prettier": [
81
+ "error",
82
+ {
83
+ "quoteProps": "consistent",
84
+ "singleQuote": true,
85
+ "tabWidth": 2,
86
+ "trailingComma": "es5",
87
+ "useTabs": false
88
+ }
89
+ ]
90
+ }
91
+ },
92
+ "eslintIgnore": [
93
+ "node_modules/",
94
+ "lib/"
95
+ ],
96
+ "prettier": {
97
+ "quoteProps": "consistent",
98
+ "singleQuote": true,
99
+ "tabWidth": 2,
100
+ "trailingComma": "es5",
101
+ "useTabs": false
102
+ },
103
+ "react-native-builder-bob": {
104
+ "source": "src",
105
+ "output": "lib",
106
+ "targets": [
107
+ "commonjs",
108
+ "module",
109
+ [
110
+ "typescript",
111
+ {
112
+ "project": "tsconfig.build.json"
113
+ }
114
+ ]
115
+ ]
38
116
  }
39
117
  }
package/src/components/Certification/index.tsx ADDED
@@ -0,0 +1,112 @@
1
+ import React, { useRef, useState } from 'react';
2
+ import { View } from 'react-native';
3
+ import { WebView } from 'react-native-webview';
4
+
5
+ import Loading from '../Loading';
6
+ import ErrorOnParams from '../ErrorOnParams';
7
+
8
+ import { IMPData, Validation } from '../../utils/Validation';
9
+ import { IMPConst } from '../../constants';
10
+
11
+ import viewStyles from '../../styles';
12
+ import IamportUrl from '../../utils/IamportUrl';
13
+
14
+ type Props = {
15
+ userCode: string;
16
+ tierCode?: string;
17
+ data: IMPData.CertificationData;
18
+ loading: any;
19
+ callback: (response: any) => any;
20
+ };
21
+
22
+ function Certification({ userCode, tierCode, data, loading, callback }: Props) {
23
+ const [isWebViewLoaded, setIsWebViewLoaded] = useState(false);
24
+ const webview = useRef<WebView>();
25
+
26
+ const validation = new Validation(userCode, loading);
27
+ if (validation.getIsValid()) {
28
+ const { wrapper, loadingContainer, webViewContainer } = viewStyles;
29
+ return (
30
+ <View style={wrapper}>
31
+ <View style={webViewContainer}>
32
+ <WebView
33
+ ref={(ref) => {
34
+ if (ref !== null) {
35
+ webview.current = ref;
36
+ }
37
+ }}
38
+ useWebKit
39
+ source={{ html: IMPConst.WEBVIEW_SOURCE_HTML }}
40
+ onLoadEnd={() => {
41
+ if (!isWebViewLoaded) {
42
+ // html이 load되고 최초 한번만 inject javascript
43
+ if (tierCode) {
44
+ webview.current?.injectJavaScript(`
45
+ setTimeout(function() { IMP.agency("${userCode}", "${tierCode}"); });
46
+ `);
47
+ } else {
48
+ webview.current?.injectJavaScript(`
49
+ setTimeout(function() { IMP.init("${userCode}"); });
50
+ `);
51
+ }
52
+ webview.current?.injectJavaScript(`
53
+ setTimeout(function() {
54
+ IMP.certification(${JSON.stringify(data)}, function(response) {
55
+ window.ReactNativeWebView.postMessage(JSON.stringify(response));
56
+ });
57
+ });
58
+ `);
59
+ setIsWebViewLoaded(true);
60
+ }
61
+ }}
62
+ onMessage={(e) => {
63
+ const { data } = e.nativeEvent;
64
+ let response = data;
65
+ while (decodeURIComponent(response) !== response) {
66
+ response = decodeURIComponent(response);
67
+ }
68
+ response = JSON.parse(response);
69
+
70
+ if (typeof callback === 'function') {
71
+ callback(response);
72
+ }
73
+ }}
74
+ startInLoadingState
75
+ renderLoading={() => (
76
+ <View style={loadingContainer}>{loading || <Loading />}</View>
77
+ )}
78
+ originWhitelist={['*']} // https://github.com/facebook/react-native/issues/19986
79
+ onShouldStartLoadWithRequest={(request) => {
80
+ const { url } = request;
81
+ // console.log('url: ' + url);
82
+ const iamportUrl = new IamportUrl(url);
83
+ if (iamportUrl.isAppUrl()) {
84
+ /* 3rd-party 앱 오픈 */
85
+ iamportUrl.launchApp().catch((e) => {
86
+ const { code, message } = e;
87
+ callback({
88
+ imp_success: false,
89
+ error_code: code,
90
+ error_msg: message,
91
+ });
92
+ });
93
+
94
+ return false;
95
+ }
96
+ if (iamportUrl.isPaymentOver()) {
97
+ callback(iamportUrl.getQuery());
98
+ return false;
99
+ }
100
+
101
+ return true;
102
+ }}
103
+ />
104
+ </View>
105
+ </View>
106
+ );
107
+ }
108
+
109
+ return <ErrorOnParams message={validation.getMessage()} />;
110
+ }
111
+
112
+ export default Certification;
package/src/components/ErrorOnParams/{index.js → index.tsx} RENAMED
@@ -1,26 +1,25 @@
1
-
2
1
  import React from 'react';
3
- import PropTypes from 'prop-types';
4
- import {
5
- View,
6
- Image,
7
- Text,
8
- // TouchableOpacity,
9
- StyleSheet,
2
+ import {
3
+ View,
4
+ Image,
5
+ Text,
6
+ // TouchableOpacity,
7
+ StyleSheet,
10
8
  } from 'react-native';
11
9
 
12
10
  const logo = require('../../img/iamport-logo.png');
13
11
 
14
- function ErrorOnParams({ message }) {
15
- const { container, contents, img, text/*, button*/ } = styles;
12
+ type ErrorProps = { message: string };
13
+
14
+ function ErrorOnParams({ message }: ErrorProps) {
16
15
  return (
17
- <View style={container}>
18
- <View style={contents}>
19
- <Image style={img} source={logo} />
20
- <Text style={text}>{message}</Text>
21
- {/*<TouchableOpacity
16
+ <View style={styles.container}>
17
+ <View style={styles.contents}>
18
+ <Image style={styles.contents} source={logo} />
19
+ <Text style={styles.text}>{message}</Text>
20
+ {/*<TouchableOpacity
22
21
  style={button}
23
- onPress={}
22
+ onPress={}
24
23
  >
25
24
  <Text>돌아가기</Text>
26
25
  </TouchableOpacity>*/}
@@ -29,26 +28,22 @@ function ErrorOnParams({ message }) {
29
28
  );
30
29
  }
31
30
 
32
- ErrorOnParams.propTypes = {
33
- message: PropTypes.string,
34
- }
35
-
36
31
  const styles = StyleSheet.create({
37
32
  container: {
38
33
  flex: 1,
39
34
  alignItems: 'center',
40
- flexDirection:'row',
41
- justifyContent:'center',
35
+ flexDirection: 'row',
36
+ justifyContent: 'center',
42
37
  },
43
38
  contents: {
44
39
  flex: 1,
45
40
  alignItems: 'center',
46
- justifyContent:'center',
41
+ justifyContent: 'center',
47
42
  },
48
43
  text: {
49
44
  fontSize: 16,
50
45
  marginTop: 20,
51
- lineHeight: 25
46
+ lineHeight: 25,
52
47
  },
53
48
  button: {
54
49
  backgroundColor: '#fff',
@@ -63,7 +58,7 @@ const styles = StyleSheet.create({
63
58
  fontSize: 14,
64
59
  marginTop: 20,
65
60
  fontWeight: 'bold',
66
- }
61
+ },
67
62
  });
68
63
 
69
64
  export default ErrorOnParams;
package/src/components/Loading/{index.js → index.tsx} RENAMED
@@ -4,14 +4,13 @@ import { View, Image, Text, StyleSheet } from 'react-native';
4
4
  const logo = require('../../img/iamport-logo.png');
5
5
 
6
6
  function Loading() {
7
- const { container, contents, img, text } = styles;
8
7
  return (
9
- <View style={container}>
10
- <View style={contents}>
11
- <Image style={img} source={logo} />
12
- <Text style={text}>잠시만 기다려주세요...</Text>
8
+ <View style={styles.container}>
9
+ <View style={styles.contents}>
10
+ <Image style={styles.contents} source={logo} />
11
+ <Text style={styles.text}>잠시만 기다려주세요...</Text>
13
12
  </View>
14
- </View>
13
+ </View>
15
14
  );
16
15
  }
17
16
 
@@ -20,18 +19,18 @@ const styles = StyleSheet.create({
20
19
  ...StyleSheet.absoluteFillObject,
21
20
  flex: 1,
22
21
  alignItems: 'center',
23
- flexDirection:'row',
24
- justifyContent:'center',
22
+ flexDirection: 'row',
23
+ justifyContent: 'center',
25
24
  },
26
25
  contents: {
27
26
  flex: 1,
28
27
  alignItems: 'center',
29
- justifyContent:'center',
28
+ justifyContent: 'center',
30
29
  },
31
30
  text: {
32
31
  fontSize: 20,
33
32
  marginTop: 20,
34
- lineHeight: 25
33
+ lineHeight: 25,
35
34
  },
36
35
  });
37
36