No-code 툴 웹플로우(Webflow)로 토스 결제 위젯 연동
https://new-career-story.webflow.io/
이 사이트는 웹플로우로 구성한 사이트입니다. 결제 승인 API를 make라고 하는 노코드 자동화 툴에서 실행하는 방식으로 구현해봤는데요. 이 테스트 결제를 보시고 이렇게 운영해도 상관 없을지 의견을 부탁드립니다. 제가 노코드 개발하는 야매 개발자라...일단은 잘 되는거 같은데 보안상이나 구현 가이드상 이슈가 없는지 피드백 받고 싶습니다.
직장을 넘어선 사람들 - 커리어 공유회 참가 신청
직장이 아닌 직업으로 설명할 수 있는 사람들이 모였습니다. 대체불가능한 '나'가 되기 위한 커리어 분투기를 나눕니다.
33 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
제가 직접 결제해봤는데요, 일단 결제는 잘 됩니다.
결제 전 주문서 단계나 결제 후 완료페이지 등을 더 꾸미시면 될거같아요
전체적인 QA를 진행하시면 좋을거같아요.(제가 했을때는 결제창이 열리면 닫기버튼이 동작안하더라구요.)
보안이 우려되신다면 KISA 의 보안약점 진단 가이드를 확인해보시면 좋습니다.
https://www.kisa.or.kr/2060204/form?postSeq=9&page=1
한국인터넷진흥원
한국인터넷진흥원
노코드로 구현이라니 너무 멋지네요, 좋은 서비스 만드시길 바랍니다.
웹플로우는 아직 정식지원 안하고 있었는데, 추후 웹플로우쪽 문의가 오거나 할 때 참고할 수 있도록 할게요. 👍
감사합니다! 일단 가능하다는것만 확인해도 기쁘네요
여기서 장PM님 뵈니까 반갑네요 ㅎㅎ... 노코드 👍🏻
successURL 을 make .com 으로 보내셨는데, 원래 이렇게 하면 CORS 오류가 나는게 정상일텐데요, 혹시 어떻게 처리를 하신것인지 알수 있을까요?
저도 원래 success 페이지로 리다이렉션 하고 그 페이지서 make로 webhook을 보내면 CORS 에러가 나더라고요.
근데 success 시 이동하는 페이지 위치에다가 make webhook url로 넣고(여기서부터 make 동작) 그 webhook url 파라미터로 들어온 값으로 결제승인 api 콜해서 인증한다음에, 제가 구현해놓은 success 페이지로 이동하도록 하니 cors 에러가 안나고 노코드로 구현할 수 있었습니다
이렇게 전달되었었네요
{"amount":500,"orderId":"WvtAw8woyQ","orderName":"커리어를 넘어선 사람들 행사 참여","successUrl":"https://hook.us1.make.com/kt1udfoj3sxavgcjb92lxqp2nc7gn1t9?paymentType=NORMAL","failUrl":"https://new-career-story.webflow.io","customerEmail":"byungjun.jang89@gmail.com","customerName":"테스트","flowMode":"DIRECT","cardCompany":"HYUNDAI","currency":"KRW","country":"KR","cardInstallmentPlan":0,"methodType":"CARD"}customerEmail, customerName은 그냥 테스트라 고정해서 넣어놨습니다.
제가 make webhook url로 successURL을 설정하는게 문제가 없는 방식이라면 이 방식으로 모든 노코드 툴에서 구현할 수 있을거 같아요. 일단 되긴 하는데 이 방법으로 해도 되는건지 자문을 구하고 싶었습니다.
승인은 잘 처리된것을 확인했는데요, 승인결과를 잘 받으셨는지는 직접 확인하셔야해요
네네 테스트 결제 내역에서 완료로 잘 나오더라고요. 저한테 이메일 알림도 잘 오고요.
저희쪽에서 좀 더 보고 말씀드릴게요
넵
근데 success 시 이동하는 페이지 위치에다가 make webhook url로 넣고(여기서부터 make 동작)
라고 하셨는데, 인증 완료하고 https://hook.us1.make.com 여기로 이동할때 CORS 이슈는 없으신가요?
네 이렇게 하니까 CORS 에러 안나오더라고요
왜 그런지 깊이 있는 이해를 하는 수준이 못 되어서... 일단 되길래 우와 된다. 근데 이렇게 해도 되나? 이거 사람들에게 공유해줘도 되나 싶어서 여기에 물어봤습니다.
버블 말고 다른 노코드 툴을 쓰시는 사용자들이 토스 결제 위젯을 다들 쓰고 싶어해서 제가 연구해보고 있는거거든요.
일반적으로 new-career-story.webflow.io 여기에서 결제창을 여시고 successURL 을 https://hook.us1.make.com/ 로 설정하시면 CORS 가 나와야 하는게 맞거든요.
해외 노코드 유튜버들이 redirection url에 make의 webhook url을 넣는 방식으로 구현을 하는 사례가 있더라고요. 아래 영상에서 영감을 받아서 해봤어요.
https://youtu.be/uyeqbmIS4Rc
이 영상에서는 calendly를 이런 방식으로 구현하더라고요. 다른 서비스에서도 되는거고 토스 결제 위젯도 동작하기에 문제가 없다고 생각했어요. 제 구현 방식은 저 영상에 나와있으니 한번 리뷰 부탁드립니다~
360Creators
YouTube
How to create a custom redirect using Calendly, Webhooks in Make & ...
In this tutorial you'll learn how to let your end users who submit a form can get an immediate custom redirect.
I've used Calendly, Make & 3DVista as the tools. However, this video is more about explaining the conceptual thinking. Each tool can be replaced, as long as you understand the principles behind each tool.
If you'd like to get more he...
음... 제가 사실 개발 개념이 진짜 부족해서 잘 몰라유...ㅠㅠㅠ 부끄럽지만요...
일단 되길래 된다 했습니다. 다만 이건 결제라 돈과 관련되 있는거고 저혼자 쓰는게 아니라 커뮤니티에서 전파할거여서 훌륭하신 토스 개발팀의 리뷰를 받고 싶었던거구요
Access-Control-Allow-Origin 이게 해당하는 make webhook 을 호출할수 있는 도메인을 제한하는 건데, 이게 전체 로 되어 있으면 혹시라도 보안 이슈가 있을수 있습니다.
make webhook을 호출하는 ip restrictions을 make에서 셋팅할 수 있는데 그럼 이 경우 뭘로 셋팅해주는게 보안 이슈을 완화할수 있는 방법일까요?
다른 사이트가 저 make webhook 을 부르게 한다든가요..
제가 make 를 잘 몰라서 정확히 가이드 드리긴 어려운데,
교차 출처 리소스 공유 (CORS) - HTTP | MDN
교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다.
여기를 좀 참고해보시면 될것 같구요.
https://new-career-story.webflow.io/ 이걸로 설정해야 할것 같은데, IP 로 제한을 걸수 있다면 좀 애매하겠네요.
직장을 넘어선 사람들 - 커리어 공유회 참가 신청
직장이 아닌 직업으로 설명할 수 있는 사람들이 모였습니다. 대체불가능한 '나'가 되기 위한 커리어 분투기를 나눕니다.
그건 제가 웹플로우랑 메이크 커뮤니티를 돌아다녀서 해결해볼 수 있을거 같아요 ㅎㅎ 일단 지적해주셔서 감사합니다!
다만 어차피 secret 키는 make 안쪽에 있을것이라고 큰이슈는 없을것 같구요.
맞아요 ㅎㅎ
하나더 제안 드리자면 혹시라도 결제창을 띄울때 amount 를 조작할수 있으므로 make 에서 amount 받으신후에 주문서에 있던 amount 와 같은 값인지 비교를 해주시면 좋습니다.
아 넵 알겠습니다! 그건 충분히 가능합니다~ 너무 좋네요!
일반적인 케이스는 아니지만 make.com에서 secretKey가 유출되지 않도록 구성해주시면 될 것 같아요.
저희 보안팀에도 해당 케이스에 대해 검토 요청 해보겠습니다.
저희 보안팀에도 해당 케이스에 대해 검토 요청 해보겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.