🦁 Python Online Store 만들기 21편 - 상품 결제(2)

🎈 Front End Developer 의 Back End 도전기 ! 🎈

이 글은 PROJECT LION : 호코치 강사님의 강의를 들으며 참고한 글입니다.

작업 중, 개발과정 정리 및 issue가 되었던 부분들을 공유 및 기록하고자 작성하게 되었습니다.

1. 결제 요청

✍ 지난 시간에는 form을 작성하고, 작성한 form의 고유 id값이 넘어오는 것 까지 확인 해 보았다.

이번시간에는, iamport를 활용하여 pg사를 연동시켜 실제 금액이 빠져나가고, 취소했을 때 환불처리 되는 것 까지 구현해 보려고 한다.

기존에 정말 해보고 싶었던 작업이고, 까다로운 요소들도 많지만 차근차근 작업 해 보겠다!

1. iamport script import
   = library 사용을 위해서는 지원하고 있는 script file을 import 시킨 후 작업을 시작한다.
   {SDK-최신버전} 부분은 현재 최신버전을 문서에서 서칭하여 표기해 주면 된다.
   = iamport.payment-1.1.8.js

---

2. 결제 준비 코드 작성
   = 가맹점 식별코드는 iamport 관리자콘솔 -> 상점/계정관리 -> 내 식별코드 Appkeys 에서 확인가능하다.
   = 확인한 식별코드를 Imp.Init 뒤 식별 코드에 붙여넣어준다.

---

3. 결제 요청 코드 작성
   = 해당 코드를 입력 시 정보가 기입되어 있는 pg사 결제창(이전 작업에서 다날 로 테스트pg사를 추가해 둠)이 나타날 것이고, 실질적으로 결제가 가능할 것이다.
   = 우선 작업 후 결과 코드인데, 하나씩 순차적으로 설명해 보겠다.

DOM이 로드 된 후, requestPay 함수를 호출시켜 정상적으로 pg사 popup을 띄우면 성공이다. 그렇게 되야한다...

예상대로라면 문제없이 PG사 결제창이 popup으로 뜰텐데 결제 실패시 로직이 떠버렸다. 즉, reqeustPay 함수가 정상적으로 실행되지 않고, else로 튕겼다는 것이다 😂

우선 로직을 따라 차근차근 하나씩 읽어보았다.

구문상 문제는 없어보였고, 함수 안의 내용도 하나씩 살펴보았다.
구문을 몇번이고 다시 읽어보고, 서칭을 해보아도 답이 없었는데, 하나 이상한 점이 있었다.

나는 pg사를 다날로 세팅했는데, 현재 코드 상으로는 inis가 입력되있다(?)
= 이 구문을 danal_tpay로 입력하니 결제창이 잘 나온다 하하하 ^___^

별거 아닐거 같단 느낌이 들었고 예상은 했는데 이 문제로 40분이나 배움의 시간이 확보되었다 ..😵‍💫😵‍💫

---

4. 실 데이터 추가
   = 실제로 결제가 진행되는 pg 사 결제창이 나타났다.
   신한pay로 직접 결제 후 나타나는 화면들을 구현해 보겠다.

---

5. 실결제테스트
   = 신한pay로 결제 후 정상적으로 결제가 된다면 결제를 기다리는 popup 창이 하나 나타난다. 여기서 결제를 클릭하게 된다면 실제 돈이 빠지게 되며, 정상적으로 구매가 완료된다.

결제내역 확인 부분에서는 수단, 개월수, 구매자 및 이메일, 상품명, 상품금액, 결제금액 등이 db의 실제 data가 정상적으로 출력되고 있다.
= 결제 버튼 클릭 시 console에 찍힌 결제 성공 text가 출력된다.
아직 결제 후 이후 과정을 작업하지 않았기에 console 만 뜨는것이 정상이다.
= 그 후, 상품의 금액이 정상적으로 출금되는 것이 확인된다.

---

6. 결제 승인 내역 확인
   = 여러번 테스트를 하였는데, 미결제 내역 및 구매한 내역이 정상적으로 출력된다.

🔖 만약, 구매가 완료된 상품을 판매자의 사정으로 환불처리를 하거나, 구매자의 사정으로 구매를 취소 할 수도 있다. 그러므로 현재 관리자 콘솔에서 상품을 취소할 시 정상적으로 환불처리가 되는 것도 확인하였다.

---

7. 결제 성공 시 결제정보전달
   = 결제 요청이 끝난 후 완료가 되었을 때 flask에 전달해 주어야 한다.
   

   = payment/complete 주소 및 post방식으로 전달해 주었다.

실질적으로 구매한 금액이 정상적으로 출금되고, 취소한 상품에 대해서 즉시 환불처리 되는 로직을 구현해 보았다!

순탄하게 작업이 진행되면 좋겠지만, 오류가 생기고 그 오류를 해결하는 과정에 있어서 더 많은 것들을 찾게 되고 부가적으로 득이 되는 것들이 더 많은 것 같았다. 😎🎉

다음 시간에는 결제 성공 API를 작성해 보겠다.