뷰 네이티브용 아임포트 결제/본인인증 연동 예제
npm install iamport-vue-native아임포트 뷰 네이티브 예제 프로젝트입니다. 뷰 네이티브는 뷰 자바스크립트와 리액트 네이티브를 연결하기 때문에, 뷰 네이티브 프로젝트에서 리액트 네이티브 라이브러리를 사용하실 수 있습니다. 따라서 아임포트 뷰 네이티브 모듈은 따로 없으며 예제 프로젝트만 제공합니다. 아래 내용은 뷰 네이티브 프로젝트에서 아임포트 리액트 네이티브 모듈을 사용하기 위한 안내입니다.
```
$ npm install iamport-react-native --save
아래 다음 명령어를 통해 아임포트 모듈을 귀하의 안드로이드/IOS 프로젝트에 추가할 수 있습니다.
``
$ npm install -g react-native-cli
$ react-native link iamport-react-native
$ react-native link react-native-webview // iamport-react-native v1.1.0 이상 필수
#### 1. App Scheme 등록
외부 결제 앱(예) 페이코, 신한 판 페이 등)에서 결제 후 돌아올 때 사용할 URL identifier를 설정해야합니다.

#### 2. 외부 앱 리스트 등록
3rd party앱(예) 간편결제 앱)을 실행할 수 있도록 외부 앱 리스트를 등록해야합니다.
`html`
#### 3. App Transport Security 설정

`html`
#### 1. 일반/정기결제 사용예제
`html
:data="paymentData"
:loading="loading"
:callback="callback"
/>
`
#### 2. 휴대폰 본인인증 사용예제
`html
:data="params"
:loading="loading"
:callback="callback"
/>
`
`javascript`
methods: {
callback(response) {
this.navigation.replace('CertificationResult', { response });
},
},
과 certification.html)이 제대로 추가되지 않았기 때문입니다. 뷰 네이티브는 리액트 네이티브와 마찬가지로 아래와 같이 bundle 명령어를 통해 bundle 파일을 만들고 필요한 asset을 추가(copy)합니다.$3
ios 폴더 하위에 main.jsbundle 파일과 assets 폴더를 생성합니다.`bash
$ react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios
`$3
android/app/src/main 폴더 하위에 assets 폴더를 생성하고, 그 하위에 index.android.bundle 파일을 생성합니다.`bash
$ mkdir android/app/src/main/assets
$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
`추가(copy)된 asset은 아래와 같습니다.
$3
`bash
├── ios
│ ├── assets
│ │ └── node_modules
│ │ ├── iamport-react-native
│ │ │ └── src
│ │ │ ├── html
│ │ │ │ ├── payment.html // 아임포트 결제 asset
│ │ │ │ └── certification.html // 아임포트 휴대폰 본인인증 asset
│ │ │ └── img
│ │ │ └── iamport-logo.png
│ │ └── ...
│ ├── main.jsbundle // bundle 파일
│ └── ...
└── ...
`$3
`bash
├── android
│ ├── app
│ │ ├── src
│ │ │ └── main
│ │ │ ├── assets
│ │ │ │ ├── index.android.bundle // bundle 파일
│ │ │ │ └── ...
│ │ │ ├── res
│ │ │ │ ├── raw
│ │ │ │ │ ├── node_modules_iamportreactnative_src_html_certification.html // 아임포트 휴대폰 본인인증 asset
│ │ │ │ │ └── ...
│ │ │ │ └── ...
│ │ │ └── ...
│ │ └── ...
│ └── ...
└── ...
``릴리즈 모드에서 결제 창이 뜨지 않고 white screen으로 머물러있다면 위와 같이 아임포트 asset이 잘 포함되어있는지 확인해보시길 바랍니다.