Skip to content

여러 PG를 통합해서 처리하는 최신 cordova 플러그인

License

Notifications You must be signed in to change notification settings

iamport/iamport-cordova

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

95 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
      <!-- 예) 커스텀 앱 URL Scheme을 example로 설정 -->
      <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>
// js/payment.js
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',                           // PG사
    pay_method: 'card',                           // 결제수단
    name: '포트원 코르도바 테스트',                   // 주문명
    merchant_uid: 'mid_' + new Date().getTime(),  // 주문번호
    amount: '39000',                              // 결제금액
    buyer_name: '홍길동',                           // 구매자 이름
    buyer_tel: '01012341234',                     // 구매자 연락처
    buyer_email: '[email protected]',           // 구매자 이메일
    app_scheme: 'example',                        // 앱 URL 스킴
  };

  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) {
  /**
   * 결과 페이지로 이동
   * 결과는 JSON을 string화 해서 쿼리 형태로 넘김
  */
  window.location.href = 'result.html?' + JSON.stringify(response);
}