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

package/exampleForWebView/ios/exampleForWebView.xcodeproj/xcshareddata/xcschemes/exampleForWebView.xcscheme

@@ -1,88 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Scheme
-   LastUpgradeVersion = "1210"
-   version = "1.3">
-   <BuildAction
-      parallelizeBuildables = "YES"
-      buildImplicitDependencies = "YES">
-      <BuildActionEntries>
-         <BuildActionEntry
-            buildForTesting = "YES"
-            buildForRunning = "YES"
-            buildForProfiling = "YES"
-            buildForArchiving = "YES"
-            buildForAnalyzing = "YES">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-               BuildableName = "exampleForWebView.app"
-               BlueprintName = "exampleForWebView"
-               ReferencedContainer = "container:exampleForWebView.xcodeproj">
-            </BuildableReference>
-         </BuildActionEntry>
-      </BuildActionEntries>
-   </BuildAction>
-   <TestAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES">
-      <Testables>
-         <TestableReference
-            skipped = "NO">
-            <BuildableReference
-               BuildableIdentifier = "primary"
-               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
-               BuildableName = "exampleForWebViewTests.xctest"
-               BlueprintName = "exampleForWebViewTests"
-               ReferencedContainer = "container:exampleForWebView.xcodeproj">
-            </BuildableReference>
-         </TestableReference>
-      </Testables>
-   </TestAction>
-   <LaunchAction
-      buildConfiguration = "Debug"
-      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
-      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      launchStyle = "0"
-      useCustomWorkingDirectory = "NO"
-      ignoresPersistentStateOnLaunch = "NO"
-      debugDocumentVersioning = "YES"
-      debugServiceExtension = "internal"
-      allowLocationSimulation = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "exampleForWebView.app"
-            BlueprintName = "exampleForWebView"
-            ReferencedContainer = "container:exampleForWebView.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </LaunchAction>
-   <ProfileAction
-      buildConfiguration = "Release"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      savedToolIdentifier = ""
-      useCustomWorkingDirectory = "NO"
-      debugDocumentVersioning = "YES">
-      <BuildableProductRunnable
-         runnableDebuggingMode = "0">
-         <BuildableReference
-            BuildableIdentifier = "primary"
-            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
-            BuildableName = "exampleForWebView.app"
-            BlueprintName = "exampleForWebView"
-            ReferencedContainer = "container:exampleForWebView.xcodeproj">
-         </BuildableReference>
-      </BuildableProductRunnable>
-   </ProfileAction>
-   <AnalyzeAction
-      buildConfiguration = "Debug">
-   </AnalyzeAction>
-   <ArchiveAction
-      buildConfiguration = "Release"
-      revealArchiveInOrganizer = "YES">
-   </ArchiveAction>
-</Scheme>

package/exampleForWebView/ios/exampleForWebView.xcworkspace/contents.xcworkspacedata

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "group:exampleForWebView.xcodeproj">
-   </FileRef>
-   <FileRef
-      location = "group:Pods/Pods.xcodeproj">
-   </FileRef>
-</Workspace>

package/exampleForWebView/ios/exampleForWebView.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/exampleForWebView/ios/exampleForWebViewTests/Info.plist

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>BNDL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>1.0</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleVersion</key>
-	<string>1</string>
-</dict>
-</plist>

package/exampleForWebView/ios/exampleForWebViewTests/exampleForWebViewTests.m

