라이믹스 2용 간단 쇼핑몰 모듈을 만들었습니다

으아.. 월요일부터 하루에 8시간씩 코딩에만 매달리니까 정신이 없네요 ㄷㄷ..

제가 물건을 판매하는 G-Shop은 결제를 할때 입금후 게시판에 글을 남기면 제가 확인하고 인증해드리는 형식으로 했었는데요, 카드를 원하시는 분들도 계시고, 10분 내외로 처리해드리는데 카카오톡 등으로 계속 문의하시는 분들도 계셔서.. ㅜㅜ

이번에 사이트 개편하는겸 기분이다 하고 자동으로 결제부터 인증까지 처리되게 만들어 보았습니다

원래 누리고를 쓰려고 했는데, 제게 필요없는 기능도 있고 라이믹스 2에서 불안정하다는 말도 있어서 그냥 제가 직접 만들어보았습니다

먼저 물품 구매인데요, 굳이 장바구니 만들고 여러개를 동시에 결제할 필요가 없다보니 위처럼 물품 하나가 나오고, 추가 옵션(추가금 넣을 수 있음)과 결제 방식 선택하면, 총 결제 금액이 나옵니다.

추가 옵션도 여러개 선택하게 하기에는 시간도 없고, 그냥 라이선스만 선택하게 만드는 용도로 생각해둬서 하나만 넣었습니다.

구매하기 버튼을 누르면 바로 토스 결제페이지로 넘어가집니다.

신용카드를 선택하고 결제하기를 누르면 위와같이 신용카드를 입력하거나 삼성페이나 토스같은 부가적인 결제 방식도 사용할 수 있습니다.

아무튼 여차저차 결제를 하고 나면 아래와 같이 구매 완료 페이지가 뜹니다

영수증 보기를 누르면 신용카드 매출 전표가 새 탭에 나옵니다

그리고 만약 가상계좌를 선택했다면 아래와 같이 나오게 됩니다.

테스트 키라서 X로 시작하는 가짜 계좌번호가 나오게 되는데, 실제로는 진짜 계좌번호가 나오게 됩니다

그리고 입금을 한다면 토스 서버에서 제 서버로 결제 완료되었다는 메세지를 POST로 보내줍니다!

아무튼 구매에 성공한다면 미리 설정해둔 그룹이 해당 계정에 부여되게 됩니다.

그룹에 따라 다운로드 권한을 줘서 이렇게 구현했습니다

구매한 것만 이렇게 뜨게 됩니다

그리고 구매창을 닫는다던지, 모종의 오류가 발생한다면 위와같이 결제 실패 창으로 넘어갑니다.

사용자가 취소한거면 "구매를 취소하였습니다.", 그리고 결제가 실패했다면 "결제를 실패하였습니다." 라고 제목이 바뀌게 됩니다.

설정은 간단한데요, 클라키와 시크릿키를 입력하면 자동으로 적용이 되고요

상품등록도 많이 필요하지 않아서 그냥 간단하게 만들었습니다

옵션은 아래처럼 입력하면 됩니다

[옵션/0]

[옵션2/+1000]

...

그리고 다크모드도 한번 만들어 보았습니다

물품 구매 페이지

구매 완료 페이지

디자인은 제 홈페이지 레이아웃과 어울리게 snax님의 slow의 분위기를 참고해서 만들어 보았습니다

이왕이면 레이아웃에 css를 대부분 차용하고 싶었으나, 유료 판매제품이기도 해서 분위기랑 색상 정도만 참고하고 직접 짰습니다

( 문의쪽지 받아주신 snax님께 감사드립니다 :D )

아마 어느정도 완성되면 오픈소스로 전환할거 같습니다

사용하실 사람이 있을지는 모르겠지만 이거로 포트폴리오 하나 채우네요 ㅋㅋ