배달의민족에서 주문을 하거나, 쿠팡에서 물건을 살때 우리는 모두 웹사이트나 어플리케이션에서 결제를 한다.
결제도 예전처럼 어렵고 여러가지 많이 입력해야 하는것이 아니라 터치 몇번만으로 아주 간편하게 결제가 된다.
또한 넷플릭스나 유튜브 프리미엄등을 이용할때 매월 정해진 금액이 결제되는 정기결제 시스템도 있다.
이러한 결제시스템을 구축하려면 어떻게 해야할까?
PG (PaymentGateway)
인터넷에서 옷을 구매한다고 가정해보면 과정은 다음과 같이 이루어진다.
- 구매자가 구입할 옷에 대한 정보와 금액을 판매자에게 전달
- 판매자는 전달받은 금액을 PG사에게 결제해줄 것을 요청
- PG사는 요청받은 정보를 은행사에게 다시 결제 요청
- 은행사는 요청받은 금액을 구매자의 계좌에서 출금 후 PG사로 전달
- PG사는 판매자에게 금액을 전달 (일정량의 수수료를 제외)
- 판매자는 금액 확인 후, 구매자에게 옷을 배송
은행과 직접적으로 연결하는것이 아닌 PG사를 통해서 결제를 진행한다.
이 PG사에 연결을 하려면 어떻게 해야할까?
대표적인 PG사는 KG 이니시스, KCP, LGU+ 모방일 환경으로는 KG 모빌리언스, 다날, 카카오Pay 등등 정말 다양한 PG사가 존재한다.
먼저 PG사에 직접등록하려면 서류작업 절차가 필요하며 서류작업절차가 2주정도 소요된다.
서류작업에 통과되면 이제 개발절차로 들어가야 하는데...
정말 복잡한 작업이며 이 과정은 결제 개발에 몰두를 한다고 해도 최소 2주가 걸리는 작업이라고 한다.
외부결제 API i'mport
i'm port 테스트를 해보기 위해서는 결제에 요청할 impUid값이 필요하다.
i'm port docs에 자세히 나와 있으니 참고해서 진행하면 된다.
예제 코드
<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>
클릭 event를 만들고 위 예제코드를 진행하면 된다.
하지만 위 예제는 html 코드이기때문에 React 환경에 적용하기 위해서는 조금 바꿔준다.
import Head from "next/head"; declare const window: typeof globalThis & { IMP: any; }; export default function PaymentPge() { function onClickPayment() { console.log(123); const IMP = window.IMP; // 생략 가능 IMP.init("imp49910675"); // 예: imp00000000 // IMP.request_pay(param, callback) 결제창 호출 IMP.request_pay( { // param pg: "html5_inicis", pay_method: "card", name: "손목시계", amount: 100, buyer_email: "gildong@gmail.com", buyer_name: "홍길동", buyer_tel: "010-4242-4242", buyer_addr: "서울특별시 강남구 신사동", buyer_postcode: "01181", // m_redirect_url : '{결제 완료 후 리디렉션 될 URL}' // 예: https://www.my-service.com/payments/complete }, function (rsp) { // callback if (rsp.success) { console.log(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> </> ); }
script로 불러와야 하기때문에 next/head를 import 해준다.
i'mport docs에 있는 merchant_uid: "ORD20180131-0000011" 부분은 제거를 해야 테스트 결제가 가능하니 지워준다.
onClick으로 결제하기 버튼에 바인딩해주면 결제하기창이 나타난다.
테스트 결제는 결제한날 12시가 넘어가면 자동취소되며 관리자 모드에서 확인하고 바로 취소도 가능하다.
관리자콘솔 체험하기로 들어가.
결제승인내역을 클릭하면 내역들을 확인할수 있다.
