flutter로 결제위젯 연동 중 발생한 이슈?에 대해 문의 드립니다.
토스 공식 문서에서 플러터 웹뷰 연동 쪽을 보면, 웹뷰 모바일 네이티브에 한정돼 있더라고요. 혹시 플러터 '웹' 연동에 대한 가이드는 없을까요? 아이프레임으로 결제위젯을 연동하면 브라우저 보안정책에 막혀 successUrl이나 failUrl 리다이렉트가 안되는 상황입니다...
11 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
Unsafe attempt to initiate navigation for frame
with origin 'http://192.168.0.6:20109' from frame
with URL 'https://api.tosspayments.com/proxy/pages/setup/test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq/e75jWNka9lpP2YxJ4K879gdEvy5mmWVRGZwXLObgyB0vMDm1'.
The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.
브라우저에서는 이런 에러메시지가 뜹니다. 웹에서 테스트할 수 있는 방안이 있다면 가이드 부탁드립니다...!
카드사 창까지는 열리셨나요?
저희 결제창의 FE 쪽은 저희가 제공하는 JS 로 진행되기 때문에 외부 JS 를 플러터 에서 사용할수 있도록 해야 할텐데 이부분이 쉽지 않은 것으로 알고 있습니다.
가능하면 webview 형태로 연동해 주시는게 좋을 것 같습니다.
@이실장 네 팝업창 열리고, QR찍고 결제까지 했습니다. 그런데 브라우저 보안정책으로 successUrl로 리다이렉트가 안되는 상황입니다. 참고로 데스크탑에서 테스트했습니다.
@냥과장 예 말씀하신대로 외부 웹문서를 플러터 위젯으로 사용하려면 사실상 아이프레임 밖에 없는 것 같습니다. 웹뷰 연동은 이미 했습니다. 그래서 네이티브 앱 테스트는 정상적으로 완료됐습니다. 데스크탑, 모바일 브라우저에서 테스트 하는 도중에 막혀서 문의드립니다.
inAppViewer/webview_flutter같은 플러그인을 사용하면, iframe형태로 그려지는건가요..?
저희가 flutter web에 대한 레퍼가 적어 질문을 드립니다.
webview_flutter와 flutter_inappwebview
두 패키지는 모두 모바일 네이티브 웹뷰만 지원합니다. 맥os에서도 동작하지 않습니다. 따라서 웹을 커버하기 위해, 플러터가 제공하는 자체 패키지를 사용하여 iframe을 생성, 생성한 iframe의 src를 제 쪽 서버에 있는 토스페이먼츠 결제위젯을 연동한 웹페이지의 Url로 지정을 해주고 이를 dom에 추가해줬습니다.
저희가 일반 결제창은 flutter web으로 연동한 사례를 확인 한적이 있는데요. 결제위젯의 경우 조금 더 확인이 필요할 것 같습니다.
네 알겠습니다. 저도 좀 더 알아보겠습니다. 감사합니다.
네 flutter관련해서는 지속적으로 보완해보겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.