Flutter에서 구독 결제
안녕하세요.
현재 웹에서 자동결제(빌링)을 사용 중 인데요,
모바일에서도 결제수단 등록을 하기 위해 개발 중 인데 Flutter SDK에서 자동결제 구현 하는 방법이 없는걸까요?
25 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
flutter는 웹뷰 위에 웹서버 띄우는게 아니라
flutter component활용해서 개발하시는거죠?
결제위젯 Flutter SDK | 토스페이먼츠 개발자센터
결제위젯 Flutter SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
여기에는 빌링은 없습니다.
현재 주문서 페이지는 기획이 되셨나요?
주문서 페이지라면 어떤걸 말씀하시는 걸까요?
'결제하기' 혹은 '구독하기' 버튼이 있는 페이지요
네네 거기까진 구현되어있습니다
그러면 플러터에서 같은경우 기존에 개발된 웹을 띄워서 빌링하는 형식으로 해야할까요?
웹서버를 띄우실 필요는 없고 제가 우선 개념을 한번 설명드려 볼게요 이해가 안되는 부분은 알려주세요
저희 sdk에서 '위젯'말고 '일반결제창'방식이 구동되는 방식과 동일합니다.
잘 이해가 되지 않는데.. 위젯과 일반결제창 차이가 뭘까요?ㅠㅠ
혹시 가능하다면 전화나 대면으로 문의가 가능할까요?
저희 회사가 어짜피 토스 본사 근처입니다... 🙂
1. '결제하기'버튼 이벤트가 들어오면, flutter에 빈 웹뷰를 띄웁니다.
2. 해당 웹뷰 안에다가 로컬에서.. 빌링결제창 호출 스크립트를 실행합니다.
https://docs.tosspayments.com/guides/billing/integration
3. 스크립트 실행할 때 successUrl은 http:// 형식이 아닌 , 앱스킴으로 지정합니다 (ex: toss://success)
앱스킴으로 지정하면, 웹서버로 이동하지 않고 빈 웹뷰로 이동합니다.4. successUrl로 이동하면, getParam에 있는 정보를 받아와서 웹뷰를 종료합니다.
자동결제(빌링) 결제창 연동하기 | 토스페이먼츠 개발자센터
자동결제는 다른 이름으로 빌링, 또는 정기결제로 불리는 결제 방식입니다. 카드 등록창에서 고객의 카드를 한 번만 등록하고 나면, 별도의 고객 인증 없이 간편하게 결제를 요청할 수 있습니다.
꼭 방문하지 않으시더라도, 위에 내용으로 이해하실 수 있을 것 같아요~
정기결제만 사용하실거라면, 위젯/결제창 개념은 이해하지 않으셔도 됩니다
아 무슨느낌인지 대충 알겠네요!! 감사합니다 🙂
네
- 로컬에서 스크립트 실행해서 결제창 호출
- 결제창에서 반환하는 값은, 빈 웹뷰에서 받음
- 이후 받은 값으로 api 호출 등 진행
이 포인트만 이해해주시면 금방하실 수 있을거에요
저희는 플러터로 앱 + 모바일 웹을 동시에 대응하고 있는데 이런 웹뷰 형식으로 할 경우 모바일웹을 대응할 수 없는 한계가 있어서 공식적으로 flutter에서도 구독기능을 제공해주시면 좋을 것 같습니다!
공식적으로 flutter에서 제공하더라도 저희가 웹뷰를 열어드리는 형식이 될거에요
만일 웹뷰를 빼고 싶지 않으시다면
자동결제(빌링) API로 연동하기 | 토스페이먼츠 개발자센터
고객의 카드 정보를 등록해 빌링키를 얻고 자동결제를 연동하는 방법을 알아보세요.
api로 연동해주시면 됩니다.
그런데 구독 관련해서 계약은 받으신거죠?
네!! 이미 웹에서 사용중입니다!
이거같은경우 카드 등록 UI는 직접 구현해야하는거죠?
네 맞습니다.
알려주신대로 웹뷰안에다가 로컬에서 스크립트를 하려고했을때 안드로이드,ios에서는 가능하나 플러터웹의 경우 iframe기반으로 작동하다보니 스크립트를 주입시켜 실행할 수 없는 문제가 있습니다.
혹시 플러터 웹을 대응하기 위한 방안 있을까요?
플러터 웹은 저희가 공식적으로 아직 확인해본 플랫폼이 아니어서요
정확한 가이드 드리기 어려운 점 양해바랍니다.
플러터 웹에서는 아쉽게도 사용할 수 있는 방법이 없는거 같습니다. (공식적이진 않지만 제가 테스트해보았지만, iframe기반이다보니 Cross-Origin Resource Sharing Policy 충돌로 작동하지 않더라구요.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
안녕하세요. 말씀해주신것 처럼 앱에서 콜백Url을 앱스킴으로 했더니 실행이 되지 않습니다. 웹url로 하면 정상작동합니다