[API] 아임포트(iamport) 활용하여 결제 페이지 띄우기 [쉽고 빠른 PG 결제 연동 API, 아임포트(iamport)]

[API] 쉽고 빠른 PG 결제 연동 API, 아임포트(iamport) [아임포트 회원가입, 아임포트 (구)관리자콘솔]

- 결제 API, 아임포트(iamport) 1. 아임포트(iamport)란? 무료로 PG 결제를 연동해주는 결제 연동 API PG(Payment Gateway)란? 온라인에서 상품이나 서비스를 결제할 때 다양한 수단으로 결제하도록 지원하는

yermi.tistory.com

- 아임포트(iamport) 활용하여 결제창 띄우기

아임포트 가입에 이어, 이번엔 아임포트를 활용하여 결제창을 띄어보려고 한다.

1. 아임포트 라이브러리 추가하기

아임포트 적용하려는 페이지에 제이쿼리와 아임포트 라이브러리를 추가한다.
(아임포트 버전 확인은 여기에서)

<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<!-- iamport.payment.js -->
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-{SDK-최신버전}.js"></script>

2. 결제 준비하기

페이지에 가맹점 식별코드를 이용하여 IMP 객체를 초기화한다.

    var IMP = window.IMP; // 생략 가능
    IMP.init("{가맹점 식별코드}"); // 예: imp00000000

- 가맹점 식별코드 확인 방법

[API] 쉽고 빠른 PG 결제 연동 API, 아임포트(iamport) [아임포트 회원가입, 아임포트 (구)관리자콘솔]

yermi.tistory.com

3. 결제 요청하기

필요한 결제 정보로 IMP.request_pay를 호출하여 결제 요청을 하면 PG사의 결제 페이지가 열린다.

<button onclick="requestPay()">결제하기</button>
  ...
  <script>
    function requestPay() {
      // IMP.request_pay(param, callback) 결제창 호출
      IMP.request_pay({ // param
          pg: "html5_inicis",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "노르웨이 회전 의자",
          amount: 64900,
          buyer_email: "gildong@gmail.com",
          buyer_name: "홍길동",
          buyer_tel: "010-4242-4242",
          buyer_addr: "서울특별시 강남구 신사동",
          buyer_postcode: "01181"
      }, function (rsp) { // callback
          if (rsp.success) {
              ...,
              // 결제 성공 시 로직,
              ...
          } else {
              ...,
              // 결제 실패 시 로직,
              ...
          }
      });
    }
  </script>

- 결제창 호출 테스트

<head>
	<title>iamport</title>
	<!-- jQuery -->
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
	<!-- iamport.payment.js -->
	<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script>
</head>
<body>

<button onclick="requestPay()">결제하기</button>

<script>
	var IMP = window.IMP;
	IMP.init("가맹점 식별코드"); // 예: imp00000000
	
    function requestPay() {
      // IMP.request_pay(param, callback) 결제창 호출
      IMP.request_pay({ // param
          pg: "html5_inicis",
          pay_method: "card",
          merchant_uid: "ORD20180131-0000011",
          name: "노르웨이 회전 의자",
          amount: 64900,
          buyer_email: "gildong@gmail.com",
          buyer_name: "홍길동",
          buyer_tel: "010-4242-4242",
          buyer_addr: "서울특별시 강남구 신사동",
          buyer_postcode: "01181"
      }, function (rsp) { // callback
          if (rsp.success) {
              // 결제 성공 시 로직
          } else {
              // 결제 실패 시 로직
          }
      });
    }
  </script>
</body>
</html>

- 참고자료

[결제연동] 일반결제

일반결제 연동하기 이 문서는 일반 결제 기능을 구현하는 방법을 설명합니다. STEP1아임포트 라이브러리 추가하기 client-side 주문 페이지에 아임포트 라이브러리를 추가합니다.최신 라이브러리

docs.iamport.kr