지금 만들고 있는 프로젝트에서 결제 API(import) 사용해보기/결제 후 결제 list화면 구현

지금 포트폴리오 만든다고 쇼핑몰을 만드는 프로젝트를 하고 있는 와중에 결제 api를 사용하는 방법을 공부 중이다

결제 api는 자바스크립트로 호출되기 때문에 onsubmit을 사용해서 action이 이뤄지지 않고 해당 자바스크립트 함수가 사용되도록 설계했다.

session에 있는 user정보 넣어주기

회원들이 불필요한 중복된 정보를 적는 건 ux가 좋지 않다 그래서 로그인된 사람만 들어올 수 있는 페이지로 프로그램을 짜고 session에 있는 user의 값을 넣어줬다

 

 

이제 결제 api를 호출할 때 사용할 db의 정보를 인수로 넣어준다.

 

인수에 있는 값들을 응답받을 파라미터의 값에 맞게 넣어준다.

정상적으로 api가 작동한다 이제 결제를 완료했을 때 어떤 데이터를 받을 수 있는지 알기 위해서 import페이지에서 문서를 찾아보자.

참고로 testApi사용 시 결제된 돈은 다 페이백되니 안심하고 결제해도 괜찮다.

 

위 코드의 흐름을 보면 rsp라는 변수에 위 오브젝트 값들이 다 담긴다. 그리고 이 json오브젝트 값을 stringify를 사용해서 string데이터로 변환시킨 후 컨트롤러로 fecth요청 후 아래 컨트롤러가 실행된다

우리가 요청 시에 string으로 body에 데이터를 담아서 보냈기 때문에 @RequestBody를 사용해서 자바 객체로 매핑을 해주고 값이 잘 들어가는지 확인을 위해 sysout으로 찍어봤다. 이제 결제 완료된 데이터를 db에 저장.

 

여기서 우리 프로젝트 구조상 문제가 생긴다.

결제 정보를 저장할때 결제한 상품의 정보도 저장이 돼야 하는데

JAP에서 ORM 할 때 도메인 관계상으로 보면 상품이 many이기 때문에 컬랙션 타입이다.

이때 오브젝트 타입의 상품을 컬랙션 타입에 저장시킬 방법이 필요했다

그래서 buy라는 도메인을 하나 더 만들어서 결제와 구매관리를 하나의 트랜잭션(하나의 일)으로 묶어서 관리하도록 하는 것이다.

buy도매인과 user도메인

그래서 결제가 완료됐을 시에 payment테이블만 추가가 되는 것이 아닌 buy도 같이 동시에 추가가 되도록

그렇게 하면 어떤 유저가 어떤 상품을 샀는지 저장할 수 있게 된다.

 

fetch요청으로 실행되는 결제정보 저장 컨트롤러 수정

이제 buy에 저장된 json데이터를 보면

1번유저가 1번상품을 샀다

위와 같이 누가 어떤 상품을 샀는지 데이터가 남는 것을 볼 수 있다.

 

이제 이 데이터를 model에 담아서 화면에 뿌려주기만 하면 되는 것이다.

buy에서 select할 쿼리문

 

완성!