결제 프로세스
결제의 역사
1번째 역사 - 카드사 이용 방식
-
각각의 카드사에게 승인을 받아 결제 시스템을 구축하는 방법
-
신한카드, 하나카드, 농협카드 등등 현존하는 다양한 카드 회사들은 지원하는 결제 방법이 전부 다 다름
-
이렇게 모든 경우를 고려하여 결제 시스템을 개발하려면 인건비와 시간이 많이 소요되며, 실제 비즈니스 환경에서는 이러한 방식으로 개발하는 것이 불가능
2번째 역사 - PG (Payment Gateway) 이용 방식
-
각각의 카드사와 연결하는 작업을 대신해주는 PG사를 통해 결제 시스템을 구축하는 방법
-
대표적인 PG사에는 NHN, 나이스페이, KG이니시스 등이 있음
-
PG사는 카드사들과 미리 의논해서 결제를 연결하는 방법을 결정해놓고, 통합해서 관리할 수 있는 대행 시스템을 구축
-
해당 PG사의 가이드에 맞추어 결제 시스템을 개발하면 여러개의 카드 회사들에 맞추어 여러번의 개발 작업을 진행할 필요 X
-
이 가이드를 활용하여 필요한 기능을 구현하면 되지만 이 작업도 상당한 시간이 소요되는 작업
3번째 역사 - 결제 솔루션 방식
-
PG사의 가이드에 맞추어 결제 시스템을 구축하는 작업을 대신 해주는 결제 솔루션 업체 등장
-
PG사마다 다른 개발 가이드를 가지고 있다 보니 한 업체와 거래하는 시스템을 구축한 뒤에는 다른 업체로 옮기기가 어려웠고, 이러한 문제점을 보완해주는 업체로 결제 시스템 구축 작업을 대신 해주는 결제 솔루션 업체 등장
-
결제 솔루션 업체를 이용하면 개발환경과 상관없이 원하는 PG사와의 결제시스템을 연결시킬 수 있음
-
대표적인 결제 솔루션 업체는 포트원(아임포트), 부트페이 등이 있음
-
중견, 중소 규모 기업의 경우 PG사와 직접 계약하는 것 보다 결제 솔루션을 이용하는 것이 효율적
+a) 결제과정 예시 - 포인트 충전 시 결제 과정 [아임포트 이용 시]
-
사용자가 브라우저에서 충전하기 버튼 클릭
-
충전하기 창에서 원하는 금액 선택하고 결제버튼 클릭
-
아임포트 측에서 제공하는 rest-API 이용해서 결제 요청
-
이후 요청이 성공하면(결제가 성공하면) 해당 결제에 대한 imp_uid, 결제 금액 등등의 data를 응답으로 받음
-
응답으로 받은 data를 백엔드 서버로 mutation
-
DB의 유저 정보내에서 포인트 정보에 대해 결제내역을 업데이트
외부 API (아임포트) 사용해보기
- 아임포트 사이트 (현재는 포트원) 로 접속해서 회원가입 후, 결제연동 항목으로 들어가서 테스트 모드로 결제를 연동하고 시험해 볼 수 있음
*자세한 항목은 관련 DOCS(콘솔 가이드) 참고
import Head from 'next/head';
// 최상단에 next/head 의 Head 태그 호출
<Head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>
</Head>- 아임포트 라이브러리를 제공하는 script 태그 형식으로 다운받아 옴
const IMP = window.IMP;
IMP.init("가맹점 식별코드");
- 이후 DOCS 에서 설명하는 대로
window.IMP로 해당 IMP 안에 부여받은 식별코드를 입력
IMP.request_pay({
pg: "html5_inicis",
pay_method: "card",
//merchant_uid: "결제 번호",
name: "아이리버 무선 마우스 외 1개",
amount: 10000,
buyer_email: "이메일@gmail.com",
buyer_name: "홍길동",
buyer_tel: "010-4242-4242",
buyer_addr: "서울특별시 강남구 신사동",
buyer_postcode: "01181",
m_redirect_url : "/"
}, function (rsp) { // callback
if (rsp.success) {
alert('결제가 성공했습니다.');
// 결제 성공 로직
} else {
alert('결제에 실패했습니다.');
// 결제 실패 로직
}
});-
이후 다음과 같이 코드를 작성하여 함수 안에 추가하면, 해당 함수가 실행되었을 때 지정한 PG사의 결제페이지가 로드되면서 사용할 수 있게 됨
-
아래의 조건문에는 결제 성공과 실패 시 실행 될 로직을 지정해 줄 수 있음
-
결제 성공 시
function (rsp)로 인자에 들어오는 rsp를 조회해 보면 위와 같이 객체형태로 data 가 담겨있는 것을 확인할 수 있음
-
여기서 필요한 정보들만 따로 뽑아 백엔드로 Mutation 을 하게 되면, DB의 유저 정보내에 결제 내역을 반영하여 업데이트 가능
+a) 모바일 결제와 화면전환
-
일반 PC화면에서의 결제와 다르게 모바일 화면에서 결제하기를 클릭하면 결제 창이 로드되면서 아예 URL 자체가 바뀌어 버림
-
따라서 모바일 결제르 구현할 때는 결제가 끝난 후 창이 닫히면, 다시 기존의 페이지로 돌아올 수 있도록 따로 기존 페이지의 URL을 연결해줘야 함
- 기존 작성 코드에
m_redirect_url을 추가해서 결제가 끝나고 창이 닫히면, 다시 지정한 해당 URL로 페이지가 이동되도록 설정
BUT! 이렇게 다시 이동하면 페이지가 새롭게 로드되면서 결제 성공 시 실행되도록 설정한 함수가 동작하지 않기 때문에 [웹훅노티피케이션] 을 이용해서 결제의 결과 data를 백엔드로 전달해줘야 함
