✍🏻 [Code Camp_TIL] 29일차: 결제 프로세스, 포트원, webhook notification

code_J·2023년 4월 23일

CodeCamp TIL

TIL

목록 보기

35/41

결제

결제 프로세스 이해

PG사

기업이 카드사에게 직접 승인을 받아 결제 시스템을 구축하는 방법은 비용과 시간 면에서 비효율적이다. 따라서 최종적으로 결제가 이루어지는 카드사와 기업 간에 결제를 대행해주는 회사(PG사: payment gateway)가 있고, 보통 PG사를 통해서 결제를 진행한다.

PG사의 가이드에 맞춰서 결제 시스템을 개발하면 여러 카드사들에 맞춰서 여러 번 개발 작업을 진행할 필요가 없어진다.

PG사는 기업들에게 개발 가이드를 전달하고, 주로 asp, php, jsp 등의 언어로 작성되어 있다. 하지만 가이드가 수백 페이지 정도의 분량이기 때문에 작업에 상당한 시간이 걸린다.

결제 솔루션

이러한 작업을 대신해주는 결제 솔루션 업체도 등장했다. PG사마다 다른 개발 가이드를 갖고 있어서 하나의 PG사와 계약을 하고 결제 시스템을 개발한 후에는 다른 업체로 옮기기 어렵다.

결제솔루션(결제 API)업체는 이러한 문제점을 보완해준다. 결제 솔루션 업체를 이용하면 개발환경과 상관없이 원하는 PG사와의 결제시스템을 연결시킬 수 있다.

중견, 중소 규모 기업의 경우 PG사와 직접 계약하는 것보다 결제 솔루션 업체를 이용하는 것이 효율적이다.

결제 실습에서도 결제 솔루션 업체 중 하나인 포트원(구 아임포트)을 이용했다. 포트원을 이용하는 경우, 사용자가 결제를 통해 포인트를 충전하는 과정은 다음과 같다.

사용자가 브라우저에서 충전하기 버튼을 클릭

충전하기 창에서 원하는 금액을 선택하고 결제 버튼 클릭

포트원에서 제공하는 Rest-API를 이용해 결제 요청

결제 성공 시 해당 결제에 대한 imp_uid와 결제 금액 등의 데이터를 돌려받음

성공한 결제 정보를 백엔드 서버로 mutation

db의 유저 포인트 정보에 결제 내역을 업데이트

위와 같은 결제 과정 중 포트원은 다음과 같은 역할을 한다.

일정의 중요성!

창업할 때 결제 승인 기간은 어느 정도로 잡는게 좋을까?

최소 1달은 잡아야 한다. 포트원을 사용한다고 해도 각각의 PG사와 카드사에게 승인 및 심사를 받아야 하기 때문이다!

승인 일정: PG사 계약승인(1주) + 카드사 심사(2주) => 최소 3주 이상

외부 API(포트원) 사용하기

포트원 초기 설정

포트원 계정 만들기

테스트 모드로 설정

사용할 PG사 선택

웹훅노티피케이션

특정 이벤트가 발생했을 때 타 서비스나 응용 프로그램으로 알림(notification)을 보내는 기능

흔히 아는 무통장 입금을 구현하려면 어떻게 해야 할까? 포트원에서는 다음과 같이 무통장 입금이 진행된다.

사용자가 무통장 입금을 선택

아임포트에서 제공하는 API를 이용해 가상 계좌 생성

결제 중이던 웹브라우저를 실행 종료하고, 가상 계좌를 발급한 은행 서비스에 접속

가상 계좌 유효기간 내에 입금 완료

하지만 여기서 문제가 발생한다. 브라우저에서 결제가 이루어지는 것이 아니기 때문에 결제 완료 시점에 결제 금액과 imp_uid를 받아서 백엔드로 보내줄 수 없다. 이 작업을 위해 포트원은 웹훅노티피케이션(Webhook notification)을 제공한다.

웹훅노티피케이션을 활용하면 다음과 같은 기능을 구현할 수 있다!

1. 가상계좌를 이용한 무통장 입금
2. 결제 취소
3. 예약 결제
4. 환불

이 외에도 포트원에서는 영수증, 정기 예약 결제 등 다양한 기능을 가진 Rest-API를 제공한다. Rest-API 가이드를 참고하면 좋다!

포트원 적용

포트원 DOCS 페이지와 깃허브에도 자세하게 설명되어 있다.

포트원을 직접 사용하기 위해서는 포트원 라이브러리를 head 부분에 추가해줘야 한다. Next.js에서는 HTML에 직접 접근하기 어렵기 때문에 Next.js에서 제공하는 Head 태그를 import해야 한다.

또한, 포트원 라이브러리를 추가하기 위해 Head 태그로 script 태그를 감싸서 결제 기능을 사용할 페이지의 return 안에 넣어주면 된다.

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>

그 후에는 사용하려는 포트원의 가맹점 식별코드를 설정해야 한다. 그리고 window.IMP로 포트원을 불러와서 제어할 수 있다.

const IMP = window.IMP;
IMP.init("가맹점 식별코드");

<br/><br/>

가맹점 식별코드는 포트원 관리자 페이지의 시스템 설정 -> 내 정보 -> 가맹점 식별코드에서 확인할 수 있다.

나머지 코드를 식별코드를 작성했던 페이지 안에 새로 추가해준다.


  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('결제에 실패했습니다.');
            // 결제 실패 로직
        }
   });