├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── manuals
    ├── CERTIFICATION.md
    └── PAYMENT.md
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── constants.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    ├── utils.js
    └── views
    │   ├── Certification.vue
    │   ├── Home.vue
    │   ├── Payment.vue
    │   └── Result.vue
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | end_of_line = lf
5 | trim_trailing_whitespace = true
6 | insert_final_newline = true
7 | max_line_length = 100
8 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     '@vue/airbnb',
 9 |   ],
10 |   parserOptions: {
11 |     parser: 'babel-eslint',
12 |   },
13 |   rules: {
14 |     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
15 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16 |   },
17 | };
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # iamport-vue-example
 2 | 
 3 | [ ![alt text](https://img.shields.io/badge/vue-v2.6.11-orange.svg?longCache=true&style=flat-square) ](https://github.com/vuejs/vue)
 4 | [ ![alt text](https://img.shields.io/badge/ant--design--vue-v1.5.3-yellow.svg?longCache=true&style=flat-square) ](https://github.com/vueComponent/ant-design-vue)
 5 | [ ![alt text](https://img.shields.io/badge/styled--components-v4.3.2-green.svg?longCache=true&style=flat-square) ](https://github.com/styled-components/styled-components)
 6 | 
 7 | 뷰 환경에서 아임포트 결제 및 본인인증 연동을 위한 예제입니다. 뷰 네이티브용 예제 프로젝트는 [여기](https://github.com/iamport/iamport-vue-native)를 참조해주세요.
 8 | 
 9 | ## 다운받기
10 | 
11 | ```
12 | $ git clone https://github.com/iamport/iamport-vue-example
13 | ```
14 | 
15 | ## 실행하기
16 | 
17 | ```
18 | $ cd ./iamport-vue-example
19 | $ yarn install
20 | $ yarn run serve
21 | ```
22 | 
23 | ## 아임포트 라이브러리 추가하기
24 | 
25 | 최상단 HTML(public/index.html)에 아래의 `<script>`를 삽입합니다. 아임포트 라이브러리는 jQuery 기반으로 동작하기 때문에 **jQuery 1.0 이상이 반드시 설치**되어 있어야합니다.
26 | 
27 | ```html
28 | <!-- jQuery -->
29 | <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
30 | <!-- iamport.payment.js -->
31 | <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.8.js"></script>
32 | ```
33 | 
34 | ## 결제 연동하기
35 | 
36 | 결제 연동 방법은 [뷰에서 아임포트 결제 연동하기](manuals/PAYMENT.md) 문서를 참고하세요.
37 | 
38 | ## 본인인증 연동하기
39 | 
40 | 본인인증 연동 방법은 [뷰에서 아임포트 휴대폰 본인인증 연동하기](manuals/CERTIFICATION.md) 문서를 참고하세요.
41 | 
42 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     '@vue/cli-plugin-babel/preset',
 4 |   ],
 5 |   // plugins: [
 6 |   //   [
 7 |   //     'import',
 8 |   //     {
 9 |   //       libraryName: 'ant-design-vue',
10 |   //       libraryDirectory: 'es',
11 |   //       style: 'css',
12 |   //     },
13 |   //   ],
14 |   // ],
15 | };
16 | 


--------------------------------------------------------------------------------
/manuals/CERTIFICATION.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 뷰에서 아임포트 본인인증 연동하기
  3 | 
  4 | 뷰 환경에서 아임포트 본인인증 연동을 위한 안내입니다.
  5 | 
  6 | ## 1. 가맹점 식별하기
  7 | 
  8 | `IMP` 객체의 `init` 함수 첫번째 인자에 `가맹점 식별코드`를 추가합니다.
  9 | 
 10 | ```javascript
 11 | const { IMP } = window;
 12 | IMP.init('imp00000000'); // 'imp00000000' 대신 발급받은 가맹점 식별코드를 사용합니다.
 13 | ```
 14 | 
 15 | 가맹점 식별코드는 <a href="https://admin.iamport.kr" target="_blank">아임포트 관리자 페이지</a> 로그인 후, 시스템 설정 > 내정보에서 확인하실 수 있습니다.
 16 | 
 17 | ## 2. 본인인증 데이터 정의하기
 18 | 
 19 | 본인인증에 필요한 데이터를 아래와 같이 정의합니다. 이때 정의한 데이터는 `IMP.certification` 함수 호출시, 첫번째 인자로 전달됩니다. 본인인증 데이터에 대한 보다 자세한 내용은 <a href="https://docs.iamport.kr/tech/mobile-authentication#call-authentication" target="_blank">아임포트 공식 문서</a>를 참고하세요.
 20 | 
 21 | ```javascript
 22 | const data = {
 23 |   merchant_uid: `mid_${new Date().getTime()}`  // 주문번호
 24 |   company: '아임포트',                           // 회사명 또는 URL
 25 |   carrier: 'SKT',                              // 통신사
 26 |   name: '홍길동',                                // 이름
 27 |   phone: '01012341234',                        // 전화번호
 28 |   ...
 29 | };
 30 | ```
 31 | 
 32 | ## 3. 콜백 함수 정의하기
 33 | 
 34 | 본인인증 후 실행될 로직을 콜백 함수로 정의합니다. 이때 정의한 함수는 `IMP.certification` 함수 호출시, 두번째 인자로 전달됩니다. 콜백 함수의 첫번째 인자로 본인인증 결과가 객체의 형태로 전달됩니다.
 35 | 
 36 | ```javascript
 37 | callback(response) {
 38 |   const {
 39 |     success,
 40 |     merchant_uid,
 41 |     error_msg,
 42 |     ...
 43 |   } = response;
 44 | 
 45 |   if (success) {
 46 |     alert('본인인증 성공');
 47 |   } else {
 48 |     alert(`본인인증 실패: ${error_msg}`);
 49 |   }
 50 | }
 51 | ```
 52 | 
 53 | ## 4. 본인인증 창 호출하기
 54 | 
 55 | 본인인증 하기 버튼을 눌렀을때 `IMP` 객체의 `certification` 함수를 호출해 본인인증 창을 호출합니다. `certification` 함수의 첫번째 인자로는 2에서 정의한 `본인인증 데이터`를, 두번째 인자로는 3에서 정의한 `콜백 함수`를 전달합니다.
 56 | 
 57 | ```html
 58 | <template>
 59 |   <div>
 60 |     <button @click="onCertification">
 61 |       본인인증
 62 |     </button>
 63 |   </div>
 64 | </template>
 65 | 
 66 | <script>
 67 | export default {
 68 |   methods: {
 69 |     onCertification() {
 70 |       /* 1. 가맹점 식별하기 */
 71 |       const { IMP } = window;
 72 |       IMP.init('imp00000000');
 73 | 
 74 |       /* 2. 본인인증 데이터 정의하기 */
 75 |       const data = {
 76 |         merchant_uid: `mid_${new Date().getTime()}`  // 주문번호
 77 |         company: '아임포트',                           // 회사명 또는 URL
 78 |         carrier: 'SKT',                              // 통신사
 79 |         name: '홍길동',                                // 이름
 80 |         phone: '01012341234',                        // 전화번호
 81 |         ...
 82 |       };
 83 | 
 84 |       /* 4. 본인인증 창 호출하기 */
 85 |       IMP.certification(data, this.callback);
 86 |     },
 87 |     callback(response) {
 88 |       /* 3. 콜백 함수 정의하기 */
 89 |       const {
 90 |         success,
 91 |         merchant_uid,
 92 |         error_msg,
 93 |         ...
 94 |       } = response;
 95 | 
 96 |       if (success) {
 97 |         alert('본인인증 성공');
 98 |       } else {
 99 |         alert(`본인인증 실패: ${error_msg}`);
100 |       }
101 |     },
102 |   },
103 | };
104 | </script>
105 | ```


--------------------------------------------------------------------------------
/manuals/PAYMENT.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 뷰에서 아임포트 결제 연동하기
  3 | 
  4 | 뷰 환경에서 아임포트 결제 연동을 위한 안내입니다.
  5 | 
  6 | ## 1. 가맹점 식별하기
  7 | 
  8 | `IMP` 객체의 `init` 함수 첫번째 인자에 `가맹점 식별코드`를 추가합니다.
  9 | 
 10 | ```javascript
 11 | const { IMP } = window;
 12 | IMP.init('imp00000000'); // 'imp00000000' 대신 발급받은 가맹점 식별코드를 사용합니다.
 13 | ```
 14 | 
 15 | 가맹점 식별코드는 <a href="https://admin.iamport.kr" target="_blank">아임포트 관리자 페이지</a> 로그인 후, 시스템 설정 > 내정보에서 확인하실 수 있습니다.
 16 | 
 17 | ## 2. 결제 데이터 정의하기
 18 | 
 19 | 결제에 필요한 데이터를 아래와 같이 정의합니다. 이때 정의한 데이터는 `IMP.request_pay` 함수 호출시, 첫번째 인자로 전달됩니다. 결제 데이터에 대한 보다 자세한 내용은 <a href="https://docs.iamport.kr/tech/imp#param" target="_blank">아임포트 공식 문서</a>를 참고하세요.
 20 | 
 21 | ```javascript
 22 | const data = {
 23 |   pg: 'html5_inicis',                           // PG사
 24 |   pay_method: 'card',                           // 결제수단
 25 |   merchant_uid: `mid_${new Date().getTime()}`,  // 주문번호
 26 |   amount: 1000,                                 // 결제금액
 27 |   name: '아임포트 결제 데이터 분석',                  // 주문명
 28 |   buyer_name: '홍길동',                           // 구매자 이름
 29 |   buyer_tel: '01012341234',                     // 구매자 전화번호
 30 |   buyer_email: 'example@example',               // 구매자 이메일
 31 |   buyer_addr: '신사동 661-16',                    // 구매자 주소
 32 |   buyer_postcode: '06018',                      // 구매자 우편번호
 33 |   ...
 34 | };
 35 | ```
 36 | 
 37 | ## 3. 콜백 함수 정의하기
 38 | 
 39 | 결제 후 실행될 로직을 콜백 함수로 정의합니다. 이때 정의한 함수는 `IMP.request_pay` 함수 호출시, 두번째 인자로 전달됩니다. 콜백 함수의 첫번째 인자로 결제 결과가 객체의 형태로 전달됩니다. 결제 결과에 대한 보다 자세한 내용은 <a href="https://docs.iamport.kr/tech/imp#callback" target="_blank">아임포트 공식 문서</a>를 참고하세요.
 40 | 
 41 | ```javascript
 42 | callback(response) {
 43 |   const {
 44 |     success,
 45 |     merchant_uid,
 46 |     error_msg,
 47 |     ...
 48 |   } = response;
 49 | 
 50 |   if (success) {
 51 |     alert('결제 성공');
 52 |   } else {
 53 |     alert(`결제 실패: ${error_msg}`);
 54 |   }
 55 | }
 56 | ```
 57 | 
 58 | ## 4. 결제 창 호출하기
 59 | 
 60 | 결제하기 버튼을 눌렀을때 `IMP` 객체의 `request_pay` 함수를 호출해 결제 창을 호출합니다. `request_pay` 함수의 첫번째 인자로는 2에서 정의한 `결제 데이터`를, 두번째 인자로는 3에서 정의한 `콜백 함수`를 전달합니다.
 61 | 
 62 | ```html
 63 | <template>
 64 |   <div>
 65 |     <button @click="onPayment">
 66 |       결제하기
 67 |     </button>
 68 |   </div>
 69 | </template>
 70 | 
 71 | <script>
 72 | export default {
 73 |   methods: {
 74 |     onPayment() {
 75 |       /* 1. 가맹점 식별하기 */
 76 |       const { IMP } = window;
 77 |       IMP.init('imp00000000');
 78 | 
 79 |       /* 2. 결제 데이터 정의하기 */
 80 |       const data = {
 81 |         pg: 'html5_inicis',                           // PG사
 82 |         pay_method: 'card',                           // 결제수단
 83 |         merchant_uid: `mid_${new Date().getTime()}`   // 주문번호
 84 |         amount: 1000,                                 // 결제금액
 85 |         name: '아임포트 결제 데이터 분석',                  // 주문명
 86 |         buyer_name: '홍길동',                           // 구매자 이름
 87 |         buyer_tel: '01012341234',                     // 구매자 전화번호
 88 |         buyer_email: 'example@example',               // 구매자 이메일
 89 |         buyer_addr: '신사동 661-16',                    // 구매자 주소
 90 |         buyer_postcode: '06018',                      // 구매자 우편번호
 91 |         ...
 92 |       };
 93 | 
 94 |       /* 4. 결제 창 호출하기 */
 95 |       IMP.request_pay(data, this.callback);
 96 |     },
 97 |     callback(response) {
 98 |       /* 3. 콜백 함수 정의하기 */
 99 |       const {
100 |         success,
101 |         merchant_uid,
102 |         error_msg,
103 |         ...
104 |       } = response;
105 | 
106 |       if (success) {
107 |         alert('결제 성공');
108 |       } else {
109 |         alert(`결제 실패: ${error_msg}`);
110 |       }
111 |     },
112 |   },
113 | };
114 | </script>
115 | ```
116 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iamport-vue-example",
 3 |   "version": "0.1.0",
 4 |   "private": false,
 5 |   "description": "뷰용 아임포트 결제/본인인증 연동 예제 프로젝트",
 6 |   "scripts": {
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "keywords": [
12 |     "iamport",
13 |     "vue",
14 |     "vuejs"
15 |   ],
16 |   "author": "Solee Choi <mymusese@gmail.com> (https://github.com/SoleeChoi)",
17 |   "homepage": "https://github.com/iamport/iamport-vue-example",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/iamport/iamport-vue-example"
21 |   },
22 |   "license": "MIT",
23 |   "dependencies": {
24 |     "ant-design-vue": "^1.5.3",
25 |     "core-js": "^3.6.4",
26 |     "vue": "^2.6.11",
27 |     "vue-router": "^3.1.6",
28 |     "vuex": "^3.1.3"
29 |   },
30 |   "devDependencies": {
31 |     "@vue/cli-plugin-babel": "^4.3.0",
32 |     "@vue/cli-plugin-eslint": "^4.3.0",
33 |     "@vue/cli-service": "^4.3.0",
34 |     "@vue/eslint-config-airbnb": "^5.0.2",
35 |     "babel-eslint": "^10.1.0",
36 |     "babel-plugin-import": "^1.13.0",
37 |     "eslint": "^6.7.2",
38 |     "eslint-plugin-import": "^2.20.2",
39 |     "eslint-plugin-vue": "^6.2.2",
40 |     "less": "^3.0.4",
41 |     "less-loader": "^5.0.0",
42 |     "vue-template-compiler": "^2.6.11"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iamport/iamport-vue-example/1ab4c292ea681cb6cdcf9318bb3d926def144c59/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 | 
10 |     <!-- jQuery -->
11 |     <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
12 |     <!-- iamport.payment.js -->
13 |     <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.8.js"></script>
14 |   </head>
15 |   <body>
16 |     <noscript>
17 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
18 |     </noscript>
19 |     <div id="app"></div>
20 |     <!-- built files will be auto injected -->
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <router-view/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style lang="less">
 8 | #app {
 9 |   font-family: Avenir, Helvetica, Arial, sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 |   text-align: center;
13 |   color: #2c3e50;
14 | 
15 |   position: absolute;
16 |   left: 0;
17 |   right: 0;
18 |   top: 0;
19 |   bottom: 0;
20 |   display: flex;
21 |   align-items: center;
22 |   background-color: #344e81;
23 | }
24 | 
25 | .imp-container {
26 |   width: 80%;
27 |   margin: 0 auto;
28 |   background-color: #fff;
29 |   border-radius: 3px;
30 |   padding: 2rem 5rem;
31 | 
32 |   h1 {
33 |     margin-bottom: 50px;
34 |   }
35 | 
36 |   .imp-payment-escrow .ant-form-item-control {
37 |     text-align: left;
38 |   }
39 |   .ant-btn {
40 |     margin: 20px 5px 0 5px;
41 |   }
42 | }
43 | 
44 | .ant-row.ant-form-item {
45 |   margin-bottom: 10px;
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/src/constants.js:
--------------------------------------------------------------------------------
  1 | export const PGS = [
  2 |   {
  3 |     value: 'html5_inicis',
  4 |     label: '웹 표준 이니시스',
  5 |   },
  6 |   {
  7 |     value: 'kcp',
  8 |     label: 'NHN KCP',
  9 |   },
 10 |   {
 11 |     value: 'kcp_billing',
 12 |     label: 'NHN KCP 정기결제',
 13 |   },
 14 |   {
 15 |     value: 'uplus',
 16 |     label: 'LG 유플러스',
 17 |   },
 18 |   {
 19 |     value: 'jtnet',
 20 |     label: 'JTNET',
 21 |   },
 22 |   {
 23 |     value: 'nice',
 24 |     label: '나이스 정보통신',
 25 |   },
 26 |   {
 27 |     value: 'kakaopay',
 28 |     label: '신 - 카카오페이',
 29 |   },
 30 |   {
 31 |     value: 'kakao',
 32 |     label: '구 - LG CNS 카카오페이',
 33 |   },
 34 |   {
 35 |     value: 'danal',
 36 |     label: '다날 휴대폰 소액결제',
 37 |   },
 38 |   {
 39 |     value: 'danal_tpay',
 40 |     label: '다날 일반결제',
 41 |   },
 42 |   {
 43 |     value: 'kicc',
 44 |     label: '한국정보통신',
 45 |   },
 46 |   {
 47 |     value: 'paypal',
 48 |     label: '페이팔',
 49 |   },
 50 |   {
 51 |     value: 'mobilians',
 52 |     label: '모빌리언스',
 53 |   },
 54 |   {
 55 |     value: 'payco',
 56 |     label: '페이코',
 57 |   },
 58 |   {
 59 |     value: 'settle',
 60 |     label: '세틀뱅크 가상계좌',
 61 |   },
 62 |   {
 63 |     value: 'naverco',
 64 |     label: '네이버 체크아웃',
 65 |   },
 66 |   {
 67 |     value: 'naverpay',
 68 |     label: '네이버페이',
 69 |   },
 70 |   {
 71 |     value: 'smilepay',
 72 |     label: '스마일페이',
 73 |   },
 74 | ];
 75 | 
 76 | export const METHODS = [
 77 |   {
 78 |     value: 'card',
 79 |     label: '신용카드',
 80 |   },
 81 |   {
 82 |     value: 'trans',
 83 |     label: '실시간 계좌이체',
 84 |   },
 85 |   {
 86 |     value: 'vbank',
 87 |     label: '가상계좌',
 88 |   },
 89 |   {
 90 |     value: 'phone',
 91 |     label: '휴대폰 소액결제',
 92 |   },
 93 | ];
 94 | 
 95 | export const METHODS_FOR_INICIS = METHODS.concat([
 96 |   {
 97 |     value: 'samsung',
 98 |     label: '삼성페이',
 99 |   },
100 |   {
101 |     value: 'kapy',
102 |     label: 'KPAY',
103 |   },
104 |   {
105 |     value: 'cultureland',
106 |     label: '문화상품권',
107 |   },
108 |   {
109 |     value: 'smartculture',
110 |     label: '스마트문상',
111 |   },
112 |   {
113 |     value: 'happymoney',
114 |     label: '해피머니',
115 |   },
116 | ]);
117 | 
118 | export const METHODS_FOR_UPLUS = METHODS.concat([
119 |   {
120 |     value: 'cultureland',
121 |     label: '문화상품권',
122 |   },
123 |   {
124 |     value: 'smartculture',
125 |     label: '스마트문상',
126 |   },
127 |   {
128 |     value: 'booknlife',
129 |     label: '도서문화상품권',
130 |   },
131 | ]);
132 | 
133 | export const METHODS_FOR_KCP = METHODS.concat([{ value: 'samsung', label: '삼성페이' }]);
134 | 
135 | export const METHOD_FOR_CARD = [{ value: 'card', label: '신용카드' }];
136 | export const METHOD_FOR_PHONE = [{ value: 'phone', label: '휴대폰 소액결제' }];
137 | export const METHOD_FOR_VBANK = [{ value: 'vbank', label: '가상계좌' }];
138 | 
139 | export const METHODS_FOR_MOBILIANS = METHOD_FOR_CARD.concat(METHOD_FOR_PHONE);
140 | 
141 | export const QUOTAS = ['0', '1'];
142 | 
143 | export default {};
144 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Antd from 'ant-design-vue';
 3 | import App from './App.vue';
 4 | import router from './router';
 5 | import store from './store';
 6 | 
 7 | import 'ant-design-vue/dist/antd.css';
 8 | 
 9 | Vue.config.productionTip = false;
10 | 
11 | Vue.use(Antd);
12 | 
13 | new Vue({
14 |   router,
15 |   store,
16 |   render: (h) => h(App),
17 | }).$mount('#app');
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import VueRouter from 'vue-router';
 3 | import Home from '../views/Home.vue';
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home,
12 |   },
13 |   {
14 |     path: '/payment',
15 |     name: 'Payment',
16 |     component: () => import(/* webpackChunkName: "payment" */ '../views/Payment.vue'),
17 |   },
18 |   {
19 |     path: '/certification',
20 |     name: 'Certification',
21 |     component: () => import(/* webpackChunkName: "certification" */ '../views/Certification.vue'),
22 |   },
23 |   {
24 |     path: '/result',
25 |     name: 'Result',
26 |     component: () => import(/* webpackChunkName: "result" */ '../views/Result.vue'),
27 |   },
28 | ];
29 | 
30 | const router = new VueRouter({
31 |   routes,
32 | });
33 | 
34 | export default router;
35 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | export default new Vuex.Store({
 7 |   state: {
 8 |   },
 9 |   mutations: {
10 |   },
11 |   actions: {
12 |   },
13 |   modules: {
14 |   },
15 | });
16 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   METHODS_FOR_INICIS,
 3 |   METHODS_FOR_KCP,
 4 |   METHOD_FOR_CARD,
 5 |   METHODS_FOR_UPLUS,
 6 |   METHOD_FOR_PHONE,
 7 |   METHODS_FOR_MOBILIANS,
 8 |   METHOD_FOR_VBANK,
 9 |   QUOTAS,
10 | } from './constants';
11 | 
12 | function getUserCodeByPg(pg) {
13 |   switch (pg) {
14 |     case 'kakao':
15 |       return 'imp10391932';
16 |     case 'paypal':
17 |       return 'imp09350031';
18 |     case 'mobilians':
19 |       return 'imp60029475';
20 |     case 'naverco':
21 |     case 'naverpay':
22 |       return 'imp41073887';
23 |     default:
24 |       return 'imp19424728';
25 |   }
26 | }
27 | 
28 | function getMethodsByPg(pg = 'html5_inicis') {
29 |   switch (pg) {
30 |     case 'html5_inicis':
31 |       return METHODS_FOR_INICIS;
32 |     case 'kcp':
33 |       return METHODS_FOR_KCP;
34 |     case 'kcp_billing':
35 |     case 'kakaopay':
36 |     case 'kakao':
37 |     case 'paypal':
38 |     case 'payco':
39 |     case 'smilepay':
40 |       return METHOD_FOR_CARD;
41 |     case 'uplus':
42 |       return METHODS_FOR_UPLUS;
43 |     case 'danal':
44 |       return METHOD_FOR_PHONE;
45 |     case 'mobilians':
46 |       return METHODS_FOR_MOBILIANS;
47 |     case 'settle':
48 |       return METHOD_FOR_VBANK;
49 |     default:
50 |       return METHODS_FOR_INICIS;
51 |   }
52 | }
53 | 
54 | function getQuotaByPg(pg = 'html5_inicis') {
55 |   switch (pg) {
56 |     case 'html5_inicis':
57 |     case 'kcp':
58 |       return QUOTAS.concat(['2', '3', '4', '5', '6']);
59 |     default:
60 |       return QUOTAS;
61 |   }
62 | }
63 | 
64 | export default {
65 |   getUserCodeByPg,
66 |   getMethodsByPg,
67 |   getQuotaByPg,
68 | };
69 | 


--------------------------------------------------------------------------------
/src/views/Certification.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="imp-container">
  3 |     <h1>아임포트 본인인증</h1>
  4 |     <a-form
  5 |       :form="form"
  6 |       :label-col="{ span: 6 }"
  7 |       :wrapper-col="{ span: 18 }"
  8 |       :colon="false"
  9 |       labelAlign="left"
 10 |       @submit="handleSubmit"
 11 |     >
 12 |       <a-form-item label="주문번호">
 13 |         <a-input
 14 |           v-decorator="[
 15 |             'merchantUid',
 16 |             { initialValue: initialMerchantUid },
 17 |           ]"
 18 |           size="large"
 19 |         />
 20 |       </a-form-item>
 21 |       <a-form-item label="회사명">
 22 |         <a-input
 23 |           v-decorator="['company', { initialValue: 'SIOT' }]"
 24 |           size="large"
 25 |         />
 26 |       </a-form-item>
 27 |       <a-form-item label="통신사">
 28 |         <a-select
 29 |           v-decorator="['carrier', { initialValue: 'SKT' }]"
 30 |           size="large"
 31 |         >
 32 |           <a-select-option value="SKT">
 33 |             SKT
 34 |           </a-select-option>
 35 |           <a-select-option value="KTF">
 36 |             KT
 37 |           </a-select-option>
 38 |           <a-select-option value="LGT">
 39 |             LGU+
 40 |           </a-select-option>
 41 |           <a-select-option value="MVNO">
 42 |             알뜰폰
 43 |           </a-select-option>
 44 |         </a-select>
 45 |       </a-form-item>
 46 |       <a-form-item label="이름">
 47 |         <a-input
 48 |           v-decorator="['name']"
 49 |           size="large"
 50 |         />
 51 |       </a-form-item>
 52 |       <a-form-item label="전화번호">
 53 |         <a-input
 54 |           v-decorator="['phone']"
 55 |           type="number"
 56 |           size="large"
 57 |         />
 58 |       </a-form-item>
 59 |       <a-form-item label="허용최소연령">
 60 |         <a-input
 61 |           v-decorator="['minAge']"
 62 |           type="number"
 63 |           size="large"
 64 |         />
 65 |       </a-form-item>
 66 |       <a-button size="large" @click="handleGoBack">
 67 |         뒤로가기
 68 |       </a-button>
 69 |       <a-button type="primary" html-type="submit" size="large">
 70 |         본인인증
 71 |       </a-button>
 72 |     </a-form>
 73 |   </div>
 74 | </template>
 75 | 
 76 | <script>
 77 | export default {
 78 |   data() {
 79 |     return {
 80 |       formLayout: 'horizontal',
 81 |       form: this.$form.createForm(this, { name: 'certification' }),
 82 |       initialMerchantUid: `mid_${new Date().getTime()}`,
 83 |     };
 84 |   },
 85 |   methods: {
 86 |     handleSubmit(e) {
 87 |       e.preventDefault();
 88 |       this.form.validateFields((err, values) => {
 89 |         if (!err) {
 90 |           const {
 91 |             merchantUid, company, carrier, name, phone, minAge,
 92 |           } = values;
 93 |           const { IMP } = window;
 94 |           IMP.init('imp10391932');
 95 |           const data = {
 96 |             merchant_uid: merchantUid,
 97 |             company,
 98 |             carrier,
 99 |             name,
100 |             phone,
101 |             min_age: minAge,
102 |           };
103 |           IMP.certification(data, this.callback);
104 |         }
105 |       });
106 |     },
107 |     handleGoBack() {
108 |       this.$router.push('/');
109 |     },
110 |     callback(response) {
111 |       // 본인인증 종료 후 result 페이지로 이동
112 |       const query = {
113 |         ...response,
114 |         type: 'certification',
115 |       };
116 |       this.$router.push({ path: '/result', query });
117 |     },
118 |   },
119 | };
120 | </script>
121 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="exp-container">
 4 |       <h1>아임포트 테스트</h1>
 5 |       <h3>아임포트 뷰 테스트 화면입니다.</h3>
 6 |       <h3>아래 버튼을 눌러 결제 또는 본인인증 테스트를 진행해주세요.</h3>
 7 |     </div>
 8 |     <div class="imp-home">
 9 |       <div class="nav-container">
10 |         <router-link to="/payment">
11 |           <a-icon type="credit-card" />
12 |           결제
13 |         </router-link>
14 |         <router-link to="/certification">
15 |           <a-icon type="user" />
16 |           본인인증
17 |         </router-link>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | 
23 | <style lang="less">
24 | .exp-container {
25 |   position: absolute;
26 |   top: 0;
27 |   left: 0;
28 |   right: 0;
29 |   bottom: 50%;
30 |   display: flex;
31 |   align-items: center;
32 |   flex-direction: column;
33 |   justify-content: center;
34 | 
35 |   * {
36 |     color: #fff;
37 |   }
38 | }
39 | 
40 | .imp-home {
41 |   position: absolute;
42 |   top: 50%;
43 |   left: 0;
44 |   right: 0;
45 |   bottom: 0;
46 |   background-color: #fff;
47 | 
48 |   .nav-container {
49 |     display: flex;
50 |     align-items: center;
51 |     justify-content: center;
52 |     position: absolute;
53 |     top: -75px;
54 |     left: 0;
55 |     right: 0;
56 |     a {
57 |       color: #344e81;
58 |       box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.13);
59 |       display: flex;
60 |       align-items: center;
61 |       justify-content: center;
62 |       flex-direction: column;
63 |       background-color: #fff;
64 |       margin: 0 10px;
65 |       width: 200px;
66 |       height: 150px;
67 |       border-radius: 3px;
68 |       font-size: 18px;
69 |       .anticon {
70 |         margin-bottom: 20px;
71 |         font-size: 40px;
72 |       }
73 |     }
74 |   }
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/views/Payment.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="imp-container">
  3 |     <h1>아임포트 결제</h1>
  4 |     <a-form
  5 |       :form="form"
  6 |       :label-col="{ span: 6 }"
  7 |       :wrapper-col="{ span: 18 }"
  8 |       :colon="false"
  9 |       labelAlign="left"
 10 |       @submit="handleSubmit"
 11 |     >
 12 |       <a-form-item label="PG사">
 13 |         <a-select
 14 |           v-decorator="['pg', { initialValue: 'html5_inicis' }]"
 15 |           size="large"
 16 |           @change="handlePg"
 17 |         >
 18 |           <a-select-option
 19 |             v-bind:key="pg.value"
 20 |             v-for="pg in pgs"
 21 |             :value="pg.value"
 22 |           >
 23 |             {{ pg.label }}
 24 |           </a-select-option>
 25 |         </a-select>
 26 |       </a-form-item>
 27 |       <a-form-item label="결제수단">
 28 |         <a-select
 29 |           v-decorator="['payMethod', { initialValue: 'card' }]"
 30 |           size="large"
 31 |           @change="handleMethod"
 32 |         >
 33 |           <a-select-option
 34 |             v-bind:key="method.value"
 35 |             v-for="method in methods"
 36 |             :value="method.value"
 37 |           >
 38 |             {{ method.label }}
 39 |           </a-select-option>
 40 |         </a-select>
 41 |       </a-form-item>
 42 |       <a-form-item label="에스크로 결제여부" class="imp-payment-escrow">
 43 |         <a-switch v-decorator="['escrow', { valuePropName: 'checked' }]" />
 44 |       </a-form-item>
 45 |       <a-form-item label="입금기한" v-if="vbankDueVisible">
 46 |         <a-input
 47 |           v-decorator="[
 48 |             'vbankDue',
 49 |             {
 50 |               rules: [{ required: true, message: '가상계좌 입금기한은 필수입력입니다' }],
 51 |             }
 52 |           ]"
 53 |           placeholder="YYYYMMDDhhmm"
 54 |           size="large"
 55 |           type="number"
 56 |         />
 57 |       </a-form-item>
 58 |       <a-form-item label="사업자번호" v-if="bizNumVisible">
 59 |         <a-input
 60 |           v-decorator="[
 61 |             'bizNum',
 62 |             {
 63 |               rules: [{ required: true, message: '사업자번호는 필수입력입니다' }],
 64 |             }
 65 |           ]"
 66 |           size="large"
 67 |           type="number"
 68 |         />
 69 |       </a-form-item>
 70 |       <a-form-item label="할부개월수" v-if="quotaVisible">
 71 |         <a-select
 72 |           v-decorator="['quota', { initialValue: '0' }]"
 73 |           size="large"
 74 |         >
 75 |           <a-select-option
 76 |             v-bind:key="quota"
 77 |             v-for="quota in quotas"
 78 |             :value="quota"
 79 |           >
 80 |             {{ quota === '0' ? 'PG사 기본제공' : quota === '1' ? '일시불' : `${quota}개월` }}
 81 |           </a-select-option>
 82 |         </a-select>
 83 |       </a-form-item>
 84 |       <a-form-item label="주문번호">
 85 |         <a-input
 86 |           v-decorator="[
 87 |             'merchantUid',
 88 |             { initialValue: initialMerchantUid },
 89 |           ]"
 90 |           size="large"
 91 |         />
 92 |       </a-form-item>
 93 |       <a-form-item label="주문명">
 94 |         <a-input
 95 |           v-decorator="['name', { initialValue: '아임포트 VueJS 테스트 결제' }]"
 96 |           size="large"
 97 |         />
 98 |       </a-form-item>
 99 |       <a-form-item label="결제금액">
