플러터로 구성된 웹앱에서 카드 결제 오류
안녕하세요.
현재 React에 토스페이먼츠 라이브러리를 붙여서 웹을 구성하고, Flutter에서 webview_flutte를 이용하여 React로 만든 웹을 보여주고 있습니다. 즉 웹앱방식으로 구현이 되어있는 상태입니다.
React로 구성된 웹으로 가면 토스페이먼츠 결제에 아무런 문제가 없습니다. 하지만 Flutter에서 만든 앱에서 "카드 결제"를 시도할 경우 안드로이드/IOS 전부 모달창이 보이지가 않습니다.
카카오페이, 네이버페이는 앱에서도 정상적으로 결제 모달이 나오는 것을 확인했는데, "카드 결제"의 경우에만 아래의 사진과 같이 모달창이 보이지가 않습니다. 또 카드결제도 모든 카드사가 안되는게 아니라 신한카드의 경우에는 정상적으로 결제 모달이 보입니다. 이외에 국민, 롯데, 우리등 대부분의 카드사는 사진과 같이 모달이 보이지가 않습니다.
이럴 때 어떤 부분들을 더 체크해봐야할까요?
2 Replies
네네 현재 모달이 뜨지 않고 화면만 어두워지고 있습니다. 실제 개발자 도구를 가보면 롯데카드 홈페이지 접속 요청이 이루어진 것 같은데, 모달이 뜨지가 않습니다.
사진은 에뮬레이터에서도 한번 시도해보고 보여드린 사진입니다. 실제 기기에서도 결제를 시도했는데, 모달이 뜨지가 않습니다! 내부망 접속은 아닙니다.
네네 말씀하신 내용이 맞습니다!
방금 테스트 해보니까
안드로이드에서는
- 카드결제 모달 안뜸
- 카카오페이 모달뜸
- 네이페이 모달뜸
IOS에서는
- 카드결제 모달 안뜸
- 카카오페이 모달 안뜸
- 네이버페이 모달뜸
서로 현상이 다릅니다!
현재 구조가
토스페이먼츠 모듈 구현은 리액트 웹에서 이루어지고,
플러터에서는 단순히 webview_flutter로 리액트 웹을 웹뷰로 보여주고 있는 구조입니다!
즉 앱에서는 리액트에 붙여져있는 토스페이먼츠 모듈을 사용하고 있는겁니다!
플러터에서 토스 페이먼츠 모듈을 설치해서 따로 쓴적은 없습니다.
리액트에서 사용하고 있는 토스페이먼츠 모듈은
"@Toss Payments/payment-widget-sdk": "^0.10.2",
사용하고 있고,
웹뷰는 webview_flutter: ^4.7.0 사용하고 있습니다.
네네 저도 그 문서 보고 뒤늦게 코드를 추가했는데
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를 설정해서 사용하고 있는데, 해당 코드를 제거하니까 정상적으로 작동됩니다!
도와주셔서 감사합니다☺️
네네 말씀하신 부분들 확인했습니다~ 감사합니다! 좋은 하루 되세요:)
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.