포트원 결제 연동 플로우 정리 [노마드코더]

포트원(통합 결제 솔류션)

을 통해서  전체 결제 흐름이 어떻게 이루어 지는지 살펴 보자.

 

1. 사전 준비

 

우선 계정을 만들고 관리자 패널에 로그인을 해보자

결제 연동 클릭

 

결제대행사로 카카오페이 선택

 

 

 

나주에 사용할 API키 및 API 비밀번호를 확인할 수 있다.

복사해서 따로 저장해두자.

 

 

 

2. 프론트 엔드

우선 위와 같은 포트원 SDK를 추가한다.

포트원 SKD를 설치하면 IMP라는 전역 변수가 생성된다. 

이 변수를 통해 포트원과 상호 작용 할 수 있다.

 

 

이전에 발급 받은 가맹점 식별코드를 사용해서 초기화 한다.

 

 

그 후 버튼에 이벤트 리스너를 추가한다.

 

 

 

onClickPay 내부에는 IMP 변수 안에 있는  request_pay 함수를 호출한다.

이 함수는 결제 요청에 대한 모든 옵션이 포함된 구성 객체를 받아 이 객체에 많은 옵션을 전달할 수 있으므로 자세한 내용은 모든 옵션 및 기능을 확인할 수 있는 포트윈 웹사이트를 확인해보자 !

우선은 위와 같이 결제 요청에 가장 중요하고 필수적인 옵션만 전달해보자.

첫 번쨰는 결제 게이트 웨이인 PG(카카오 페이)이다

관리자 패널에서 활성화되어 있고 사용하려는 결제 게이트 웨이의 코드를 전달 하면된다.

 

주문의 ID인 merchant_uid를 백엔드로 전달 한다.

이는 포트원에서의 결제를 백엔드 또는 관리자 패널의 주문과 연결할 떄 유용한다.

 

 

그리고 이제 버튼을 클릭만 하면 !

위와 같이 휴대폰에 카카오페이 결제 QR 코드가 나온다 !!

 

또한 추가로 필요한 정보와 두번쨰 매개변수로 결제완료 후 실행 될  콜백함수의 추가 코드를 작성할 수도 있따.

 

콜백 함수에서는 결제가 1. 성공적으로 된경우/ 2. 유저가 결제할 수 없는 경우/ 3. 유저가 결제 창을 닫을 때 호출 된다.

 

 

 

위와 같은 예제 처럼 문제가 발생 했을 때 유저에게 경고를 표시하기 위해 error_msg 속성을 사용했다.

또한 status가 paid인 경우에는 imp_uid를 얻게 된다.

imp_uid는 포트원에서 생성한 이 결제에 대한 고유 ID로 verifyPayment 함수로 전송된다.

 

 

결제 인증은 왜 필요 할까 ?

그 주요 이유는 '유저를 모두 전적으로 믿어서는 안되기' 때문이다.

결제를 요청하고 유저에게 청구할 금액을 지정하는 모든 코드가 클라이언트 측에서 실행 되고 있기 때문이다.

즉, 어떤 악성  유저가 제품에 대한 가격을 가져오는 요청을 가로채서 금액이 0인 무료 주문 결제 요청을 생성할 수도 있다..!

따라서 항상 백엔드에서 주문을 확인하고 결제 금액이 정확한지 확인을 해야한다.

 

 

 

3. 백엔드 

백엔드에서는 PortOne API를 호출해야 한다.

먼저 토큰을 가져오고, 그 토큰으로 방금 발생한 결제에 대해 API에 요청을 할 수 있다.

이 정보를 통해 데이터베이스로 이동해서 유저가 구매한 제품을 검색하고 유저가 지불한 금액과 지불해야했어야 하는 가격을 비교 할 수 있다.

 

 

위 예제에서는 관리자 패널에서 받은 API 키와 비밀번호로 포트원 API를 호출해서 엑세스 토큰을 얻을 수 있다.

 

 

그런 다음 엑세스 토큰과 함께 프론트엔드에서 전송한 imp_uid 속성을 사용해서 방금 발생한 결제에 대한 정보를 포트원 API에서 가져온다.

 

그럼 이제 결제에 대한 정보를 가져와서 데이터 베이스와 대조해서 확인할 수 있다.

 

그럼 유저가 최종적으로 결제한 금액인 amout과 name,merchant_uid를 가져온다.

 

 

유저가 구매한 제품을 찾으려면, 위 변수들을 적절히 사용해서 백엔드 데이터베이스에 저장된 자료들과 비교 대조 하면 된다.!

위와 같이 활용할 수 있다.

 

 

 

 

 

요약

유저가 브라우저에서 결제를 하면, 브라우저에서 백엔드에서  결제를 확인하는 함수를 트리거 하는 것이다.

백엔드에서 포트원으로 부터 엑세스 토큰을 받은 다음 방금 발생한 결제에 대한 정보를 요청하고 해당 정보를 통해 유저가 결제한 금액이

정확한지 여부를 확인하는 것이다.

 

 

 

 

완벽한 결제 흐름을 위해 추가 하면 좋은 작업

1. 모바일 결제 처리

 

이를 위해 m_redirect_url 속성을 추가 하면 된다.

 

이렇게 하는 이유는

모바일 브라우저에서는 결제 대행사가 유저를 그들의 웹사이트 또는 앱으로 리다이렉션하고, 결제가 완료 됬다면 다시 유저를 원래 웹사이트로 리다리렉션 하기 때문이다.

 

결제를 완료한 경우 이동될 URL

 

실패하게 될 경우 이동될 URL

 

이후 URL의 쿼리 매개변수에서 정보를 개발자들이 가져오면 된다.

 

 

이후 결제가 성공되면 백엔드를 호출하는 함수를 트리거 하고, 결제 금액이 정확한지 확인한다.

 

 

 

 

 

2. 웹훅

웹훅은 유저가 결제하고 바로 즉시 웹사이트를 떠날 때, 결제 인증 기능이 실행될 시간을 주지 않을 떄 유용하다.

또는 결제 직후 휴대폰이 꺼지거나 엘리베이터 등등 연결이 끊킬 떄 웹훅을 사용하면 포트원이 새 결제가 들어왔음을 별도로 알려주고, 

백엔드에서 이미 처리했는지 여부를 확인할 수 있다.

자세한 방법은 웹사이트를 참조 하자 ..!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://www.youtube.com/watch?v=JsiTJlLitMI&t=330s