[import, Node.js, Vue.js] 결제 구현과 테스트 해보기

 

 

여는 글

---

 

기능상으로는 이것이 마지막 포스팅이다.

 

이제는 고쳐야 할 부분만 남은 것 같다.

 

구현하는 데에 오래걸리진 않았고 테스트에서 약간 시간이 걸렸다.

 

테스트에 대해서는 밑에서 더 자세하게 이야기 하겠다.

 

 

 

결제 구현

---

 

먼저 frontend에 jQuery를 설치해야 한다.

 

npm install jQuery

 

나는 아래 포스팅을 거의 참고 했다.

[import] 아임포트 결제 모듈 만들기(코드 포함)

 

주의!! 코드 작성 후 관리자페이지에서 시스템설정->PG설정(일반결제및정기결제)에서 결제 수단을 등록해야 결제창이 뜬다.

 

내 모든 코드는 내 깃허브에 있다.

GitHub - codelistwriter/olrang: 올랑 상점 모든 코드

 

나에게 맞게 고쳐서 작성하긴 했는데 내가 손댄 건 MongoDB에 맞게 DB코드를 바꾼다던지, 전달될 데이터를 수정한다던지 하는 간단한 수정이었고 코드 설명도 친절하셔서 매우 참고가 됐다.

 

 

 

테스트

---

 

 

앞에서도 언급했지만 의외로 구현보다는 테스트에 시간이 들었다.

 

테스트를 해보니 결제창도 잘 뜨고 결제도 잘 됐는데 주문이 내 DB에 안 들어가서 의아했기 때문이다.

 

DB에 들어가려면 backend 부분이 실행이 되어야 하는데 그냥 frontend에서 결제창->결제->끝 이렇게 되는 것 같다는 생각이 들었고 구글링도 해보고 어디까지 실행이 되는 건지, backend로 전달이 되긴 하는 건지 한참을 찾다가 결론을 내렸다.

 

이게 실제 결제가 아니라 테스트모드라 보안이나 DB 저장 부분까지는 실행이 안되는 건가?

 

물론 실제 결제가 아니더라도 실제 돈은 결제가 된다.

 

아래 사진은 내가 실제로 사용하는 농협 계좌이고 계좌 번호는 혹시 몰라 가렸다.

 

정확하게 말하면 PG사랑 계약을 해야 진짜 결제다.

 

근데 그러려면 사업자등록번호가 있어야한다고 해서 나는 테스트를 여기서 끝내기로 했다.

 

 

 

닫는 글

---

 

다음에는 프론트엔드에 ALRER 창 삽입하기를 구현할 것이다.

 

저번엔 안됐지만 이번에는 꼭 고쳐야지!

 

아래는 내가 구현한 첫 결제 기념 스크린샷이다.