결제 프로세스

huni_·2022년 7월 7일

React 설치

목록 보기

13/16

우리가 인터넷을 통해 옷을 구매하는 과정은

실제로 아래와 같습니다.

구매자가 구입할 옷에 대한 정보와 금액을 판매자에게 전달

판매자는 전달받은 금액을 PG사에게 결제해줄 것을 요청

PG사는 요청받은 정보를 은행사에게 다시 결제 요청

은행사는 요청받은 금액을 구매자의 계좌에서 출금 후 PG사로 전달

PG사는 판매자에게 금액을 전달 (일정량의 수수료를 제외)

판매자는 금액 확인 후, 구매자에게 옷을 배송

PG는 Payment Gateway 의 줄임말로

구매자와 판매자 사이에서의 이뤄지는 결제를 안전하게 할 수 있도록

대행해주는 역할을 담당합니다.

대표적인 PG사로는

KG 이니시스, KCP, LGU+ 등이 있으며

모바일 환경으로는

KG 모빌리언스, 다날, 카카오Pay 등이 있습니다.

외부 API (아임포트) 사용하기

개발자가 직접 결제 프로세스를 프로젝트에 적용하는 방법은

꽤나 잔인한 과정이 될 수가 있습니다.

결제 연동 시스템을 직접 구현한다면 위와 같은 과정을 거쳐야 하는데

최소 2주 이상은 온전하게 결제 연동에 매달려야 구현이 가능한 수준입니다.

이 복잡하고 까다로운 과정을 대신 해결해주는 결제 외부 API를 사용하면

정말 간단하게 결제 시스템을 구현할 수 있습니다.

아임포트 (I'mport) 는 개발환경과 상관없이

원하는 PG사와의 결제시스템을 연결시켜주는 결제 API 서비스입니다.

실제로 아임포트가 제공하는 API를 사용하면

PG사와의 연결 과정은 모두 아임포트가 대신 처리해주기 때문에

복잡한 결제환경을 직접적으로 구현할 필요가 없어집니다.

1. 아임포트 초기 설정

아임포트를 사용하기 위해서는

아임포트 아이디가 필요합니다.

아임포트 홈페이지로 접속해주세요.

개발자를 위한 무료 결제연동 API, 아임포트

페이지 접속 후,

상단 오른쪽에 있는 대시보드 를 클릭해 로그인 화면으로 들어갑니다.

아이디가 없는 경우 회원가입을 통해 아이디를 생성하고

로그인을 해주세요.

아임포트에 로그인을 하게 되면

관리자 페이지에 접속할 수 있게 됩니다.

관리자 페이지에서는

아임포트를 사용하기 위한 기본적인 설정부터

아임포트가 연결시켜준 PG사의 정보와 실제 결제내역까지 확인할 수 있습니다.

아임포트를 사용하기 위해서는

먼저 사용할 PG사를 선택해야 합니다.

관리자 페이지에서

시스템 설정 - PG설정 (일반결제 및 정기결제) 페이지로 이동합니다.

PG 설정 페이지에서는

결제에 필요한 PG사를 설정할 수 있습니다.

PG사 선택창을 클릭하면 여러종류의 PG사들이 나타나는데

KG이니시스(웹표준결제창) 을 선택합니다.

❗ 위의 화면과 달리 기본 PG사가 없으시다면
왼쪽 목록에 있는 PG사 추가 버튼으로 추가하셔야 합니다.

PG설정으로 PG사를 설정할 경우

앞으로 이뤄지는 모든 결제과정에서는

해당 PG사로 연결되어 결제가 이루어지게 됩니다.

❗ 반드시, 테스트모드에 체크가 되어 있는지 확인해주세요.
테스트모드가 아닌 경우에는 실제로 결제가 이루어집니다.

(KG이니시스 PG사 테스트의 경우 결제를 하면 계좌에서 금액이 출금되지만
당일 자정 이전에 모두 결제가 취소되어 환급됩니다.)

2. 아임포트 적용

📖 이 내용은 아임포트 DOCS 페이지에도 잘 설명되어 있습니다.
해당 페이지를 참고해보세요!

https://docs.iamport.kr/implementation/payment

아임포트를 직접 프로젝트 안에서 사용하기 위해서는

아임포트 라이브러리를 head 부분에 추가해줘야 합니다.

HTML의 경우 직접 head 태그 안으로 추가할 수 있지만

next JS 에서는 HTML에 직접 접근하기가 어렵기 때문에

next JS에서 제공하는 Head 태그를 이용해 적용할 수 있습니다.

next js에서 head보다는 script를 사용하는 것을 권장하고 있습니다.

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>

아임포트 라이브러리는 결제기능을 사용할 페이지의 return 안으로

앞서 추가한 Head 태그로 감싸서 추가해주시면 됩니다.

라이브러리를 추가했다면

아임포트를 프로젝트에서 사용하기 위해서는

사용하려는 아임포트의 식별코드를 설정해줘야 합니다.

아임포트를 제어하려면

window.IMP 으로 불러올 수 있습니다.

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

가맹점 식별코드는

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

가맹점 식별코드에 있는 식별코드를

window.IMP.init에 넣어 설정합니다.

식별코드까지 설정이 완료됐다면

이제 아임포트의 결제창을 불러올 수 있습니다.


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

            // 결제 실패 로직
        }
   });