@@ -1,66 +0,0 @@
-#import <UIKit/UIKit.h>
-#import <XCTest/XCTest.h>
-
-#import <React/RCTLog.h>
-#import <React/RCTRootView.h>
-
-#define TIMEOUT_SECONDS 600
-#define TEXT_TO_LOOK_FOR @"Welcome to React"
-
-@interface exampleForWebViewTests : XCTestCase
-
-@end
-
-@implementation exampleForWebViewTests
-
-- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
-{
-  if (test(view)) {
-    return YES;
-  }
-  for (UIView *subview in [view subviews]) {
-    if ([self findSubviewInView:subview matching:test]) {
-      return YES;
-    }
-  }
-  return NO;
-}
-
-- (void)testRendersWelcomeScreen
-{
-  UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
-  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
-  BOOL foundElement = NO;
-
-  __block NSString *redboxError = nil;
-#ifdef DEBUG
-  RCTSetLogFunction(
-      ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
-        if (level >= RCTLogLevelError) {
-          redboxError = message;
-        }
-      });
-#endif
-
-  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
-    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
-
-    foundElement = [self findSubviewInView:vc.view
-                                  matching:^BOOL(UIView *view) {
-                                    if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
-                                      return YES;
-                                    }
-                                    return NO;
-                                  }];
-  }
-
-#ifdef DEBUG
-  RCTSetLogFunction(RCTDefaultLogFunction);
-#endif
-
-  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
-  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
-}
-
-@end

package/exampleForWebView/manuals/CERTIFICATION.md

