Skip to content

Latest commit

 

History

History
179 lines (157 loc) · 6.73 KB

IONIC.md

File metadata and controls

179 lines (157 loc) · 6.73 KB

아이오닉 환경에서 포트원 연동하기

아이오닉 환경에서 포트원 코르도바 플러그인을 사용해 일반/정기결제 및 본인인증을 연동하는 방법을 안내합니다.

설치하기

아래 명령어를 통해 포트원 코르도바 플러그인을 귀하의 아이오닉 프로젝트에 추가할 수 있습니다.

1. ionic-native 설치

$ npm install @ionic-native/core --save // @ionic-native/core v5.22.0 이상

2. ionic-native/iamport-cordova 설치

$ npm install @ionic-native/iamport-cordova --save

3. 포트원 코르도바 플러그인 설치

$ 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>
...

예제

포트원 코르도바 플러그인을 사용해 아래와 같이 일반/정기결제 및 본인인증 기능을 구현할 수 있습니다. 필요한 파라미터는 예제를 참고하세요.

일반/정기결제 예제

<!-- payment.page.html -->
<ion-content [fullscreen]="true">
  ...
  <!-- 1. 결제 버튼 생성 -->
  <button (click)="onClickPayment()">결제하기</button>
</ion-content>
// payment.page.ts
import { Component } from '@angular/core';
// 2. 포트원 코르도바 플러그인 임포트
import { IamportCordova } from '@ionic-native/iamport-cordova';

@Component({
  selector: 'app-payment',
  templateUrl: 'payment.page.html',
  styleUrls: ['payment.page.scss'],
})
export class PaymentPage {

  constructor() {}

  // 3. 결제버튼에 대해 클릭 이벤트 핸들러 정의
  onClickPayment() {
    var userCode = 'iamport';                       // 가맹점 식별코드
    var data = {
      pg: 'html5_inicis',                           // PG사
      pay_method: 'card',                           // 결제수단
      name: '포트원 코르도바 테스트',                   // 주문명
      merchant_uid: 'mid_' + new Date().getTime(),  // 주문번호
      amount: '1000',                               // 결제금액
      buyer_name: '홍길동',                           // 구매자 이름
      buyer_tel: '01012341234',                     // 구매자 연락처
      buyer_email: '[email protected]',           // 구매자 이메일
      app_scheme: 'example',                        // 앱 URL 스킴
      ...
    };
    var titleOptions = {
      text: '포트원 코르도바 테스트',                   // 타이틀
      textColor: '#ffffff',                         // 타이틀 색
      textSize: '20',                               // 타이틀 크기
      textAlignment: 'left',                        // 타이틀 정렬 유형
      backgroundColor: '#344e81',                   // 타이틀 배경색
      show: true,                                   // 타이틀 유무
      leftButtonType: 'back',                       // 왼쪽 버튼 유형
      leftButtonColor: '#ffffff',                   // 왼쪽 버튼 색
      rightButtonType: 'close',                     // 오른쪽 버튼 유형
      rightButtonColor: '#ffffff',                  // 오른쪽 버튼 색
    };

    // 4. 포트원 코르도바 파라미터 정의
    var params = {
      userCode: userCode,                           // 4-1. 가맹점 식별코드 정의
      data: data,                                   // 4-2. 결제 데이터 정의
      titleOptions: titleOptions,                   // 4-3. 결제창 헤더 옵션 정의
      callback: function(response) {                // 4-3. 콜백 함수 정의
        alert(JSON.stringify(response));
      },
    };
    // 5. 결제창 호출
    IamportCordova.payment(params);
  }
}

본인인증 예제

<!-- certification.page.html -->
<ion-content [fullscreen]="true">
  ...
  <!-- 1. 본인인증 버튼 생성 -->
  <button (click)="onClickCertification()">본인인증 하기</button>
</ion-content>
// certification.page.ts
import { Component } from '@angular/core';
// 2. 포트원 코르도바 플러그인 임포트
import { IamportCordova } from '@ionic-native/iamport-cordova';

@Component({
  selector: 'app-certification',
  templateUrl: 'certification.page.html',
  styleUrls: ['certification.page.scss'],
})
export class CertificationPage {

  constructor() {}

  // 3. 본인인증 버튼에 대해 클릭 이벤트 핸들러 정의
  onClickCertification() {
    var userCode = 'iamport';                       // 가맹점 식별코드
    var data = {
      carrier: 'KTF',                               // 통신사
      merchant_uid: 'mid_' + new Date().getTime(),  // 주문번호
      company: 'SIOT',                              // 회사명
      name: '홍길동',                                 // 이름
      phone: '01012341234',                         // 전화번호
    };
    var titleOptions = {
      text: '포트원 코르도바 테스트',                   // 타이틀
      textColor: '#ffffff',                         // 타이틀 색
      textSize: '20',                               // 타이틀 크기
      textAlignment: 'left',                        // 타이틀 정렬 유형
      backgroundColor: '#344e81',                   // 타이틀 배경색
      show: true,                                   // 타이틀 유무
      leftButtonType: 'back',                       // 왼쪽 버튼 유형
      leftButtonColor: '#ffffff',                   // 왼쪽 버튼 색
      rightButtonType: 'close',                     // 오른쪽 버튼 유형
      rightButtonColor: '#ffffff',                  // 오른쪽 버튼 색
    };

    // 4. 포트원 코르도바 파라미터 정의
    var params = {
      userCode: userCode,                           // 4-1. 가맹점 식별코드 정의
      data: data,                                   // 4-2. 결제 데이터 정의
      titleOptions: titleOptions,                   // 4-3. 본인인증 창 헤더 옵션 정의
      callback: function(response) {                // 4-3. 콜백 함수 정의
        alert(JSON.stringify(response));
      },
    };
    // 5. 본인인증 창 호출
    IamportCordova.certification(params);
  }
}