타운광장토픽게시판

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

 

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

 

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

 

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

 

ct1.PNG

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

 

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

 

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

 

 

ct2.PNG

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

 

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

 

ct3.PNG

 

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

 

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

 

ct4.PNG

 

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

 

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

 

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

 

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

 

ct0.PNG

 

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

 

ct5.PNG

 

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

 

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

 

ct6.PNG

 

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

ct7.PNG

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

 

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

[옵션/0]

[옵션2/+1000]

...

 

 

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

 

ct9.PNG

물품 구매 페이지

 

ct8.PNG

구매 완료 페이지

 

 

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

 

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

 

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

 

 

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

 

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

 

글쓴이 리버스

profile
모듈 제작하는 현역 故3 리버스입니다!

== 판매중인 모듈 ==
미션] https://xetown.com/thirdparties/1511787
길드] https://xetown.com/thirdparties/1387146
게시판] https://xetown.com/thirdparties/1481847
  • profile
    와, 이거 보니까 저도 갑자기 사업이 하고 싶어지네요ㅎㅎ
    기대됩니다~~
  • profile
    토스는 실물상품 아니라도 이용이 가능한가보네요?
  • profile profile

    딱히 그런쪽에 제한을 두지는 않더라고요
    원래는 카카오페이를 하려고 하다가 결제방식이 맘에 안들어서 토스로 왔는데, 카카오에서도 실물상품만 된다는 조약은 없어보였습니다.

    제가 찾아봤을때는 실물상품만 된다는 곳도 없었던거 같아요

     

    +) 처음에 신청서 넣었을때 상품관련 약관을 읽어봤었는데, 외주같은 일거리를 파는게 아니라면 무형물도 상관없다고 했었습니다

  • profile profile

    최근에 급격히 바뀐게 아니라면 대부분 결제대행 업체들이 실물이 아닌 서비스상품이나 디지털상품은 취급 안하려고 합니다. 토스가 승인이 되셨다면 토스가 좀더 개방적인거구요. 사고가 많아서 그렇습니다. 약관에 박아 놓고 거부하는게 아니라서요... 약관이라는 건 서로 계약이 체결되어야 의미가 있는거라 거기에 명시를 하지 않아도 계약 자체를 거부할 수 있어 따로 명시 하지 않을 가능성이 높습니다.

  • profile profile
    아하.. 그렇군요
    신청서 넣고 다음 영업일에 판매 상품관련 문의로 토스에서 전화가 왔었는데, 아마 그런쪽을 체크하려고 전화했던거 같습니다
    일단 저는 승인되서 몇가지 서류만 보내면 사용이 가능한데, 케이스 바이 케이스인거 같네요
  • profile profile

    네. 토스가 좀 개방적으로 가맹점을 받고 있는 거네요. 과거에는 토스 같은 곳이 없고 독과점 몇군데여서 전부 디지털은 거부했습니다. 현재는 경쟁때문에 조금씩 바뀌는 회사들이 생겼을 것 같긴 하구요.

    토스 약관에도 보면 실물이 아닌데 실물이라고 계약하고 디지털을 판매한 경우는 철회한다고 명시되어있긴 합니다.

     

    그리고 카드사 별로 추가로 승인을 받으셔야 하는데요. 각 카드사별로 승인이 안나는 카드사가 나올 수도 있습니다.

  • profile profile
    서류 제출하면 바로 카드사 승인 단계로 넘어가는데, 별 말 없던거 보면 아마 큰 문제는 없을거 같다고 생각이 됩니다

    최종 승인까지 쫙 작업해보고 타운에 글 한번 쓰겠습니다 ㅎㅎ
  • profile profile
    카드사 승인은 1주일 정도 넘게 걸려요. 각 카드사마다 직접 방문해서 상품 검토하고 테스트결제까지 진행해서 승인하면 통보하고(가맹점이 아닌 토스측으로) 하는 방식이에요. 물론 대부분 승인되겠지만요.
  • profile profile
    네, 그 부분도 토스에서 메일로 알려줬더라고요
    문제가 없기를 바랄 뿐입니다 ㅎㅎ
  • profile
    오호...! 이제 저녁에도 또 코딩을 하실 예정이란 소식을 전해들었습니다ㅠㅠ
  • profile profile
    인생은 코딩으로 시작해서 코딩으로 끝나는거 같네요.. 헣..
  • profile
    잘 부탁드립니다 ㅎㅎ
  • profile
    멋집니다. 기대되네요~^^
  • ?
    우아 멋집니다.^^
  • profile
    기대되요! 충성충성^^7
  • profile

    정말 멋진 모듈입니다. 혹시 결제 수단중에 포인트로도 가능하면 활용 범위가 더 좋을것 같은데 적용이 어려운 부분일까요?

  • profile profile
    제가 사용하려고 만든 모듈이고, 모듈을 판매하려는 용도가 아니라서 포인트 결제는 적용이 좀 어려울거 같네요 ㅜㅜ

    나중에 소스 공개하면 수정해보시는게 좋을거 같아요~
  • profile profile
    배포 기대 됩니다. ^^
  • profile
    드디어 라이믹스도 결제모듈이 생기는 건가염!!
    완전 기대 됩니다ㅎ
  • ?
    꾸준히 업데이트되면 좋겠습니다. ㅠ
  • profile
    쇼핑몰을 직접 여러개 관리하고 있는데, 이게 보통일이 아닙니다. 제품 종류마다 업데이트해야 할 것들이 많아요,. ㅎㅎ 오래 오래 업데이트 되었으면 정말 좋겠네요! 잘 관리된다면 정말 좋겠습니다!