글을 읽기 전에
* 웹을 기반으로 설명되었으나, 전반적인 아임포트 이용 방법을 살펴보실 수 있습니다.
* 처음으로 결제 기능을 추가해보려는 분은 아래의 링크를 통해서 인증 및 결제서비스 과정에 대한 기술적 이해도를 높여주세요.
github.com/iamport/iamport-manual/blob/master/%EC%9D%B8%EC%A6%9D%EA%B2%B0%EC%A0%9C/background.md
위 내용에 대한 이해를 기반으로, 간단한 서비스 혹은 상품을 인증 결제 방식으로 판매하는데 아임포트를 사용해보고자 합니다.
인증 결제란, 여러분이 흔히 보았던 이니시스, 나이스 페이먼츠 등의 PG사의 이름이 적혀있는 결제창이 호출되고, 카드 정보를 입력하여 결제가 진행되는 결제를 말합니다. 아주 단순히 생각하자면, 여러분이 쇼핑몰에서 결제하는 그 방식이라고 생각하시면 되겠습니다.
그렇다면, 결제 기능을 여러분의 프로젝트에 추가하기 위한 방법을 하나씩 살펴보도록하겠습니다.
1. 아임포트 가입 및 가맹점 번호 확인하기
가맹점이 누구냐구요? 아임포트를 이용하려는 고객 여러분이 가맹점입니다.
여타 다른 API 서비스들이 그러하듯, 아임포트는 유저들을 고유한 식별자로 구분합니다.
이 식별자를 이용하여 아임포트는 고객분들을 구별하고, 적절한 서비스를 제공합니다.
우선 서비스 이용에 앞서 아임포트에 가입하도록하겠습니다.
상단 헤더 부분의 "대시보드"를 누르시거나 admin.iamport.kr/로 접근하셔서 가입을 진행하실 수 있습니다.
단순히 아임포트를 테스트해보고 싶으신 분은 "관리자 체험하기"를 눌러서 테스트용 가맹점 번호를 받으실 수도 있습니다.
관리자 페이지에 접속하시면, 결제를 위한 가맹점 식별코드와 결제 후 관리와 조회를 위한 REST API에 접근하기 위한 키를 확인하실 수 있습니다.
단순 키 외에도 PG 설정이나 API를 호출할 수 있는 IP를 제한하는 등의 다양한 기능을 포함하고 있습니다.
지금은 테스트용이므로 별다른 추가 설정없이 PG설정만 KG 이니시스로 설정하도록하겠습니다.
2. 클라이언트단에 jquery와 import을 cdn 방식으로 추가하기
이제 여러분들의 프로젝트에 jquery와 import를 추가하시면 준비는 모두 끝납니다.
아임포트는 jQuery 1.0 버전부터 제공되는 기본 기능을 바탕으로 제작되었습니다.
따라서, 아임포트 외에 jQuery를 사용하실 계획이 없으시다면
가급적 용량이 적은 낮은 버전+minified된 jQuery를 삽입하시길 추천드립니다.
(아래에 관련 그래프를 첨부해두었습니다)
한편, 현재 아임포트에서 제공하는 최신 버전은 1.1.8입니다. 가급적 최신 버전을 이용하시길 추천드립니다.
아임포트의 버전에 따른 차이점이 궁금하시다면
// jQuery
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
// iamport 추가. 2021-02-01 기준으로 최신 버전은 1.1.8임.
<script src="https://cdn.iamport.kr/js/iamport.payment-1.1.8.js" type="text/javascript"></script>
참고 1)
3. 결제 이벤트가 발생하면 결제 프로세스 진행하기
아임포트를 이용하면 PG 연동과 같은 절차에 골머리를 썩일 필요없이 매우 간단하게 결제 서비스를 구현할 수 있습니다.
PG 연동을 하기 위해 각 PG사의 홈페이지에서 제공하는 연동 가이드의 양을 보면, 생각보다 양이 꽤나 방대함을 알 수 있습니다.
그러나 아임포트를 활용하면 몇 줄의 코드만으로 결제 서비스를 구현할 수 있어 개발자가 비즈니스 로직과 서비스 자체에 집중할 수 있게 됩니다. 이로써 개발 기간 단축이라는 이득이 있습니다.
그 간단한 과정은 다음 3단계와 같습니다.
3-1. 가맹점 식별을 위해 IMP 객체 init 하기
CDN에 아임포트를 추가해줬으므로 전역 변수로 IMP가 설정되었습니다.
앞서 관리자 페이지(admin.iamport.kr/) 에서 확인하신 가맹점 변호를 통해 IMP 객체를 init합니다.
결제 이벤트가 발생한 직후에 진행해도 되지만 이 과정은 가급적 일찍 해두는 것이 좋습니다.
const { IMP } = window;
IMP.init('imp00000000');
3-2. request_pay 메서드를 통해 결제 진행하기 + 콜백 함수를 통해 적절한 처리하기
IMP의 request_pay 메서드를 통해 결제창을 띄워 결제 프로세스를 시작할 수 있습니다.
아임포트에서는 기존의 html form을 직접 개발자가 작성해야 하는 방식이 아닌, 간편하게 함수를 호출하는 방식으로 결제창을 호출할 수 있어 훨씬 편리합니다.
이 방식의 편리함을 이해하고자 한다면, 기존 html form이 얼마나 verbose했는지를 확인해보면 됩니다.
만약 개발자가 직접 클라이언트 단에서 html form을 작성해야 한다면, 아래와 같이 막대한 양의 html 코드가 필요했을 겁니다.
다시, 결제 과정으로 돌아오겠습니다.
공식문서(docs.iamport.kr/tech/imp)에 따르면 IMP.request_pay는 다음과 같이 param, callback 2개의 argument를 받는 함수입니다.
IMP.request_pay(param, callback)
(1) param : docs.iamport.kr/tech/imp#param
param에는 결제를 위한 정보들을 담은 객체를 전달해야 합니다.
예를 들어, buyer_name(주문자명), amoun(결제 금액), pg(사용할 PG사), pay_method(결제수단) 등이 존재합니다.
흔히 쇼핑몰에서 주문을 위해 주소를 입력하고, 결제 수단을 선택하는 등의 과정은 이 param을 채우기 위한 것이라고 생각하시면 됩니다.
(2) callback : docs.iamport.kr/tech/imp#callback
한편, param 정보를 이용해 결제창을 호출하고, 유저가 입력한 카드 정보들이 카드사 서버로 전달되어 인증을 거치고, 인증이 성공하면 인증키를 PG에 전달하는 등 복잡한 과정을 거친 후, 콜백 함수가 호출됩니다.
이 콜백함수의 인자(rsp)에는 결제 결과 객체가 포함되어 있습니다.
rsp는 success(결제 성공 여부), paid_amount(결제된 금액), imp_uid(아임포트 거래 고유 번호) 등을 담고 있는 객체입니다.
따라서, 결제가 실패했다면, 실패창으로 redirect하거나, 결제가 성공했다면, 성공 메세지를 보내는 등의 추가적인 처리를 하실 수 있습니다.
여기서 권장되는 것은, 추후 고객의 거래 내역 증명 요구 등에 대처하기 위하여 rsp의 정보를 다듬어 여러분들의 서버를 거쳐서 DB에 저장하는 것입니다.
더 구체적인 request_pay의 인자들에대한 더 자세한 사항이 궁금하시다면 아래의 공식 문서를 참고해주세요.
인자 : docs.iamport.kr/tech/imp#param
콜백 : docs.iamport.kr/tech/imp#callback
결론적으로, request_pay 메서드를 호출하고, 결제 결과를 핸들링하는 콜백은 다음과 같은 꼴로 구성될 수 있습니다.
IMP.request_pay({
pg : 'html5_inicis',
pay_method : 'card',
merchant_uid : 'merchant_' + new Date().getTime(),
name : '주문명:결제테스트',
amount : 14000,
buyer_email : 'iamport@siot.do',
buyer_name : '구매자이름',
buyer_tel : '010-1234-5678',
buyer_addr : '서울특별시 강남구 삼성동',
buyer_postcode : '123-456'
}, function(rsp) {
if ( rsp.success ) {
var msg = '결제가 완료되었습니다.';
msg += '고유ID : ' + rsp.imp_uid;
msg += '상점 거래ID : ' + rsp.merchant_uid;
msg += '결제 금액 : ' + rsp.paid_amount;
msg += '카드 승인번호 : ' + rsp.apply_num;
} else {
var msg = '결제에 실패하였습니다.';
msg += '에러내용 : ' + rsp.error_msg;
}
alert(msg);
});
3-3. 거래 결과 검증
거래가 성공적으로 이루어졌지만, 추가적인 검증을 할 필요가 있습니다.
결제 요청은 한국의 법적 문제상 브라우저에서 요청하게 되는데, 이 때문에 가능성이 낮긴 하지만 브라우저의 개발자 도구를 켜서 자바스크립트를 통해 결제 금액 등을 위변조할 수 있기 때문입니다. 따라서 결제가 완료되었다면, 변조되지 않았는지 확인해야 합니다.
검증해야 하는 사항은 서비스의 목적에 따르지만 기본적으론 아래 두 사항을 검증합니다.
(1) 결제되었어야 하는 제품의 금액과 결제된 금액이 같은가?
(2) 실제 결제가 최종적으로 완료가 되었는가?
이러한 검증은 앞서 살펴본 결제 결과 객체(rsp)와 아임포트에서 제공하는 api를 조합하여 진행할 수 있습니다.
아임포트에서 제공하는 REST API는 단순 문서가 아닌 Swagger로 작성되어 있어 직접 테스트할 수도 할 수도 있습니다.
이 문서에 근거하면, /payments/{imp_uid}를 통해 아임포트 고유번호로 결제내역을 확인할 수 있고,
이 값을 여러분의 서버에 저장된 결제 결과, 혹은 상품 금액과 비교하면 됩니다.
status == 'paid' && amount == {결제되었어야 할 금액}
최종 정리
1. 아임포트 가입 및 가맹점 번호 확인하기
2. 클라이언트단에 jquery와 import을 cdn 방식으로 추가하기
3. 결제 이벤트가 발생하면 결제 프로세스 진행하기
3-1. 가맹점 식별을 위해 IMP 객체 init 하기
3-2. request_pay 메서드를 통해 결제 진행하기 + 콜백 함수를 통해 적절한 처리하기
3-3. 거래 결과 검증
추가적인 정보들
* 아임포트는 React, Android, Flutter, 워드프레스 등 매우 다양한 환경에서의 서비스를 사용할 수 있도록 추가적인 모듈을 추가적으로 제공하고 있고, 모듈이 필요 없는 경우에는 예시를 제공하고 있습니다.
예를 들면,
flutter(모듈) : github.com/iamport/iamport_flutter
react-native(네이티브 모듈) : github.com/iamport/iamport-react-native
react(예시) : github.com/iamport/iamport-react-example
* 클라이언트 단에서 결제를 처리한 후 이후 정보 관리를 직접 REST API를 이용하여 직접 관리하실 수도 있으시지만 아임포트를 이용 중인 수많은 고객들의 코드를 참고하실 수도 있고, 이러한 코드를 기존 서버에 추가하는데 부담을 느끼신다면 결제 서비스만 별도로 담당하는 micro server를 두실 수도 있습니다.
go : github.com/mangoplate/go-iamport
python : github.com/iamport/iamport-rest-client-python
java : github.com/iamport/iamport-rest-client-java-hc
더 많은 코드 예시들은 iamport의 github에서 확인하실 수 있습니다!
아임포트 정보 resource)
공식 홈페이지 : www.iamport.kr/
github : github.com/iamport
- iamport manual : github.com/iamport/iamport-manual
api 문서(import API) : api.iamport.kr/
docs(아직 미완성. github의 매뉴얼과 병행하여 참고할 것) : docs.iamport.kr/
'미분류 > 💰 Import, fin-tech' 카테고리의 다른 글
| PCI DSS (0) | 2021.04.23 |
|---|---|
| 전자 결제 서비스 제공 업체 탐색 (0) | 2021.03.31 |
| 아임포트 인증 결제(일반적인 결제) in Web (0) | 2021.02.01 |
| 그래서 무슨 PG를 써야 하나 (0) | 2021.02.01 |
| 결제 프로세스에 대하여 (이것이 k-결제 프로세스이다) (0) | 2021.02.01 |
