iamport-ionic for KG이니시스
Cordova 또는 Ionic 환경에서 아임포트 결제모듈을 쉽게 연동하기 위한 Ionic Cordova 플러그인입니다.(KG이니시스용)
외부주소로의 redirection이 포함되어있어 InAppBrowser를 활용하며, 외부주소에서 다시 앱 복귀를 위해 Custom URL Scheme을 사용합니다.
(InAppBrowser는 URL처리가 가능하도록 fork된 버전을 사용하고 있습니다)
휴대폰 본인인증도 적용 가능합니다.
Required
Install
플러그인명세(plugin.xml)에 dependency가 정의되어있기 때문에 iamport-ionic-inicis을 설치하면 Custom URL Scheme 플러그인과 InAppBrowser 플러그인이 설치됩니다.
Custom URL Scheme 플러그인 설치를 위해 URL_SCHEME파라메터를 전달받습니다. 앱에서 사용하실 고유한 URL Scheme값을 지정하시면 됩니다.
1. NPM 설치
cordova plugin add iamport-ionic-inicis --variable URL_SCHEME=ioniciamport
2. Github 소스로 설치
cordova plugin add https://github.com/iamport/iamport-ionic-inicis --variable URL_SCHEME=ioniciamport
Usage (Cordova 방식)
플러그인 설치가 되면 javascript module이 자동 복사/등록됩니다.(cordova-iamport.js)
결제가 필요한 순간에 다음과 같이 javascript 호출을 통해 inappbrowser
를 통해 결제 프로세스를 시작할 수 있습니다.
IonicIamportInicis
1. 특징
cordova 특성상 inappbrowser
를 통해 결제프로세스가 진행되므로 모바일 브라우저 연동과는 다소 차이가 있습니다.
m_redirect_url
속성을 overwrite하여 inappbrowser
결제를 구현하고 있기 때문에 다음과 같은 차이점이 있습니다.
(참조 : cordova-iamport.js)
- m_redirect_url속성을 선언할 필요가 없음(선언해도 overwrite됨)
- callback에 전달되는 rsp속성이 제한됨(success, imp_uid, merchant_uid, error_msg 뿐)
2. 결제 Example
IonicIamportInicis;
3. 본인인증 Example
IonicIamportInicis;
Usage (Ionic 방식)
1. javascript 선언
플러그인 설치가 되면 ng-cordova-iamport.js가 platform 폴더에 자동으로 복사가 됩니다.
때문에, ionic 기본 페이지인 index.html에서 script를 선언만 해주시면 됩니다.
(단, app.js
, controllers.js
보다 앞에 추가해주셔야 ng-cordova-iamport.js
가 제공하는 angular module과 factory 사용이 가능합니다.
ngCordovaIamport
)
2. use module (angular
$cordovaIamport
) & call payment
function
3. inject factory(angular;
4. 본인인증 Example
angular;
특이사항
Android
cordova-plugin-whitelist에 의해 PG사 페이지 navigation 과정에서 앱을 벗어나 Chrome브라우저 새창이 열리는 경우가 발생할 수 있음 (ex. location.href = 'http://some.domain.com')
브라우저로 새창열림을 방지하기 위해 config.xml
에 <allow-navigation href="*" />
가 추가되도록 플러그인 명세 plugin.xml
를 작성하였습니다.
iOS
각 카드사별 앱카드 등 외부 scheme을 호출하는데 문제없도록 info.plist파일에 모든 scheme명세를 추가하였습니다.
알려진 문제점
실시간계좌이체 결제는 결제완료 후 inappbrowser가 자동으로 닫히지 않는 문제가 있으므로 해당 이슈가 해결되기 전까지는 IMP.request_pay(param, callback)
호출 시 param.pay_method : 'trans'는 사용하지 않기를 권장드립니다.
실시간 계좌이체의 경우 기본적인 KG이니시스 동작 순서가 다음과 같습니다.
- ionic앱에서 Bankpay호출
- Bankpay앱에서 계좌정보 인증 및 이체
- 이체 후 Safari브라우저 열림
- Safari브라우저 화면에서 확인버튼 클릭 시 ionic앱으로 이동
KG이니시스 구조상 중간에 Safari브라우저가 호출되는 문제 때문에 inappbrowser가 자동으로 닫혀지지 않는 한계가 있습니다.