2. 포트원 결제
포트원은 여러 PG사를 하나의 깔끔한 API로 사용할 수 있게 해주는 통합 결제 솔루션.
예전에는 아임포트란 이름으로 서비스했다.
가볍게 무료로 시작할 수 있고, 복잡한 심사 과정을 거치지 않아도 바로 결제 기능을 테스트할 수 있다.
현재 회사에서도 사용중이다.
인증결제
결제 프로세스
결제 요청(F/E에서 요청) -> 자주 보던 결제창이 뜬다.
결제 결과 확인 (F/E에서 결과 받음)
결제 금액 위변조 검증 → B/E로 결제 결과를 전송하면 B/E에서 처리
결제 완료 → B/E에서 성공하면 F/E는 주문 완료 페이지로 이동.
결제 연동 > 결제대행사 설정 및 추가
실 연동, 테스트 중 선택 → 우리는 “테스트”를 선택.
PG사 선택 → 원하는 것 아무거나.
“아임포트 결제모듈”을 누르면 우리가 선택한 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를 만든다.
서버로 결제 결과를 보내기 전까지의 단계까지 왔다.
Last updated