100 |         <a-input
101 |           v-decorator="['amount', { initialValue: '1000' }]"
102 |           size="large"
103 |           type="number"
104 |         />
105 |       </a-form-item>
106 |       <a-form-item label="이름">
107 |         <a-input
108 |           v-decorator="['buyerName', { initialValue: '홍길동' }]"
109 |           size="large"
110 |         />
111 |       </a-form-item>
112 |       <a-form-item label="연락처">
113 |         <a-input
114 |           v-decorator="['buyerPhone', { initialValue: '01012341234' }]"
115 |           size="large"
116 |           type="number"
117 |         />
118 |       </a-form-item>
119 |       <a-form-item label="이메일">
120 |         <a-input
121 |           v-decorator="['buyerEmail', { initialValue: 'example@example.com' }]"
122 |           size="large"
123 |         />
124 |       </a-form-item>
125 |       <a-form-item label="주소">
126 |         <a-input
127 |           v-decorator="['buyerAddr', { initialValue: '서울시 강남구 신사동 661-16' }]"
128 |           size="large"
129 |         />
130 |       </a-form-item>
131 |       <a-form-item label="우편번호">
132 |         <a-input
133 |           v-decorator="['buyerPostcode', { initialValue: '06010' }]"
134 |           size="large"
135 |           type="number"
136 |         />
137 |       </a-form-item>
138 |       <a-button size="large" @click="handleGoBack">
139 |         뒤로가기
140 |       </a-button>
141 |       <a-button type="primary" html-type="submit" size="large">
142 |         결제하기
143 |       </a-button>
144 |     </a-form>
145 |   </div>
146 | </template>
147 | 
148 | <script>
149 | import { PGS } from '../constants';
150 | import Utils from '../utils';
151 | 
152 | export default {
153 |   data() {
154 |     return {
155 |       formLayout: 'horizontal',
156 |       form: this.$form.createForm(this, { name: 'payment' }),
157 |       initialMerchantUid: `mid_${new Date().getTime()}`,
158 |       pgs: PGS,
159 |       methods: Utils.getMethodsByPg(),
160 |       quotas: Utils.getQuotaByPg(),
161 |       initialMethod: 'card',
162 |       vbankDueVisible: false,
163 |       bizNumVisible: false,
164 |       quotaVisible: true,
165 |     };
166 |   },
167 |   methods: {
168 |     handleSubmit(e) {
169 |       e.preventDefault();
170 |       this.form.validateFields((err, values) => {
171 |         if (!err) {
172 |           const {
173 |             pg,
174 |             payMethod,
175 |             escrow,
176 |             vbankDue,
177 |             bizNum,
178 |             quota,
179 |             merchantUid,
180 |             name,
181 |             amount,
182 |             buyerName,
183 |             buyerTel,
184 |             buyerEmail,
185 |             buyerAddr,
186 |             buyerPostcode,
187 |           } = values;
188 |           const { IMP } = window;
189 |           IMP.init(Utils.getUserCodeByPg(pg));
190 |           const data = {
191 |             pg,
192 |             pay_method: payMethod,
193 |             escrow,
194 |             merchant_uid: merchantUid,
195 |             name,
196 |             amount,
197 |             buyer_name: buyerName,
198 |             buyer_tel: buyerTel,
199 |             buyer_email: buyerEmail,
200 |             buyer_addr: buyerAddr,
201 |             buyer_postcode: buyerPostcode,
202 |             niceMobileV2: true,
203 |           };
204 | 
205 |           if (payMethod === 'vbank') {
206 |             data.vbank_due = vbankDue;
207 |             if (pg === 'danal_tpay') {
208 |               data.biz_num = bizNum;
209 |             }
210 |           }
211 |           if (payMethod === 'card') {
212 |             data.display = {
213 |               card_quota: quota,
214 |             };
215 |           }
216 |           IMP.request_pay(data, this.callback);
217 |         }
218 |       });
219 |     },
220 |     handlePg(pg) {
221 |       const newMethods = Utils.getMethodsByPg(pg);
222 |       const [{ value }] = newMethods;
223 | 
224 |       this.methods = Utils.getMethodsByPg(pg);
225 |       this.form.setFieldsValue({
226 |         payMethod: value,
227 |       });
228 | 
229 |       this.setVisible(pg, value);
230 |     },
231 |     handleMethod(method) {
232 |       const pg = this.form.getFieldValue('pg');
233 |       this.setVisible(pg, method);
234 |     },
235 |     setVisible(pg, method) {
236 |       // 가상계좌 입금기한 렌더링 여부
237 |       const vbankDueVisible = method === 'vbank';
238 |       this.vbankDueVisible = vbankDueVisible;
239 | 
240 |       // 사업자 번호 렌더링 여부
241 |       this.bizNumVisible = pg === 'danal_tpay' && vbankDueVisible;
242 | 
243 |       // 할부개월수 렌더링 여부
244 |       this.quotaVisible = method === 'card';
245 |     },
246 |     handleGoBack() {
247 |       this.$router.push('/');
248 |     },
249 |     callback(response) {
250 |       // 본인인증 종료 후 result 페이지로 이동
251 |       const query = {
252 |         ...response,
253 |         type: 'payment',
254 |       };
255 |       this.$router.push({ path: '/result', query });
256 |     },
257 |   },
258 | };
259 | </script>
260 | 


