iamport-cordova
포트원 코르도바 플러그인입니다. 아이오닉 환경에서 포트원 연동을 위한 가이드는 여기를 참고해주세요.
목차
버전정보
최신버전은 v0.10.2입니다. 버전 히스토리는 버전정보를 참고하세요.
지원정보
포트원 코르도바 플러그인은 안드로이드와 IOS에서 결제 및 휴대폰 본인인증 기능을 제공합니다. 결제시 지원하는 PG사와 결제수단에 대한 자세한 정보는 지원정보를 참고하세요.
설치하기
아래 명령어를 통해 포트원 코르도바 플러그인을 귀하의 코르도바 프로젝트에 추가할 수 있습니다.
$ cordova plugin add iamport-cordova
IOS 설정하기
IOS에서는 외부 앱 이동 후 복귀를 위해 커스텀 앱 URL Scheme값을 반드시 지정해야 합니다. 자세한 내용은 App Scheme 등록을 참고하세요.
설정된 결과는 아래와 같습니다.
// [프로젝트이름]/platforms/ios/[프로젝트이름]/프로젝트이름-info.plist 파일
...
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLName</key>
<string/>
<key>CFBundleURLSchemes</key>
<array>
<string>example</string>
</array>
</dict>
</array>
...
예제
포트원 코르도바 플러그인을 사용해 아래와 같이 일반/정기결제 및 휴대폰 본인인증 기능을 구현할 수 있습니다. 필요한 파라미터는 예제를 참고하세요.
일반/정기결제 예제
<html>
...
<body>
<button id="iamport-payment">결제하기</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/payment.js"></script>
</body>
</html>
document.getElementById('iamport-payment').addEventListener('click', function() {
var titleOptions = {
text: '포트원 코르도바 테스트',
textColor: '#ffffff',
textSize: '20',
textAlignment: 'left',
backgroundColor: '#344e81',
show: true,
leftButtonType: 'back',
leftButtonColor: '#ffffff',
rightButtonType: 'close',
rightButtonColor: '#ffffff',
};
var userCode = 'iamport';
var data = {
pg: 'html5_inicis',
pay_method: 'card',
name: '포트원 코르도바 테스트',
merchant_uid: 'mid_' + new Date().getTime(),
amount: '39000',
buyer_name: '홍길동',
buyer_tel: '01012341234',
buyer_email: 'example@example.com',
app_scheme: 'example',
};
var params = {
titleOptions: titleOptions,
userCode: userCode,
data: data,
callback: callback,
}
cordova.plugins.IamportCordova.payment(params);
});
휴대폰 본인인증 예제
<html>
...
<body>
<button id="iamport-certification">본인인증 하기</button>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/certification.js"></script>
</body>
</html>
document.getElementById('iamport-certification').addEventListener('click', function() {
var titleOptions = {
text: '포트원 코르도바 테스트',
textColor: '#ffffff',
textSize: '20',
textAlignment: 'left',
backgroundColor: '#344e81',
show: true,
leftButtonType: 'back',
leftButtonColor: '#ffffff',
rightButtonType: 'close',
rightButtonColor: '#ffffff',
};
var userCode = 'imp10391932';
var data = {
carrier: 'KTF',
merchant_uid: 'mid_' + new Date().getTime(),
company: 'SIOT',
name: '홍길동',
phone: '01012341234',
is_iframe: false,
};
var params = {
titleOptions: titleOptions,
userCode: userCode,
data: data,
callback: callback,
};
cordova.plugins.IamportCordova.certification(params);
});
콜백 함수 설정하기
콜백 함수는 필수입력 필드로, 결제/본인인증 완료 후 라우트 이동을 위해 아래와 같이 로직을 작성할 수 있습니다. 콜백 함수에 대한 자세한 설명은 콜백 설정하기를 참고하세요.
function callback(response) {
window.location.href = 'result.html?' + JSON.stringify(response);
}