플러터로 구성된 웹앱에서 카드 결제 오류
안녕하세요.
현재 React에 토스페이먼츠 라이브러리를 붙여서 웹을 구성하고, Flutter에서 webview_flutte를 이용하여 React로 만든 웹을 보여주고 있습니다. 즉 웹앱방식으로 구현이 되어있는 상태입니다.
React로 구성된 웹으로 가면 토스페이먼츠 결제에 아무런 문제가 없습니다. 하지만 Flutter에서 만든 앱에서 "카드 결제"를 시도할 경우 안드로이드/IOS 전부 모달창이 보이지가 않습니다.
카카오페이, 네이버페이는 앱에서도 정상적으로 결제 모달이 나오는 것을 확인했는데, "카드 결제"의 경우에만 아래의 사진과 같이 모달창이 보이지가 않습니다. 또 카드결제도 모든 카드사가 안되는게 아니라 신한카드의 경우에는 정상적으로 결제 모달이 보입니다. 이외에 국민, 롯데, 우리등 대부분의 카드사는 사진과 같이 모달이 보이지가 않습니다.
이럴 때 어떤 부분들을 더 체크해봐야할까요?
18 Replies
아예 지금 모달이 뜨지 않고 화면만 어두워지시는거죠?
혹시 사내 내부망에서 접속중이신가요?
네네 현재 모달이 뜨지 않고 화면만 어두워지고 있습니다. 실제 개발자 도구를 가보면 롯데카드 홈페이지 접속 요청이 이루어진 것 같은데, 모달이 뜨지가 않습니다.
사진은 에뮬레이터에서도 한번 시도해보고 보여드린 사진입니다. 실제 기기에서도 결제를 시도했는데, 모달이 뜨지가 않습니다! 내부망 접속은 아닙니다.
1. 동일한 기기에서, 웹 접속 시 정상, 앱에서는 안나옴
2. 내부망 사용 환경 아님 (방화벽 차단 X)
로 이해했습니다.
네네 말씀하신 내용이 맞습니다!
webview_flutter 로 구현중이라고 하셨는데,
방금 테스트 해보니까
안드로이드에서는
- 카드결제 모달 안뜸
- 카카오페이 모달뜸
- 네이페이 모달뜸
IOS에서는
- 카드결제 모달 안뜸
- 카카오페이 모달 안뜸
- 네이버페이 모달뜸
서로 현상이 다릅니다!
현재 tosspayments_widget_sdk_flutter 모듈 쓰고 계실까요?
tosspayments_widget_sdk_flutter 버전과, webview_flutter 버전 알려주세요.
현재 구조가
토스페이먼츠 모듈 구현은 리액트 웹에서 이루어지고,
플러터에서는 단순히 webview_flutter로 리액트 웹을 웹뷰로 보여주고 있는 구조입니다!
즉 앱에서는 리액트에 붙여져있는 토스페이먼츠 모듈을 사용하고 있는겁니다!
플러터에서 토스 페이먼츠 모듈을 설치해서 따로 쓴적은 없습니다.
리액트에서 사용하고 있는 토스페이먼츠 모듈은
"@Toss Payments/payment-widget-sdk": "^0.10.2",
사용하고 있고,
웹뷰는 webview_flutter: ^4.7.0 사용하고 있습니다.
음... 웹뷰를 사용하셔도
카드사 앱을 호출하려면 tosspayments_widget_sdk_flutter가 필요하실텐데요.
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
모바일에서 결제창을 띄울 때 카드사별 결제수단을 인증하려면 외부 앱(3rd-party 앱)을 연동해야 합니다. 연동에 필요한 외부 앱 스킴(App URL Scheme)목록과 추가 로직을 살펴보세요.
이 문서대로 작업하신게 아니신가요?
네네 저도 그 문서 보고 뒤늦게 코드를 추가했는데
tosspayments_widget_sdk_flutter: ^2.0.7
설치 후
tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱 스킴 URL로 변환
if (appScheme.isAppLink()) {
// 앱 스킴 URL인지 확인
appScheme.launchApp(
mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return NavigationDecision.prevent;
}
}
파일 생성 후에
onNavigationRequest: (NavigationRequest request) {
// 표준 웹 URL 체크
if (request.url.startsWith('https') ||
request.url.startsWith("http")) {
return NavigationDecision.navigate;
}
// 그 외의 경우에는 tossPaymentsWebvew 함수로 검증
tossPaymentsWebview(request.url);
return NavigationDecision.prevent;
},
이렇게 코드 추가적으로 더 적어줘도, 현상은 똑같습니다!
현재 확인 필요한 부분은 아래와 같습니다.
- 웹뷰에서 User Agent를 건들고 있는지
- webview_flutter와 webview_flutter_android 버전
- tosspayments_widget_sdk_flutter 버전
tosspayments_widget_sdk_flutter는 2.0.7 사용중이시고,
webview_flutter는 4.7.0 사용중이시군요.
웹뷰에서 혹시 User Agent 조작을 하고 계신지, 그리고 webview_flutter_android 버전 확인부탁드릴게요.
방금 살펴보니까 제가 따로 User Agent를 설정해서 사용하고 있는데, 해당 코드를 제거하니까 정상적으로 작동됩니다!
도와주셔서 감사합니다☺️
User Agent조작을 하여 PC로 인식되면 저렇게 창이 안뜨는 문제가 있을 수 있고,
또 webview_flutter_android 버전에 따라서도 창이 안뜰떄가 있어서 확인 요청드렸습니다.
가능하면 User Agent조작을 안하고 사용해주세요.
네네 말씀하신 부분들 확인했습니다~ 감사합니다! 좋은 하루 되세요:)
네 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.