@@ -1,223 +0,0 @@
-# 휴대폰 본인인증 웹 페이지 재활용하기
-
-웹 페이지로 작성한 본인인증 화면을 리액트 네이티브에서 웹뷰로 띄워 재사용하는 경우가 있습니다. 이 경우 본인인증 하기 버튼을 눌렀을때 본인인증 환경이 리액트 네이티브인지 판단해 **리액트 네이티브로 post message를 보내야** 합니다.
-
-리액트 네이티브 프로젝트에 아임포트 리액트 네이티브 모듈(`iamport-react-native`)을 설치한 후, 리액트로부터 `post message`를 받으면 해당 본인인증 화면을 렌더링 하도록 로직을 작성해야 합니다.
-
-### 1. 리액트 네이티브로 `post message` 보내기
-
-본인인증 하기 버튼을 눌렀을 때 본인인증 환경이 리액트 네이티브인지 여부를 먼저 판단해야 합니다. 본인인증 환경이 리액트 네이티브인 경우, **리액트 네이티브로 `가맹점 식별코드`, `본인인증 데이터` 그리고 `액션 유형`을 post message로 보냅니다.**
-
-```javascript
-  // iamport-react-example/src/Certification/index.js
-  import React from 'react';
-
-  function Certification() {
-    function onClickCertification() {
-      /* 가맹점 식별코드 */
-      const userCode = 'imp00000000';
-
-      /* 본인인증 데이터 정의하기 */
-      const data = {
-        merchant_uid: `mid_${new Date().getTime()}`  // 주문번호
-        name: '홍길동',                                // 이름
-        phone: '01012341234',                        // 전화번호
-        ...
-      };
-
-      if (isReactNative()) {
-        /* 리액트 네이티브 환경에 대응하기 */
-        const params = {
-          userCode,                                   // 가맹점 식별코드
-          data,                                       // 본인인증 데이터
-          type: 'certification',                      // 결제와 본인인증 구분을 위한 필드
-        };
-        const paramsToString = JSON.stringify(params);
-        window.ReactNativeWebView.postMessage(paramsToString);
-      } else {
-        /* 그 외 환경의 경우 */
-        /* 가맹점 식별하기 */
-        const { IMP } = window;
-        IMP.init(userCode);
-        /* 본인인증 창 호출하기 */
-        IMP.certification(data, callback);
-      }
-    }
-
-    /* 콜백 함수 정의하기 */
-    function callback(response) {
-      ...
-    }
-
-    function isReactNative() {
-      /*
-        리액트 네이티브 환경인지 여부를 판단해
-        리액트 네이티브의 경우 IMP.certification()를 호출하는 대신
-        리액트 네이티브로 post message를 보낸다
-
-        아래 예시는 모든 모바일 환경을 리액트 네이티브로 인식한 것으로
-        실제로는 user agent에 값을 추가해 정확히 판단해야 한다
-      */
-      if (ua.mobile) return true;
-      return false;
-    }
-
-    return (
-      ...
-      <button onClick={onClickCertification}>본인인증 하기</button>
-      ...
-    );
-  }
-```
-
-### 2. 리액트 네이티브에서 `post message`를 받았을때 본인인증 화면 렌더링하기
-
-리액트에서 `post message`를 보내면, 리액트 네이티브 `WebView`의 `onMessage` 함수가 이를 트리거합니다. 메시지 내용 중 액션 유형(`type`)이 `payment`면 결제 화면을, `certification`이면 본인인증 화면을 렌더링 하기 위해 해당 라우트로 이동합니다. 이때 **post message로 전달 받은 `가맹점 식별코드`와 `본인인증 데이터`를 `query`로 전달**합니다.
-
-```javascript
-  // iamport-react-native/exampleForWebView/src/Home.js
-  import React from 'react';
-  import WebView from 'react-native-webview';
-
-  function Home({ navigation }) {
-    const domain = `http://${가맹점 IP}:3000`;
-    function onMessage(e) {
-      /* 리액트로부터 post message를 받았을때 트리거 된다 */
-      try {
-        /* post message에서 가맹점 식별코드, 본인인증 데이터 그리고 액션 유형을 추출한다 */
-        const { userCode, data, type } = JSON.parse(e.nativeEvent.data);
-        const params = { userCode, data };
-        /* 액션 유형이 certification이면 본인인증 화면으로 이동한다 */
-        navigation.push(type === 'payment' ? 'Payment' : 'Certification', params);
-      } catch (e) {}
-    }
-
-    return (
-      <WebView
-        source={{ uri: domain }} 
-        onMessage={onMessage}
-        style={{ flex: 1 }}
-        injectedJavascript={`(function() {
-          window.postMessage = function(data) {
-            window.ReactNativeWebView.postMessage(data);
-          };
-        })()`}
-      />
-    );
-  }
-
-  export default Home;
-```
-
-### 3. 리액트 네이티브에 본인인증 화면 추가하기
-
-`가맹점 식별코드`와 `본인인증 데이터`를 쿼리에서 추출해 `IMP.Certification`에 prop 형태로 전달합니다. 이때 본인인증 후 실행될 로직을 작성한 콜백 함수도 함께 전달합니다. 콜백함수에서 본인인증 결과에 따라 로직을 다르게 작성할 수 있습니다. 아래는 본인인증 성공시 웹뷰를 띄운 Home으로 돌아가고, 본인인증 실패시 바로 이전 화면으로 돌아가는 예시입니다.
-
-```javascript
-  // iamport-react-native/exampleForWebView/Certification.js
-  import React from 'react';
-  import IMP from 'iamport-react-native';
-
-  function Certification({ navigation }) {
-    /* 가맹점 식별코드, 본인인증 데이터 추출 */
-    const userCode = navigation.getParam('userCode');
-    const data = navigation.getParam('data');
-    
-    /* 본인인증 후 실행될 콜백 함수 입력 */
-    function callback(response) {
-      const isSuccessed = getIsSuccessed(response);
-      if (isSuccessed) {
-        /* 본인인증 성공한 경우, 리디렉션 위해 홈으로 이동한다 */
-        const params = {
-          ...response,
-          type: 'certification', // 결제와 본인인증 구분을 위한 필드
-        };
-        navigation.replace('Home', params);
-      } else {
-        /* 본인인증 실패한 경우, 이전 화면으로 돌아간다 */
-        navigation.goBack();
-      }
-    }
-
-    function getIsSuccessed(response) {
-      const { success } = response;
-
-      if (typeof success === 'string') return success === 'true';
-      if (typeof success === 'boolean') return success === true;
-    }
-
-    return (
-      <IMP.Certification
-        userCode={userCode}
-        data={{
-          ...data,
-          app_scheme: 'test',
-        }}
-        callback={callback}
-      />
-    );
-  }
-
-  export default Certification;
-```
-
-### 5. 본인인증 후 리디렉션 설정하기
-
-위의 예시에 따라 본인인증 후, 웹뷰를 띄운 Home으로 돌아갔을때 리디렉션을 위한 추가 로직을 작성해야 합니다. 아래와 같은 경우를 가정합니다.
-
-| 유형        | 도메인                                       |
-| ---------- | ------------------------------------------ |
-| 홈          | https://example.com                       |
-| 본인인증      | https://example.com/certification         |
-| 본인인증 완료  | https://example.com/certification/result  |
-
-위와 같은 경우, 본인인증 후 홈으로 렌더링 시 웹뷰의 도메인은 다시 `https://example.com`이 됩니다. 이를 `https://example.com/certification/result`로 리디렉션 하기 위해 홈 컴포넌트에 아래와 같은 로직을 작성합니다.
-
-```javascript
-  // iamport-react-native/exampelForWebView/Home.js
-  import React, { useState, useEffect } from 'react';
-  import WebView from 'react-native-webview';
-  import queryString from 'query-string';
-
-  const domain = 'https://example.com'; // 가맹점 도메인
-  function Home({ navigation }) {
-    const [uri, setUri] = useState(domain);
-
-    useEffect(() => {
-      /* navigation이 바뀌었을때를 트리거 */
-      const response = navigation.getParam('response');
-      if (response) {
-        const query = queryString.stringify(response);
-        const { type } = query;
-        if (type === 'certification') {
-          /* 본인인증 후 렌더링 되었을 경우, https://example.com/certification/result로 리디렉션 시킨다 */
-          setUri(`${domain}/certification/result?${query}`);    
-        }
-        ...
-      }
-    }, [navigation]);
-
-    function onMessage(e) {
-      try {
-        const { userCode, data, type } = JSON.parse(e.nativeEvent.data);
-        const params = { userCode, data };
-        navigation.push(type === 'payment' ? 'Payment' : 'Certification', params);
-      } catch (e) {}
-    }
-
-    return (
-      <WebView
-        source={{ uri }} 
-        onMessage={onMessage}
-        style={{ flex: 1 }}
-        injectedJavascript={`(function() {
-          window.postMessage = function(data) {
-            window.ReactNativeWebView.postMessage(data);
-          };
-        })()`}
-      />
-    );
-  }
-
-  export default Home;
-```

