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

package/manuals/CALLBACK.md

@@ -1,72 +0,0 @@
-# 콜백 함수 설정하기
-아임포트 리액트 네이티브 모듈 콜백 함수 설정을 위한 안내입니다.
-
-콜백 함수는 필수입력 필드로, 결제/본인인증 완료 후 라우트를 이동하도록 로직을 작성해야합니다.
-[react-navigation](https://github.com/react-navigation/react-navigation)을 통해 라우터를 변경하는 경우, 아래와 같이 [push 함수](https://reactnavigation.org/docs/stack-actions/#push)가 아닌 [replace 함수](https://reactnavigation.org/docs/stack-actions/#replace)를 사용해야 합니다.
-push 함수를 사용할 경우, 결제 완료 후 라우터가 변경되더라도 유저가 뒤로가기를 했을 경우 아임포트 모듈이 다시 렌더링됩니다.
-하지만 replace 함수를 사용하면, 결제 완료 후 라우터가 변경되고 유저가 뒤로가기를 하면 원래 결제하기 직전 화면으로 넘어가게 됩니다.
-
-### 잘못된 사용 예제
-```javascript
-function callback(response) {
-  navigation.push('Result', response); // [에러] push 함수 사용
-}
-```
-
-### 올바른 사용 예제
-```javascript
-function callback(response) {
-  navigation.replace('Result', response);
-}
-```
-
-### 결과에 따라 로직 작성하기
-콜백 함수의 첫번째 인자(response)는 결제/본인인증 결과를 담고 있는 오브젝트로 아래와 같이 구성되어 있습니다.
-자세한 내용은 아임포트 공식 문서 [IMP.request_pay - param, rsp 객체 - Callback 함수의 rsp 객제](https://docs.iamport.kr/tech/imp#callback)를 참고해주세요.
-
-| key           |  Description       |
-| ------------- | ------------------ |
-| success       | 성공 여부            |
-| imp_uid       | 아임포트 번호         |
-| merchant_uid  | 주문번호             |
-| error_msg     | 실패한 경우, 에러메시지  |
-
-response에 따라 결제/본인인증 성공/실패 여부를 판단해 아래와 같이 각기 다른 로직을 구성할 수 있습니다.
-아래 코드는 예시일 뿐 실제 결제 성공/실패여부는 결제 유효성 검사 후 아임포트 REST API로 결제내역을 조회해 판단해야 합니다.
-자세한 내용은 아임포트 공식 문서 [일반결제 연동하기 - STEP5. 서버에서 거래 검증 및 데이터 동기화](https://docs.iamport.kr/implementation/payment#server-side-logic)를 참고해주세요.
-
-```javascript
-import React from 'react';
-import { View, Text } from 'react-native';
-
-function Result({ navigation }) {
-  const success = navigation.getParam('success');
-  const imp_uid = navigation.getParam('imp_uid');
-  const merchant_uid = navigation.getParam('merchant_uid');
-
-  return (
-    <View>
-      <Text>{`결제/본인인증에 ${success ? '성공' : '실패'}하였습니다.`}</Text>
-      <View>
-        <View>
-          <Text>아임포트 번호</Text>
-          <Text>{imp_uid || '없음'}</Text>
-        </View>
-        <View>
-          <Text>주문 번호</Text>
-          <Text>{merchant_uid || '없음'}</Text>
-        </View>
-        {
-          !success &&
-          <View>
-            <Text>에러 메시지</Text>
-            <Text>{error_msg || '없음'}</Text>
-          </View>
-        }
-      </View>
-    </View>
-  );
-}
-
-export default Result;
-```

package/manuals/EXAMPLE.md

@@ -1,168 +0,0 @@
-# 예제 프로젝트
-아임포트 리액트 네이티브 모듈 예제 안내입니다.
-
-`iamport-react-native`에서는 4가지의 예제를 통해 서로 다른 개발 스택에서 결제 모듈을 사용하는 방법을 안내드리고 있습니다.
-예제별 상세 설명은 각 예제 폴더의 README 파일을 확인해주시기 바랍니다.
-
-예제 실행을 위해서는 `iamport-react-native` 모듈을 clone받은 후 루트 디렉토리에서 다음의 명령어를 실행합니다.
-```shell
-$ yarn
-```
-그 후 각 예제 프로젝트의 폴더로 이동해 예제별 설명을 따라 앱을 빌드 및 실행할 수 있습니다.
-
-## 1. [example](../example/README.md)
-일반적인 형태의 리액트 네이티브 애플리케이션입니다.
-타입스크립트로 작성되었습니다.
-
-## 2. [exampleForWebView](../exampleForWebView/README.md)
-기존에 만들어진 웹 페이지를 웹뷰에 띄워 결제를 진행하는 예제입니다.
-[iamport-react-example](https://github.com/iamport/iamport-react-example)과 함께 동작할 수 있도록 제작되었습니다.
-타입스크립트로 작성되었습니다.
-
-## 3. [exampleForExpo](../exampleForExpo/README.md)
-Expo bare 프로젝트 입니다.
-Expo에서 eject를 실행해 android 및 ios 폴더를 생성 후 직접 앱을 빌드하는 경우를 가정합니다.
-자바스크립트로 작성되었습니다.
-
-## 4. [exampleForManagedExpo](../exampleForManagedExpo/README.md)
-Expo managed 프로젝트입니다.
-Expo에서 eject하지 않고 앱을 개발하는 경우를 가정합니다.
-자바스크립트로 작성되었습니다.
-
-## 일반/정기결제 코드 예시
-```javascript
-import React from 'react';
-/* 아임포트 결제모듈을 불러옵니다. */
-import IMP from 'iamport-react-native';
-
-/* 로딩 컴포넌트를 불러옵니다. */
-import Loading from './Loading';
-
-export function Payment({ navigation }) {
-  /* [필수입력] 결제 종료 후, 라우터를 변경하고 결과를 전달합니다. */
-  function callback(response) {
-    navigation.replace('PaymentResult', response);
-  }
-
-  /* [필수입력] 결제에 필요한 데이터를 입력합니다. */
-  const data = {
-    pg: 'html5_inicis',
-    pay_method: 'card',
-    name: '아임포트 결제데이터 분석',
-    merchant_uid: `mid_${new Date().getTime()}`,
-    amount: '39000',
-    buyer_name: '홍길동',
-    buyer_tel: '01012345678',
-    buyer_email: 'example@naver.com',
-    buyer_addr: '서울시 강남구 신사동 661-16',
-    buyer_postcode: '06018',
-    app_scheme: 'example',
-    // [Deprecated v1.0.3]: m_redirect_url
-  };
-
-  return (
-    <IMP.Payment
-      userCode={'iamport'}  // 가맹점 식별코드
-      tierCode={'AAA'}      // 티어 코드: agency 기능 사용자에 한함
-      loading={<Loading />} // 로딩 컴포넌트
-      data={data}           // 결제 데이터
-      callback={callback}   // 결제 종료 후 콜백
-    />
-  );
-}
-
-export default Payment;
-```
-
-| Prop             | Type          | Description                                                     | Required   |
-|------------------| ------------- |-----------------------------------------------------------------| ---------- |
-| userCode         | string        | 가맹점 식별코드                                                        | true       |
-| tierCode         | string        | agency 기능 사용자의 하위 가맹점 코드 3자리                                    | false       |
-| data             | object        | 결제에 필요한 정보 [자세히 보기](https://docs.iamport.kr/sdk/javascript-sdk#request_pay)           | true       |
-| - m_redirect_url | string        | 결제 후 이동할 url                                                    | false       |
-| callback         | function      | 결제 후 실행 될 함수 [자세히보기](https://docs.iamport.kr/sdk/javascript-sdk) | true       |
-| loading          | RN 컴포넌트     | 웹뷰 로드시 보여질 컴포넌트                                                 | false      |
-
-
-## 휴대폰 본인인증 코드 예시
-```javascript
-import React from 'react';
-/* 아임포트 본인인증 모듈을 불러옵니다. */
-import IMP from 'iamport-react-native';
-
-/* 로딩 컴포넌트를 불러옵니다. */
-import Loading from './Loading';
-
-export function Certification({ navigation }) {
-  /* [필수입력] 본인인증 종료 후, 라우터를 변경하고 결과를 전달합니다. */
-  function callback(response) {
-    navigation.replace('CertificationResult', response);
-  }
-
-  /* [필수입력] 본인인증에 필요한 데이터를 입력합니다. */
-  const data = {
-    merchant_uid: `mid_${new Date().getTime()}`,
-    company: '아임포트',
-    carrier: 'SKT',
-    name: '홍길동',
-    phone: '01012341234',
-    min_age: '',
-  };
-
-  return (
-    <IMP.Certification
-      userCode={'iamport'}  // 가맹점 식별코드
-      tierCode={'AAA'}      // 티어 코드: agency 기능 사용자에 한함
-      loading={<Loading />} // 로딩 컴포넌트
-      data={data}           // 본인인증 데이터
-      callback={callback}   // 본인인증 종료 후 콜백
-    />
-  );
-}
-
-export default Certification;
-```
-
-| Prop          | Type          |  Description                       | Required   |
-| ------------- | ------------- | ---------------------------------- | ---------- |
-| userCode      | string        | 가맹점 식별코드                        | true       |
-| tierCode      | string        | agency 기능 사용자의 하위 가맹점 코드 3자리 | false       |
-| data          | object        | 본인인증에 필요한 정보 [자세히 보기](https://https://docs.iamport.kr/tech/mobile-authentication#call-authentication)      | true       |
-| - merchant_uid| string        | 가맹점 주문번호                        | false      |
-| - company     | string        | 회사명 또는 URL                       | false      |
-| - carrier     | string        | 통신사                               | false      |
-| - name        | string        | 본인인증 할 이름                        | false      |
-| - phone       | number        | 본인인증 할 전화번호                     | false      |
-| - min_age     | number        | 본인인증 허용 최소 연령                  | false      |
-| callback      | function      | 본인인증 후 실행 될 함수                 | true       |
-| loading       | RN 컴포넌트     | 웹뷰 로드시 보여질 컴포넌트               | false      |
-
-## 웹뷰 로딩 컴포넌트 코드 예시
-웹뷰가 로드되기 전 보여질 로딩 화면을 컴포넌트로 생성해 loading 파라메터로 넘깁니다.
-미 입력시 아임포트가 보여주는 default 로딩 페이지가 렌더링됩니다. 아래는 로딩 컴포넌트 코드 작성 예시입니다.
-
-```javascript
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-export function Loading() {
-  const { container } = styles;
-  return (
-    <View style={container}>
-      <Text>잠시만 기다려주세요...</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
-export default Loading;
-```
-
-로딩 컴포넌트 및 웹뷰 컴포넌트(IMP.Certification, IMP Payment)를 감싸고 있는 최상단 View 컴포넌트의 스타일 속성을 지정할때 주의해야합니다.
-별도의 설정 없이 작성할 경우, 컴포넌트들이 전체화면으로 보이지 않을 수 있습니다.
-따라서 스타일 속성을 지정할 때, 각 컴포넌트의 `flex`값을 1로 설정해주셔야 합니다.

package/manuals/EXPO.md

@@ -1,246 +0,0 @@
-# Expo에서 아임포트 연동하기
-
-`iamport-react-native`는 Expo 환경에서 사용하실 수 있습니다.
-또한 eject를 하지 않아도 사용 가능합니다.
-
-이 문서에서는 eject를 하지 않은 managed 프로젝트와 eject를 한 bare 프로젝트 양 쪽에서 Expo를 설정하는 방법을 설명하고 있습니다.
-
-## Expo CLI 설치하기
-```
-$ npm install -g expo-cli
-```
-
-## 1. managed 프로젝트
-
-managed 프로젝트는 Expo의 가장 기초적인 프로젝트 생성 방식으로 플랫폼별 네이티브 코드 없이 오직 자바스크립트 및 타입스크립트만으로 앱을 개발하는 방식입니다.
-Expo 자체 서버에서 빌드 및 배포를 모두 처리할 수 있습니다.
-`ios`및 `android` 폴더가 없기 때문에 필요한 설정들은 `app.json`에 적어주셔야 합니다.
-
-### 1-1. Expo 서버 빌드를 위한 설정
-
-managed로 개발하는 경우 빌드를 Expo 서버에서 원격으로 진행하게 되며 그에 따른 [필수 값들](https://docs.expo.dev/distribution/building-standalone-apps/#2-configure-appjson)을 채워야 합니다.
-
-- `name`, `icon`, `version`, 그리고 `slug`는 앱 공통 설정으로 필수입니다.
-- `ios`의 `bundleIdentifier` 및 `buildNumber`는 iOS 앱 배포 및 빌드를 위해 필수입니다.
--  `android`의 `package` 및 `versionCode`는 안드로이드 앱 배포 및 빌드를 위해 필수입니다.
-
-```json
-// app.json
-{
-  "expo": {
-    "name": "Your App Name",
-    "icon": "./path/to/your/app-icon.png",
-    "version": "1.0.0",
-    "slug": "your-app-slug",
-    "ios": {
-      "bundleIdentifier": "com.yourcompany.yourappname",
-      "buildNumber": "1.0.0"
-    },
-    "android": {
-      "package": "com.yourcompany.yourappname",
-      "versionCode": 1
-    }
-  }
-}
-```
-
-### 1-2. 외부 앱 실행을 위한 설정
-
-Expo bare 프로젝트나 일반 리액트 네이티브 프로젝트의 경우 AndroidManifest.xml 및 Info.plist에 앱 scheme [관련 설정](./SETTING.md)을 작성하지만, managed 프로젝트의 경우 네이티브 코드가 없어 app.json에 대신 설정을 적어주셔야 합니다.
-
-먼저 안드로이드를 위한 외부 앱 설정에 필요한 expo-build-properties를 설치합니다.
-
-```sh
-npx expo install expo-build-properties
-```
-
-- `ios.infoPlist.LSApplicationQueriesSchemes`에는 외부 앱 리스트를 작성합니다.
-- `ios.infoPlist.NSAppTransportSecurity`의 두 항목을 `YES`로 설정합니다.
-- `android.intentFilters`에 개발하시는 앱의 scheme을 설정합니다.
-- `plugins`에 expo-build-properties를 이용해 안드로이드 외부 앱 리스트를 추가로 작성합니다.
-
-```json
-// app.json
-{
-  "expo": {
-    ...,
-    "ios": {
-      ...
-      "infoPlist": {
-        "LSApplicationQueriesSchemes": [
-          "kftc-bankpay",
-          "ispmobile",
-          "itms-apps",
-          "hdcardappcardansimclick",
-          "smhyundaiansimclick",
-          "shinhan-sr-ansimclick",
-          "smshinhanansimclick",
-          "kb-acp",
-          "mpocket.online.ansimclick",
-          "ansimclickscard",
-          "ansimclickipcollect",
-          "vguardstart",
-          "samsungpay",
-          "scardcertiapp",
-          "lottesmartpay",
-          "lotteappcard",
-          "cloudpay",
-          "nhappcardansimclick",
-          "nonghyupcardansimclick",
-          "citispay",
-          "citicardappkr",
-          "citimobileapp",
-          "kakaotalk",
-          "payco",
-          "chaipayment",
-          "kb-auth",
-          "hyundaicardappcardid",
-          "com.wooricard.wcard",
-          "lmslpay",
-          "lguthepay-xpay",
-          "liivbank",
-          "supertoss",
-          "kakaobank"
-        ],
-        "NSAppTransportSecurity": {
-          "NSAllowsArbitraryLoads": true,
-          "NSAllowsArbitraryLoadsInWebContent": true
-        }
-      }
-    },
-    ...
-    "android": {
-      ...
-      "intentFilters": [
-        {
-          "action": "VIEW",
-          "category": [
-            "DEFAULT",
-            "BROWSABLE"
-          ],
-          "data": {
-            "scheme": "exampleformanagedexpo"
-          }
-        }
-      ]
-    },
-    ...
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-          "android": {
-            "manifestQueries": [
-              {
-                "intent": {
-                  "action": "android.intent.action.VIEW",
-                  "category": "android.intent.category.BROWSABLE",
-                  "data": {
-                    "scheme": "https"
-                  }
-                },
-                "package": [
-                  "kvp.jjy.MispAndroid320",
-                  "com.kftc.bankpay.android",
-                  "com.kbstar.liivbank",
-                  "com.nh.cashcardapp",
-                  "kr.co.kfcc.mobilebank",
-                  "com.knb.psb",
-                  "com.kakao.talk",
-                  "com.mysmilepay.app",
-                  "finance.chai.app",
-                  "com.nhnent.payapp",
-                  "com.hyundaicard.appcard",
-                  "viva.republica.toss",
-                  "com.shcard.smartpay",
-                  "com.shinhan.smartcaremgr",
-                  "com.hanaskard.paycla",
-                  "kr.co.samsungcard.mpocket",
-                  "com.kbcard.cxh.appcard",
-                  "nh.smart.nhallonepay",
-                  "kr.co.citibank.citimobile",
-                  "com.lcacApp",
-                  "com.lotte.lpay",
-                  "com.ssg.serviceapp.android.egiftcertificate",
-                  "com.inicis.kpay",
-                  "com.kbankwith.smartbank",
-                  "com.lguplus.paynow",
-                  "com.wooricard.smartapp",
-                  "com.lottemembers.android",
-                  "com.kt.ktauth",
-                  "com.lguplus.smartotp",
-                  "com.sktelecom.tauth",
-                  "com.wooribank.smart.npib",
-                  "com.kakaobank.channel"
-                ]
-              }
-            ]
-          }
-        }
-      ]
-    ]
-  }
-}
-```
-
-### 1-3. 예제
-
-- [예제 코드 작성하기](./EXAMPLE.md)
-- [예제 프로젝트 실행하기](../exampleForManagedExpo/README.md)
-
-## 2. bare 프로젝트
-
-bare 프로젝트는 기존 managed 프로젝트에서 eject를 실행해 네이티브 코드를 사용하고자 하는 개발 방식입니다.
-Expo 자체 서버에서 bare 프로젝트의 빌드를 지원하고 있지 않기 때문에 앱 배포를 위해서는 로컬에서 직접 빌드하게 됩니다.
-
-### 2-1. 설정 파일(app.json) 확인하기
-
-원활한 ejecting을 위해 아래와 같이 설정되어 있는지 확인합니다.
-
-```
-// app.json
-{
-  "expo": {
-    "name": "Your App Name",
-    "icon": "./path/to/your/app-icon.png",
-    "version": "1.0.0",
-    "slug": "your-app-slug",
-    "sdkVersion": "XX.0.0",
-    "ios": {
-      "bundleIdentifier": "com.yourcompany.yourappname"
-    },
-    "android": {
-      "package": "com.yourcompany.yourappname"
-    }
-  }
-}
-```
-
-- IOS의 `bundleIdentifier`값과 Android의 `package`값에 알맞은 값을 넣어야 합니다.
-- `name`, `icon` 그리고 `version` 필드는 필수입력입니다.
-- 보다 자세한 내용은 엑스포 공식문서 [Configuration with app.json](https://docs.expo.dev/workflow/configuration)을 참고해주세요.
-
-### 2-2. EJECT 하기
-
-프로젝트 폴더에서 expo 명령어를 통해 eject 합니다. `android`와 `ios` 폴더가 생성되며 필요한 dependency들이 설치됩니다.
-
-```shell
-$ expo eject
-```
-
-### 2-3. [아임포트 설치 및 링킹하기](./INSTALL.md)
-```shell
-$ yarn add iamport-react-native
-$ yarn add react-native-webview
-```
-
-### 2-4. 설정하기
-  - [IOS 설정하기](./SETTING.md)
-  - [실시간 계좌이체 설정하기](./TRANS.md)
-
-###2-5. 예제
-
-- [예제 코드 작성하기](./EXAMPLE.md)
-- [예제 프로젝트 실행하기](../exampleForExpo/README.md)
-
-### 2-6 [콜백 함수 설정하기](./CALLBACK.md)

package/manuals/INSTALL.md

@@ -1,31 +0,0 @@
-# 설치하기
-아임포트 리액트 네이티브 모듈 설치 안내입니다.
-아래 명령어를 통해 아임포트 모듈을 귀하의 리액트 네이티브 프로젝트에 추가할 수 있습니다.
-`react-native-webview` 모듈은 아임포트 모듈을 사용하기 위해 꼭 필요하기 때문에 반드시 함께 설치해야 합니다.
-
-```shell
-$ npm install iamport-react-native --save
-$ npm install react-native-webview --save
-```
-또는
-```shell
-$ yarn add iamport-react-native
-$ yarn add react-native-webview
-```
-
-`iamport-react-native`는 `v10.8.3` 이상의 `react-native-webview`를 필요로 합니다.
-위 명령어대로 `iamport-react-native` 플러그인을 설치했을 때 다음과 같은 Warning Message가 나온다면 기존에 설치된 `react-native-webview` 플러그인을 업데이트해주세요.
-
-![](../manuals/assets/webview-peer-dependency.png)
-
-`react-native` `v0.60.0` 부터는 auto linking 및 jetifier 자동 적용이 지원됩니다.
-다만 자동으로 링크가 되어도 iOS의 경우 `pod install`은 직접 실행해주셔야 합니다.
-
-구 버전의 `react-native`를 사용하신다면 업데이트해주셔야 별도의 링크 작업 없이 아임포트 모듈을 사용하실 수 있습니다.
-
-설치를 성공적으로 마쳤을 경우, 아래와 같은 화면을 보실 수 있습니다.
-
-![](assets/after-linking-iamport.png)
-![](assets/after-linking-webview.png)
-
-[comment]: <> (실패한 경우, 아래 과정을 통해 `iamport-react-native` 모듈을 귀하의 프로젝트에 [수동으로 연결]&#40;https://facebook.github.io/react-native/docs/linking-libraries-ios&#41;시킬 수 있습니다.)

package/manuals/SETTING.md

@@ -1,140 +0,0 @@
-아임포트 리액트 네이티브 모듈 설정 안내입니다.
-
-# 안드로이드 설정하기
-안드로이드에서 아임포트 결제연동 모듈을 사용하기 위해서는 아래 항목을 설정해주셔야 합니다.
-카드사 혹은 간편결제 앱 등을 실행할 수 있도록 외부 앱 리스트를 등록해야 합니다.
-
-`[프로젝트 폴더]/android/app/src/main/AndroidManifest.xml` 파일을 연 후 아래 내용을 추가합니다.
-
-```xml
-  <queries>
-    <package android:name="kvp.jjy.MispAndroid320" />
-    <package android:name="com.kftc.bankpay.android" />
-    <package android:name="com.kbstar.liivbank" />
-    <package android:name="com.nh.cashcardapp" />
-    <package android:name="kr.co.kfcc.mobilebank" />
-    <package android:name="com.knb.psb" />
-    <package android:name="com.kakao.talk" />
-    <package android:name="com.mysmilepay.app" />
-    <package android:name="finance.chai.app" />
-    <package android:name="com.nhnent.payapp" />
-    <package android:name="com.hyundaicard.appcard" />
-    <package android:name="viva.republica.toss" />
-    <package android:name="com.shcard.smartpay" />
-    <package android:name="com.shinhan.smartcaremgr" />
-    <package android:name="com.hanaskard.paycla" />
-    <package android:name="kr.co.samsungcard.mpocket" />
-    <package android:name="com.kbcard.cxh.appcard" />
-    <package android:name="nh.smart.nhallonepay" />
-    <package android:name="kr.co.citibank.citimobile" />
-    <package android:name="com.lcacApp" />
-    <package android:name="com.lotte.lpay" />
-    <package android:name="com.ssg.serviceapp.android.egiftcertificate" />
-    <package android:name="com.inicis.kpay" />
-    <package android:name="com.kbankwith.smartbank" />
-    <package android:name="com.lguplus.paynow" />
-    <package android:name="com.wooricard.smartapp" />
-    <package android:name="com.lottemembers.android" />
-    <package android:name="com.kt.ktauth" />
-    <package android:name="com.lguplus.smartotp" />
-    <package android:name="com.sktelecom.tauth" />
-    <package android:name="com.wooribank.smart.npib" />
-    <package android:name="com.kakaobank.channel" />
-    <package android:name="com.shinhan.sbanking" />
-    <intent>
-      <action android:name="android.intent.action.VIEW" />
-      <category android:name="android.intent.category.BROWSABLE" />
-      <data android:scheme="https" />
-    </intent>
-  </queries>
-```
-
-# iOS 설정하기
-iOS에서 아임포트 결제연동 모듈을 사용하기 위해서는 아래 3가지 항목을 설정해주셔야 합니다.
-
-## 1. App Scheme 등록
-외부 결제 앱(e.g. 페이코, 신한 페이판)에서 결제 후 돌아올 때 사용할 URL identifier를 설정해야 합니다.
-![](assets/app-scheme-registry.gif)
-```xml
-<key>CFBundleURLTypes</key>
-<array>
-  <dict>
-    <key>CFBundleURLSchemes</key>
-    <array>
-      <string>myawesomeapp</string>
-    </array>
-  </dict>
-</array>
-```
-
-1. `[프로젝트 폴더]/ios/[프로젝트 이름]/Info.plist` 파일을 연 후 `URL Types`속성을 추가합니다.
-2. `URL Schemes`에 원하는 scheme 값을 입력합니다.
-
-## 2. 외부 앱 리스트 등록
-3rd party앱(예) 간편결제 앱)을 실행할 수 있도록 외부 앱 리스트를 등록해야합니다.
-
-1. `[프로젝트 폴더]/ios/[프로젝트 이름]/Info.plist` 파일을 오픈합니다.
-2. [LSApplicationQueriesSchemes](https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW14) 속성을 추가하고 아래에 외부 앱 리스트를 등록합니다.
-
-```xml
-<key>LSApplicationQueriesSchemes</key>
-<array>
-  <string>kftc-bankpay</string> <!-- 계좌이체 -->
-  <string>ispmobile</string> <!-- ISP모바일 -->
-  <string>itms-apps</string> <!-- 앱스토어 -->
-  <string>hdcardappcardansimclick</string> <!-- 현대카드-앱카드 -->
-  <string>smhyundaiansimclick</string> <!-- 현대카드-공인인증서 -->
-  <string>shinhan-sr-ansimclick</string> <!-- 신한카드-앱카드 -->
-  <string>smshinhanansimclick</string> <!-- 신한카드-공인인증서 -->
-  <string>kb-acp</string> <!-- 국민카드-앱카드 -->
-  <string>mpocket.online.ansimclick</string> <!-- 삼성카드-앱카드 -->
-  <string>ansimclickscard</string> <!-- 삼성카드-온라인결제 -->
-  <string>ansimclickipcollect</string> <!-- 삼성카드-온라인결제 -->
-  <string>vguardstart</string> <!-- 삼성카드-백신 -->
-  <string>samsungpay</string> <!-- 삼성카드-삼성페이 -->
-  <string>scardcertiapp</string> <!-- 삼성카드-공인인증서 -->
-  <string>lottesmartpay</string> <!-- 롯데카드-모바일결제 -->
-  <string>lotteappcard</string> <!-- 롯데카드-앱카드 -->
-  <string>cloudpay</string> <!-- 하나카드-앱카드 -->
-  <string>nhappcardansimclick</string> <!-- 농협카드-앱카드 -->
-  <string>nonghyupcardansimclick</string> <!-- 농협카드-공인인증서 -->
-  <string>citispay</string> <!-- 씨티카드-앱카드 -->
-  <string>citicardappkr</string> <!-- 씨티카드-공인인증서 -->
-  <string>citimobileapp</string> <!-- 씨티카드-간편결제 -->
-  <string>kakaotalk</string> <!-- 카카오톡 -->
-  <string>payco</string> <!-- 페이코 -->
-  <string>lpayapp</string> <!-- (구)롯데 L페이 -->
-  <string>hanamopmoasign</string> <!-- 하나카드 공인인증앱 -->
-  <string>wooripay</string> <!-- (구) 우리페이 -->
-  <string>nhallonepayansimclick</string> <!-- NH 올원페이 -->
-  <string>hanawalletmembers</string> <!-- 하나카드(하나멤버스 월렛) -->
-  <string>chaipayment</string> <!-- 차이 -->
-  <string>kb-auth</string> <!-- 국민 -->
-  <string>hyundaicardappcardid</string>  <!-- 현대카드 -->
-  <string>com.wooricard.wcard</string>  <!-- 우리won페이 -->
-  <string>lmslpay</string>  <!-- 롯데 L페이 -->
-  <string>lguthepay-xpay</string>  <!-- 페이나우 -->
-  <string>liivbank</string>  <!-- Liiv 국민 -->
-  <string>supertoss</string> <!-- 토스 -->
-  <string>newsmartpib</string> <!-- 우리WON뱅킹 -->
-  <string>ukbanksmartbanknonloginpay</string> <!-- 케이뱅크 페이 -->
-  <string>kakaobank</string> <!-- 카카오뱅크 -->
-</array>
-```
-
-## 3. App Transport Security 설정
-![](assets/allow-arbitrary.gif)
-
-1. `[프로젝트 폴더]/ios/[프로젝트 이름]/Info.plist` 파일을 오픈합니다.
-2. `App Transport Security` 속성을 추가합니다.
-3. 하부 속성에 `Allow Arbitrary Loads in Web Content`,`Allow Arbitrary Loads` 속성을 추가하고 각각의 값(value)을 `YES`로 변경합니다.
-
-```xml
-<key>NSAppTransportSecurity</key>
-<dict>
-  <key>NSAllowsArbitraryLoadsInWebContent</key>
-  <true/>
-  <key>NSAllowsArbitraryLoads</key>
-  <true/>
-</dict>
-```