PortOne(=아임포트) 결제 모듈

---

사용이유

쇼핑몰 프로젝트를 진행하며 결제 모듈이 필요했다. 구글링을 해보니 가장 많이 언급된 것이 아임포트였다.

아임포트는 현재 PortOne이다. PortOne은 API 문서도 잘 작성되어 있어 쉽게 따라 할 수 있었고, 관리자 콘솔도 편리하게 되어 있어 PortOne V2 결제 모듈을 사용하기로 결정했다.

포트원 결제 연동 Docs

---

사용 방법

인증 결제 연동하기

1. 포트원 SDK 설치하기

이번 프로젝트는 간단하게 tomcat과 JSP를 사용한 프로젝트 였기 때문에 script 요소로 결제 모듈을 호출하였다.

JavaScript 코드

<script src="https://cdn.portone.io/v2/browser-sdk.js"></script>

---

2. 결제 요청하기

JavaScript 코드

⭐ 필요 데이터
    1. storeId : 상점 Id  - 관리자 콘솔 설명 참조
    2. channelKey : 채널 Id - 관리자 콘솔 설명 참조
    3. paymentId : 주문번호 - 임의로 막 작성
    4. orderName : 결제창에 출력되는 상품 이름
    5. totalAmount : 결제할 가격
    6. currency : 결제 통화
    7. payMethod : 결제 방식

async function requestCardPayment(data) {
	const response = await PortOne.requestPayment({
		storeId : PaymentConfig.storeId,
		channelKey : PaymentConfig.channelKey,
		paymentId : `PAYMENT`+data.or_idx,
		orderName : "[히트상품] "+data.pd_name,
		totalAmount : data.price,
		currency : "CURRENCY_KRW",
		payMethod : "CARD",
	});
    
	if (response.code != null) {
		return alert(response.message);
	}
    
    // 방금 주문한 결제 내용이 PAID 일 때 결제가 잘 이루어진것이다.
    if(getPaymentByOrIdx("PAYMENT"+data.or_idx).status == "PAID") {
		return response;
	}
};

결제 화면

---

3. 결제 단건 조회

참고 API (이미지 클릭 시 API 페이지로 이동)

JavaScript 코드

function getPaymentByOrIdx(idx) {
	const settings = {
	  async: false,
	  crossDomain: true,
	  url: 'https://api.portone.io/payments/'+idx,
	  method: 'get',
	  headers: {
	    'Content-Type': 'application/json',
    	Authorization: 'PortOne '+ PaymentConfig.secretKey
	  }
	};

	$.ajax(settings).done(function (response) {
		result = response;
	});
	
	return result;
};