Flutter Web 개발 질문드립니다
안녕하세요 현재 Flutter로 웹앱 개발중인데 플러터 패키지가 web은 지원안되는 것으로 확인했습니다.
혹시 플러터 웹앱 개발시에 참고할 문서 있을까요? 감사합니다
37 Replies
안녕하세요
flutter를 이용해서 웹페이지 만드는건가요?
flutter web 구성을 제가 정확히 몰라서 몇가지 질문 드려요.
- 토스페이먼츠와 계약은 완료되셨나요?
- html/js 코드를 이용할 수 있나요?
- 아니면 flutter app 처럼 웹뷰 영역을 잡은 후, html/js 스크립트를 사용하시나요?
토스페이먼츠와 계약은 완료되셨나요?
- 신청 단계입니다
html/js 코드를 이용할 수 있나요?
아니면 flutter app 처럼 웹뷰 영역을 잡은 후, html/js 스크립트를 사용하시나요?
- 후자인것 같습니다
일전에 pass 본인인증이 flutter web 지원을 안해서 js 함수를 호출하는 식으로 했던 것 같은데 이와 비슷한 방식으로 가능할까요..?
아니면 보다 권고해주실 방법이 있으실까요?
그럼 아래와 같은 flow로 구현해주시면 될 것 같아요.
- 위젯 사용 불가 / 결제창으로 연동해주세요 https://docs.tosspayments.com/guides/payment/integration
1. flutter component로 결제하기 버튼을 만든다.
2. 결제하기 버튼 이벤트 발생시, 웹뷰 화면을 만들어준다.
3. 웹뷰 화면 위에서 위 가이드의 html/js 코드를 실행해준다. (단 2번에 웹뷰 띄울 때 결제 관련 정보들을 웹뷰로 보내준다.)
4. 이후 결제 완료되면 웹뷰를 닫는다. (앱은 tosspayment://success와 같은 페이지를 successUrl로 설정해, 해당 웹뷰로 값을 받으면 웹뷰를 닫은후. 승인 API는 별도로 처리중)
토스페이먼츠 결제창 연동하기 | 토스페이먼츠 개발자센터
카드 결제창을 연동해보세요.
pass 본인인증도 비슷한 방식이긴 했겠네요.
flutter web으로 연동하는 별도의 이유가 있으신가요? (추후 플랫폼 확장을 위해 사용하시나요?0
애플이 잘 배포 안시켜주는 카테고리의 앱이라 웹으로 진행하고있습니다
가이드 정말 감사드립니다 참고하여 개발할 수 있도록 하겠습니다!
일반적으로 많이 사용하는 연동방식 (react, js, vue 등.. )을 사용안하시는 이유가 궁금해서요~
(웹 연동)
아 제가 플러터 개발잔데 서버리스로(firebase 사용) 개발중이어서요.
그러고보니 firebase functions 이용해서 js 갖다 쓰는것도 괜찮을 듯 하네요...
서버리스로 API 콜만해서 사용하시는 군요
네네 맞습니다
바쁘신대 1가지만 더 질문드려요.. (추후 flutter 지원에 참고하려구요)
flutter web 도 웹서비스면 결국 웹서버에 올라가야, client들이 접근할 수 있지 않나요?
넵 맞습니다
web으로 빌드 시키고 배포시켜야 접근가능합니다
공유 감사합니다.
연동하며 궁금한점은 문의주세요
넵 늦은시간까지 도와주셔서 감사합니다
안녕하세요! 궁금한점 하나 여쭤봐도 될까요..?
flutter web 개발하고 있는데 js 함수 호출하는 식으로 결제 성공까지는 완료한 상태입니다.
리다이렉트 과정중에 궁금한 사항이 있어서요.
tossPayments.requestPayment('카드', { // 결제수단 파라미터 (카드, 계좌이체, 가상계좌, 휴대폰 등)
// 결제 정보 파라미터
// 더 많은 결제 정보 파라미터는 결제창 Javascript SDK에서 확인하세요.
// https://docs.tosspayments.com/reference/js-sdk
amount: 200, // 결제 금액
orderId: 'T05MlFPKGrlB2LySnGDKV', // 주문 ID(주문 ID는 상점에서 직접 만들어주세요.)
orderName: '테스트 결제', // 주문명
customerName: '김토스', // 구매자 이름
successUrl:'/store/success', // 결제 성공 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
failUrl: 'https://docs.tosspayments.com/guides/payment/test-fail', // 결제 실패 시 이동할 페이지(이 주소는 예시입니다. 상점에서 직접 만들어주세요.)
})
해당 함수 실행시켜서 successUrl 쪽을 확인 중인데 결제 결과에 대한 파라미터(paymentKey, orderId, amount, paymentType)는 해당 successUrl에 자동으로 담겨져 오는게.. 아닌가요..?!
successUrl get parameter로 함께 전달됩니다.
Get.parameters 로 받아오지 못하던데 테스트에도 담겨져 오는게 맞는거죠?
네 맞습니다.
successURl로는 이동했나요?
넵
그런데 이동 후에 getparam으로 api호출해줘야 결제성공인데
카드사 인증까지 완료했다는 말씀이시죠?
네네 맞습니다
네 토스페이로 이동해서 결제 과정까지 거쳤어요
페이지까지 뜬거 보면 Get 라이브러리가 못받아오는거 같은데 다른 방식으로 파라미터 받는 방법을 시도해볼까요?
페이지를 리다이렉트 시키시는데요?
위에 공유해주신대로 제가 쏴봤을 때 주소창 변화입니다.
1초에서 2초넘어가며 주소가 3번 바뀌어요
앗 그러네요.. 음.. 제가 라우트랑 페이지 선언을 잘못해둔 것 같아요!
한번 다시 디버깅해보고 잘 안되면 질문드려도 될까요?!
위에 도메인은 굳이 공개된 채널에 적어두실 필요없을 것 같아~ 해당 부분 마스킹 처리해두셔도 좋을 것 같아요
말씀 감사합니다 🙂
수정했어요!
현재 GetPage로 라우팅 관리를 하고 있는데,
GetPage(
name: '/store/success',
page: () => const StoreSuccessPage())
혹시 쿼리 파라미터를 받으려면 어떤식으로 선언해야 하는지 아실까요..?
여기를 참고하시면 될것 같습니다.
SDK하는 방식입니다.
더불어 언어 자체에 대한 문의는 답변이 어려울 수 있습니다.
이점 참고 바랍니다.
현상을 다시 확인해봤는데
'app-url/?{parameters}' 로 처음 라우팅 되었다가
0.5초 정도 이후에 successUrl로 파라미터가 빠져서 가지더라구요 'app-url/store/success'
우선 첫 라우팅이 잘못되지만 않으면 파라미터가 정상적으로 보내질것 같다고 판단했고
이니셜 라우트 설정한 부분으로 무조건 가지나 싶어 해당 부분을 지우며 시도해봤는데 똑같은 현상이 발생하네요
혹시 의심가는 부분 있으실까요..?
위에 영상에도 보이듯이, 저희는 인증완료 후 redirect는 정상적으로 해드렸습니다.
귀사 코드로 한번 파악해보셔야할 것 같아요
전체적으로 구현하신 로직을 모르지 저희도 따로 답변드리기가 어렵네요 (특히나 flutter web은요)
영상이 지워졌는지 안보이는데 혹시 다시 올려주실 수 있으실까요?
해당 영상에서도 루트 rul로 파라미터가 전달되었다 successUrl로 가지는지 궁금합니다
저희도 영상은 따로 저장하지 않았네요
직접 테스트해보시면 될 것 같아요
로컬에서 html로 테스트해도 재현하실 수 있습니다.
원래는 8초 처럼 루트 url에 파라미터가 붙은 형식이 아닌 10초의 successUrl 뒤에 붙는 형식이 맞는거죠?
한번 path에서 # 빼보시겠어요
넵 안됐던거 같은데 바로 다시 해보고 말씀드리겠습니다
엇 successUrl로 파라미터 담겨 보내졌다가 다시 이동되는 되는데
다시 이동되는 부분은 제가 조치해보면 될 것 같습니다!
제가 주소는 안보고 화면 전환만 보고는 비정상 동작으로 본 것 같네요
가이드 감사합니다!
네 수고하세요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.