2. 포트원 결제 요청
결제 솔루션(포트원)
강의 정리
포트원 통합 결제 솔루션
예전에는 아임포트였고 지금은 포트원으로 이름을 바꾼 서비스다. 여러 PG사를 하나의 API로 사용할 수 있게 해주는 통합 결제 솔루션이다.
결제 프로세스
클라이언트에서 결제 요청을 한다.
클라이언트에서 결제 결과를 받는다.
결제 금액을 위변조 검증한다. 개발자 도구에서 금액을 위변조 할 수 있기 때문에 서버에서 검증해줘야 한다.
결제 완료 -> 서버에서 성공하면, 클라이언트에서 주문 완료 페이지로 이동한다.
포트원에 가입하고, 관리자 콘솔에서 기본적인 세팅을 진행한다.
실 연동, 테스트중 선택.
PG사 선택 -> 실제로는 비즈니스 전략에 따라 선택해야 할 듯.
"아임포트 결제모듈"을 누르면 PG사에 따라 선택지가 나온다.
"+ 추가" 버튼을 누르면 상세 정보를 입력할 수 있다. 테스트시에는 그냥 "저장"
테스트하기에는 PG사를 카카오페이로 하면 부담없이 테스트할 수 있다. PG사의 상점아이디, 포트원의 상점아이디를 기록해두고 시작한다.
결제 요청
포트원 V2 SDK가 베타로 출시되었지만, V1 사용할 것. V2는 npm으로도 설치할 수 있다. V1은 script로만 사용이 가능하다.
TypeScript와 사용하는 경우, window.IMP.init(...)과 같이 사용해야 하는데 그러면 window에 타입을 잡아줘야 한다. 그 대신에 Reflect.get을 활용할 것. 초기화 작업은 딱 1번만 실행해야 한다.
main.tsx와 같은 진입점에서 실행한다. 코드에서 상수로 관리되는 것들은 의도를 드러내주는 것이 좋다. 매직 넘버는 지양해야한다. API Key값들은 특히 환경변수로 관리해주는 게 좋다. 환경변수는 또한 local, development, production으로 구분하면 좋다. 환경변수는 새로 추가하면, 일반적으로는 서버를 재시작해줘야한다.
포트원 API를 연동할 때 예제 코드를 그대로 사용하지 않는다. ApiService처럼 한번 래핑해서 사용한다. 외부 라이브러리를 사용할 때는 대부분 한번 자체적으로 래핑해서 쓰는 게 커스텀하기 좋은 것 같다.
결제는 IMP.request_pay를 호출해서 진행한다. 매개변수로 결제에 대한 정보를 넘겨줘야한다. pg: 상점 ID merchant_uid: 서비스를 제공하는 측에서 주문번호를 어떻게 관리할 것인지에 따라 생성한다. 보통은 date + time(milliseconds) + random값을 조합한다. 제품명은 만약 여러개를 구매하는 경우에는 맨 처음 아이템의 이름 외 n건 이런식으로도 구현한다. 이름만 넣어도 무관하다. 강의 중간에 나오는 추상화 레벨을 맞추는 과정. 코드를 읽고 이해하기 쉽게 작성하려면 추상화 레벨을 잘 맞춰야 한다.
주문 폼을 모두 입력해야만 결제 버튼을 활성화 시켜놓은 로직이 있을 때, 이 상황에서 테스트하려면 폼을 입력하는 시간이 너무 오래 걸린다. 이 때 저번 시간에 언급했던 e2e 테스트를 활용한다. PG사를 카카오 페이로 선택한 경우에 결제 버튼을 클릭하면 QR코드를 찍을 수 있는 창이 뜬다. 핸드폰으로 QR코드를 찍고 실제로 결제를 완료하면, 브라우저에서도 결제가 완료된다. 이 과정은 결제 프로세스에서 클라이언트 단에서만 일어나는 1~2단계이고 실제로는 서버에 결제 정보를 전달하여 위/변조를 확인하고, DB에 데이터를 저장하고, 그 후에 문제가 없으면 주문 완료가 되었다고 출력한다. 결제를 붙이는 것 까지는 쉬운데, 추가적인 것들이 고려해야할 것들이 많을 것 같다.
Last updated