--------------------------------------------------------------------------------
/src/views/Result.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="imp-container imp-result">
  3 |     <a-icon
  4 |       v-if="success"
  5 |       type="check-circle"
  6 |       :style="{ fontSize: '200px', color: '#52c41a' }"
  7 |     />
  8 |     <a-icon
  9 |       v-else
 10 |       type="exclamation-circle"
 11 |       :style="{ fontSize: '200px', color: '#f5222d' }"
 12 |     />
 13 |     <h1>{{ type === 'payment' ? '결제' : '본인인증' }}에 {{ success ? '성공' : '실패'}}하였습니다</h1>
 14 |     <ul>
 15 |       <li>
 16 |         <span>아임포트 번호</span>
 17 |         <span>{{ impUid }}</span>
 18 |       </li>
 19 |       <li>
 20 |         <span>주문번호</span>
 21 |         <span>{{ merchantUid }}</span>
 22 |       </li>
 23 |       <li v-if="!success">
 24 |         <span>에러 메시지</span>
 25 |         <span>{{ errorMessage }}</span>
 26 |       </li>
 27 |     </ul>
 28 |     <a-button size="large" @click="handleGoBack">
 29 |       뒤로가기
 30 |     </a-button>
 31 |   </div>
 32 | </template>
 33 | 
 34 | <script>
 35 | export default {
 36 |   data() {
 37 |     const { query } = this.$router.history.current;
 38 |     const { type } = query;
 39 |     return {
 40 |       type,
 41 |       success: this.getSuccess(query),
 42 |       impUid: query.imp_uid,
 43 |       merchantUid: query.merchant_uid,
 44 |       errorMessage: `[${query.error_code}] ${query.error_msg}`,
 45 |     };
 46 |   },
 47 |   methods: {
 48 |     getSuccess(query) {
 49 |       const { success } = query;
 50 |       const impSuccess = query.imp_success;
 51 |       if (impSuccess === undefined) {
 52 |         if (typeof success === 'string') {
 53 |           return success === 'true';
 54 |         }
 55 |         return success;
 56 |       }
 57 |       if (typeof impSuccess === 'string') {
 58 |         return impSuccess === 'true';
 59 |       }
 60 |       return impSuccess;
 61 |     },
 62 |     handleGoBack() {
 63 |       this.$router.push(`/${this.type}`);
 64 |     },
 65 |   },
 66 | };
 67 | </script>
 68 | 
 69 | <style lang="less">
 70 | .imp-container.imp-result {
 71 |   .anticon {
 72 |     margin-bottom: 20px;
 73 |   }
 74 |   ul {
 75 |     padding: 0;
 76 |     margin: 0 auto;
 77 |     width: 50%;
 78 |     li {
 79 |       text-align: left;
 80 |       list-style: none;
 81 |       font-size: 16px;
 82 |       display: flex;
 83 |       margin: 10px 0;
 84 |       span {
 85 |         display: inline-block;
 86 |       }
 87 |       span:first-child {
 88 |         width: 40%;
 89 |         color: #888;
 90 |       }
 91 |       span:last-child {
 92 |         width: 60%;
 93 |       }
 94 |     }
 95 |   }
 96 |   .ant-btn {
 97 |     margin-top: 30px;
 98 |   }
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------