2. 포트원 결제

실습 레포

포트원은 여러 PG사를 하나의 깔끔한 API로 사용할 수 있게 해주는 통합 결제 솔루션.

예전에는 아임포트란 이름으로 서비스했다.

가볍게 무료로 시작할 수 있고, 복잡한 심사 과정을 거치지 않아도 바로 결제 기능을 테스트할 수 있다.

현재 회사에서도 사용중이다.

인증결제

결제 프로세스

1. 결제 요청(F/E에서 요청) -> 자주 보던 결제창이 뜬다.

2. 결제 결과 확인 (F/E에서 결과 받음)

3. 결제 금액 위변조 검증 → B/E로 결제 결과를 전송하면 B/E에서 처리

4. 결제 완료 → B/E에서 성공하면 F/E는 주문 완료 페이지로 이동.

결제 연동 > 결제대행사 설정 및 추가

1. 실 연동, 테스트 중 선택 → 우리는 “테스트”를 선택.

2. PG사 선택 → 원하는 것 아무거나.

3. “아임포트 결제모듈”을 누르면 우리가 선택한 PG사에 따라 적절한 선택지가 나옴.

4. “+ 추가” 버튼을 누르면 상세 정보를 입력할 수 있는데, 우리는 테스트라서 그냥 “저장” 버튼을 누르면 됨.

5. “PG상점아이디” 항목을 클릭하면 해당 정보가 복사된다. ⇒ 챙겨두자!

PG사를 “카카오페이”로 선택하면 부담 없이 가장 쉽게 테스트할 수 있다.

PG사가 뭔가요?

상점 ・ 계정 관리 > 내 식별코드 ・ API Keys

→ “가맹점 식별코드” 부분을 클릭하면 해당 코드가 클립보드로 복사된다. ⇒ 챙겨두자! (PG상점아이디도)

v2는 npm으로도 추가 가능.

장점이 많지만 v1부터 알아보자.

타입

타입에 대한 정보

해당 초기화 작업을 1회 이상 처리되지 않도록 유의해야한다.

Reflect.get(window, "IMP").init("가맹점_식별코드");

// index.tsx
.
.
.

function index() {
  Reflect.get(window, "IMP").init("가맹점_식별코드");

  const element = document.getElementById("root");
  if (!element) {
    return;
  }

.
.
.

환경 변수

API_BASE_URL=https://shop-demo-a
PORTONE_IMP=<가맹점 식별코드>
PORTONE_PG_CODE=<PG사 코드>.<PG상점아이디>

활용

Reflect.get(window, "IMP").init(process.env.PORTONE_IMP);

서버 다시 시작해야 env 반영됨 !

중요 !!

Axios와 마찬가지로 우리 코드에서 포트원을 그대로 사용하지 않도록, PaymentService를 만든다.

서버로 결제 결과를 보내기 전까지의 단계까지 왔다.