결제 프로세스
결제 서비스를 웹마다 적용하기엔 굉장히 복잡한 작업이 아닐수 없다.
본인인증부터 은행사까지 해야할 일이 정말 많다.( 2주는 매달려야할 정도로 하셨다.)
하지만아임포트( https://www.iamport.kr/ )의 API를 사용한다면 간단하게 결제시스템을 구현할 수 있다.
다만 아임포트에서도 심사가 한달정도 걸리기 때문에 미리 해두는게 좋다.아임포트가 해주는 역할?
- 개발환경과 상관없이 원하는 PG사와의 결제 시스템을 연결 시켜주는 결제 API서비스
PG사란?
구매자와 판매자사이에서의 이뤄지는 결제를 안전하게 할 수 있도록 대행해주는 역할을 담당한다.
대표적인 PG사
PCKG 이니시스, KCP, LGU+
모바일KG 모빌리언스, 다날, 카카오Pay
- 아임포트는 결제 대행사와 다중으로 연동을 시켜줘서 고객의 다양한 결제옵션을 제공한다
개발자 입장에서도 결제 대행사별 라이브러리 서버를 설치하는 대신 코드 하나로 결제 연동을 시켜 줄 수 있어서
시간절약 및 최적화가 가능해진다.
ex) 카카오페이, 신용카드, 모바일결제, 무통장 입금 등등
- 실제 코드 구현으로 복잡한 정기결제도 적용가능하다.
- 관리자 모드를 통해 쉽게 결제내역을 관리할 수 있다.
아임포트 적용하기
💻 결과물
먼저 아임포트 사이트에서 회원가입을 해서 아이디를 만든다.
그리고 관리자 페이지에서 PG사 설정을 해준다. 이번에는 KG이니시스를 적용해 보았다.💻 코드리뷰
payment
Next.js에서head를 쓰기위해Head를import해준다.
IMP란 변수를 모르기때문에IMP라는 변수를 알려준다.import Head from "next/head"; declare const window: typeof globalThis & { IMP: any; };
- 아임포트의 코드를 가져온 것 이다. 다만
React,Next.js의 환경이다보니 수정을 해주었다.export default function PaymentPage() { function onClickPayment() { const IMP = window.IMP; // 생략 가능 IMP.init(자신의 가맹점 식별코드,); // 예: imp~ // IMP.request_pay(param, callback) 결제창 호출 IMP.request_pay( { // param pg: "html5_inicis", pay_method: "card", // merchant_uid: "ORD20180131-0000011", // 회사마다 주문번호 만드는 규칙이 있음 name: "32인치 모니터", amount: 100, buyer_email: "as5427072@gmail.com", buyer_name: "송경환", buyer_tel: "010-4242-4242", buyer_addr: "서울특별시 금천구 시흥대로", buyer_postcode: "08608", }, function (rsp: any) { // callback if (rsp.success) { console.log(rsp); // rsp안에 결제 정보가 다 담겨져있다. // 이것을 이용해 백엔드에 넣어주면 이용자의 결제내역을 확인할 수 도있고 // 포인트제도 등 을 적용할 수 있다. // mutation () => createPointTransactionOfLoading // ..., // 결제 성공 시 로직, // ... } else { // ..., // 결제 실패 시 로직, // ... } } ); } return ( <> <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.2.0.js" </script> </Head> 결제금액 : <input type="text" /> <br /> <button onClick={onClickPayment}>결제하기</button> </> ); }테스트용 아임포트는 매일 밤 11시~12시쯤에 자동적으로 일괄 환불 처리되기 때문에 걱정할 필요없다.