package/exampleForWebView/manuals/PAYMENT.md

@@ -1,232 +0,0 @@
-# 결제 웹 페이지 재활용하기
-
-웹 페이지로 작성한 결제 화면을 리액트 네이티브에서 웹뷰로 띄워 재사용하는 경우가 있습니다. 이 경우 결제하기 버튼을 눌렀을때 결제 환경이 리액트 네이티브인지 판단해 **리액트 네이티브로 post message를 보내야** 합니다.
-
-리액트 네이티브 프로젝트에 아임포트 리액트 네이티브 모듈(`iamport-react-native`)을 설치한 후, 리액트로부터 `post message`를 받으면 해당 결제 화면을 렌더링 하도록 로직을 작성해야 합니다.
-
-### 1. 리액트 네이티브로 `post message` 보내기
-
-결제 하기 버튼을 눌렀을 때 결제 환경이 리액트 네이티브인지 여부를 먼저 판단해야 합니다. 결제 환경이 리액트 네이티브인 경우, **리액트 네이티브로 `가맹점 식별코드`, `결제 데이터` 그리고 `액션 유형`을 post message로 보냅니다.**
-
-```javascript
-  // iamport-react-example/src/Payment/index.js
-  import React from 'react';
-
-  function Payment() {
-    function onClickPayment() {
-      /* 가맹점 식별코드 */
-      const userCode = 'imp00000000';
-
-      /* 결제 데이터 정의하기 */
-      const data = {
-        pg: 'html5_inicis',                           // PG사
-        pay_method: 'card',                           // 결제수단
-        merchant_uid: `mid_${new Date().getTime()}`   // 주문번호
-        amount: 1000,                                 // 결제금액
-        name: '아임포트 결제 데이터 분석',                  // 주문명
-        buyer_name: '홍길동',                           // 구매자 이름
-        buyer_tel: '01012341234',                     // 구매자 전화번호
-        buyer_email: 'example@example',               // 구매자 이메일
-        buyer_addr: '신사동 661-16',                    // 구매자 주소
-        buyer_postcode: '06018',                      // 구매자 우편번호
-        ...
-      };
-
-      if (isReactNative()) {
-        /* 리액트 네이티브 환경에 대응하기 */
-        const params = {
-          userCode,                                   // 가맹점 식별코드
-          data,                                       // 결제 데이터
-          type: 'payment',                            // 결제와 본인인증 구분을 위한 필드
-        };
-        const paramsToString = JSON.stringify(params);
-        window.ReactNativeWebView.postMessage(paramsToString);
-      } else {
-        /* 그 외 환경의 경우 */
-        /* 가맹점 식별하기 */
-        const { IMP } = window;
-        IMP.init(userCode);
-        /* 결제 창 호출하기 */
-        IMP.request_pay(data, callback);
-      }
-    }
-
-    /* 콜백 함수 정의하기 */
-    function callback(response) {
-      ...
-    }
-
-    function isReactNative() {
-      /*
-        리액트 네이티브 환경인지 여부를 판단해
-        리액트 네이티브의 경우 IMP.payment()를 호출하는 대신
-        리액트 네이티브로 post message를 보낸다
-
-        아래 예시는 모든 모바일 환경을 리액트 네이티브로 인식한 것으로
-        실제로는 user agent에 값을 추가해 정확히 판단해야 한다
-      */
-      if (ua.mobile) return true;
-      return false;
-    }
-
-    return (
-      ...
-      <button onClick={onClickPayment}>결제하기</button>
-      ...
-    );
-  }
-```
-
-### 2. 리액트 네이티브에서 `post message`를 받았을때 결제 화면 렌더링하기
-
-리액트에서 `post message`를 보내면, 리액트 네이티브 WebView의 `onMessage` 함수가 이를 트리거합니다. 메시지 내용 중 액션 유형(`type`)이 `payment`면 결제 화면을, `certification`이면 본인인증 화면을 렌더링 하기 위해 해당 라우트로 이동합니다. 이때 **post message로 전달 받은 `가맹점 식별코드`와 `결제 데이터`를 `query`로 전달**합니다.
-
-```javascript
-  // iamport-react-native/exampleForWebView/src/Home.js
-  import React from 'react';
-  import WebView from 'react-native-webview';
-
-  function Home({ navigation }) {
-    const domain = `http://${가맹점 IP}:3000`;
-    function onMessage(e) {
-      /* 리액트로부터 post message를 받았을때 트리거 된다 */
-      try {
-        /* post message에서 가맹점 식별코드, 결제 데이터 그리고 액션 유형을 추출한다 */
-        const { userCode, data, type } = JSON.parse(e.nativeEvent.data);
-        const params = { userCode, data };
-        /* 결제 화면으로 이동한다 */
-        navigation.push(type === 'payment' ? 'Payment' : 'Certification', params);
-      } catch (e) {}
-    }
-
-    return (
-      <WebView
-        source={{ uri: domain }} 
-        onMessage={onMessage}
-        style={{ flex: 1 }}
-        injectedJavascript={`(function() {
-          window.postMessage = function(data) {
-            window.ReactNativeWebView.postMessage(data);
-          };
-        })()`}
-      />
-    );
-  }
-
-  export default Home;
-```
-
-### 3. 리액트 네이티브에 결제 화면 추가하기
-
-`가맹점 식별코드`와 `결제 데이터`를 쿼리에서 추출해 `IMP.Payment`에 prop 형태로 전달합니다. 이때 결제 후 실행될 로직을 작성한 콜백 함수도 함께 전달합니다. 콜백함수에서 결제 결과에 따라 로직을 다르게 작성할 수 있습니다. 아래는 결제 성공시 웹뷰를 띄운 Home으로 돌아가고, 결제 실패시 바로 이전 화면으로 돌아가는 예시입니다.
-
-```javascript
-  // iamport-react-native/exampleForWebView/Payment.js
-  import React from 'react';
-  import IMP from 'iamport-react-native';
-
-  function Payment({ navigation }) {
-    /* 가맹점 식별코드, 결제 데이터 추출 */
-    const userCode = navigation.getParam('userCode');
-    const data = navigation.getParam('data');
-    
-    /* 결제 후 실행될 콜백 함수 입력 */
-    function callback(response) {
-      const isSuccessed = getIsSuccessed(response);
-      if (isSuccessed) {
-        /* 결제 성공한 경우, 리디렉션 위해 홈으로 이동한다 */
-        const params = {
-          ...response,
-          type: 'payment', // 결제와 본인인증 구분을 위한 필드
-        };
-        navigation.replace('Home', params);
-      } else {
-        /* 결제 실패한 경우, 이전 화면으로 돌아간다 */
-        navigation.goBack();
-      }
-    }
-
-    function getIsSuccessed(response) {
-      const { imp_success, success } = response;
-
-      if (typeof imp_success === 'string') return imp_success === 'true';
-      if (typeof imp_success === 'boolean') return imp_success === true;
-      if (typeof success === 'string') return success === 'true';
-      if (typeof success === 'boolean') return success === true;
-    }
-
-    return (
-      <IMP.Payment
-        userCode={userCode}
-        data={{
-          ...data,
-          app_scheme: 'exampleForWebView',
-        }}
-        callback={callback}
-      />
-    );
-  }
-
-  export default Payment;
-```
-
-### 5. 결제 후 리디렉션 설정하기
-
-위의 예시에 따라 결제 후, 웹뷰를 띄운 Home으로 돌아갔을때 리디렉션을 위한 추가 로직을 작성해야 합니다. 아래와 같은 경우를 가정합니다.
-
-| 유형    | 도메인                                |
-| ------ | ----------------------------------- |
-| 홈      | https://example.com                 |
-| 결제    | https://example.com/payment         |
-| 결제완료 | https://example.com/payment/result  |
-
-위와 같은 경우, 결제 후 홈으로 렌더링 시 웹뷰의 도메인은 다시 `https://example.com`이 됩니다. 이를 `https://example.com/payment/result`로 리디렉션 하기 위해 홈 컴포넌트에 아래와 같은 로직을 작성합니다.
-
-```javascript
-  // iamport-react-native/exampelForWebView/Home.js
-  import React, { useState, useEffect } from 'react';
-  import WebView from 'react-native-webview';
-  import queryString from 'query-string';
-
-  const domain = 'https://example.com'; // 가맹점 도메인
-  function Home({ navigation }) {
-    const [uri, setUri] = useState(domain);
-
-    useEffect(() => {
-      /* navigation이 바뀌었을때를 트리거 */
-      const response = navigation.getParam('response');
-      if (response) {
-        const query = queryString.stringify(response);
-        const { type } = query;
-        if (type === 'payment') {
-          /* 결제 후 렌더링 되었을 경우, https://example.com/payment/result로 리디렉션 시킨다 */
-          setUri(`${domain}/payment/result?${query}`);    
-        }
-        ...
-      }
-    }, [navigation]);
-
-    function onMessage(e) {
-      try {
-        const { userCode, data, type } = JSON.parse(e.nativeEvent.data);
-        const params = { userCode, data };
-        navigation.push(type === 'payment' ? 'Payment' : 'Certification', params);
-      } catch (e) {}
-    }
-
-    return (
-      <WebView
-        source={{ uri }} 
-        onMessage={onMessage}
-        style={{ flex: 1 }}
-        injectedJavascript={`(function() {
-          window.postMessage = function(data) {
-            window.ReactNativeWebView.postMessage(data);
-          };
-        })()`}
-      />
-    );
-  }
-
-  export default Home;
-```