결제 시스템 구현 방법 portone

결제 시스템은 카드사, PG사관계 간의 복잡한 계약이 필요한데 결제 솔루션사를 이용하면 쉽게 결제 시스템을 구현이 가능하다.

대표적인 결제 솔루션사 ) 아임포트⇒ portone으로 이름 변경 , 부트페이

결제과정)

유저가 브라우져에서 결제를 요청하면 결제 솔루션사에서는 결제 완료된 내용을 응답하는데 이 내용을 가지고 DB에 저장해야된다.⇒ 총 결제 금액, 결제 시간등등 을 체크 기능은 별도로 제작해야되기 때문

백엔드에서는 이 결제 완료된 내용을 결제완료사에 한번더 요청하여 확인한다.

---

• 결제승인 과정 : 결제기능은 결제 솔루션사와 이야기를 해야되지만 , 실제 결제를 하기 위해서는 pg회사랑 협의를 해야된다. 때문에 ppt를 제작해야됨 ⇒ pg사는 카드사와 또 협의함 ⇒ 이게 심사과정
• 결제 실패 요인 : 도박…? , 경매…? , 결제 금액 직접 입력과 같은 경우는 심사가 안된다.
• 결제 연동 최소일정 : api연동 다하고 심사 다 받아도 pg사와 계약연동은 1주일 걸리고 카드심사 2주일 등등 3주 정도의 물리적인 시간이 필요하다.

Portone 이용하기

포트원, 온라인 비즈니스를 위한 통합 결제 솔루션

해당 사이트 접속하고 좌측을 보면 다음과 같다.

• 콘솔가이드 ⇒ docs
• 결제연동 ⇒ 설정

---

결제 연동으로 들어가면

내 식별 코드와 API Keys가 존재한다. 클릭하면 아래와 같은 사진이 존재한다.

• 가맹점 식별코드 → 프론트엔드에서 주로 사용
• REST API Key → 백엔드에서 주로 사용
• REST API Secret → 백엔드에서 주로 사용

가맹점 식별코드는 기억하고 있자

---

페이지를 결제 대행사 설정 및 추가를 할 수 있는데 연습할꺼니까 테스트로 하였다.

추가 이후 이름 작성!

---

아임포트에서 이제 라이브러리를 추가해야된다.

https://developers.portone.io/docs/ko/auth/guide/1?v=v1

화면구성부분

<>
  <script src="https://cdn.iamport.kr/v1/iamport.js"></script>
  <button onClick={onClickPayment}>결제하기</button>
</>

내부로직

declare const window: typeof globalThis & {
  IMP: any;
};

  const onClickPayment = (): void => {
    const IMP = window.IMP;
    IMP.init("가맹점코드"); // 예: 'imp00000000a'
    IMP.request_pay(
      {
        // param
        pg: "kakaopay",
        pay_method: "card",
        // merchant_uid: "ORD20180131-0000011",  // 주문번호가 겹치지 않게 해야되고 , 주석으로 할 경우 겹치지 않게 한다.
        name: "맥북", // 상품명
        amount: 100,
        buyer_email: "gildong@gmail.com",
        buyer_name: "홍길동",
        buyer_tel: "010-4242-4242",
        buyer_addr: "서울특별시 강남구 신사동",
        buyer_postcode: "01181",
       // m_redirect_url: "", // 모바일에서 결제시, 페이지 주소가 바뀜, 따라서 결제 끝나고 돌아갈 주소 입력해야됨
      },
      (rsp: any) => {
        // callback
        if (rsp.success) {
          // 결제 성공 시 로직
          console.log(rsp);
          // 백엔드에 결제관련 데이터 넘겨주기  => 뮤테이션 실행
        } else {
          // 결제 실패 시 로직,
        }
      }
    );
  };