flutter 웹뷰 결제 연동 문의
안녕하세요. 최근 flutter webview를 사용하여 앱을 제작 중에 있습니다. webview NavigationDelegate의 onNavigationRequest를 사용하여 intent가 있을 때 tossPaymentsWebview함수를 실행하는데 launchApp()부분에서 Unhandled Exception: Invalid argument (urlString): To use an in-app web view, you must provide an http(s) URL.: "market://details?id=viva.republica.toss"에러를 뱉습니다
52 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
저희가 제공하는 플러터용 라이브러리가 있습니다.
이걸 쓰시길 권장드릴께요.
플러터용 sdk 내에 tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱 스킴 URL로 변환
if (appScheme.isAppLink()) { // 앱 스킴 URL인지 확인
appScheme.launchApp(); // 앱 설치 상태에 따라 카드사 앱 실행 또는 앱마켓으로 이동
return NavigationDecision.prevent;
}
}
사용중입니다
ConvertUrl(url) 부분에서 intent URL이 앱스킴URL로 변경되지 않는 것 같아요
이용중인 플러터 패키지 이름이 무엇인가요
https://pub.dev/packages/tosspayments_widget_sdk_flutter
토스페이먼츠 공식 패키지는 이것 입니다
Dart packages
tosspayments_widget_sdk_flutter | Flutter Package
This SDK helps you easily link the 'toss payments' payment module on the flutter.
pubspec.yaml에 tosspayments_widget_sdk_flutter: ^1.0.2 추가 후
import 'package:tosspayments_widget_sdk_flutter/model/tosspayments_url.dart'; 하여 이용중입니다
네, 그럼 하나씩 볼게요
우선 flutter main 에서 플러그인 임포트 하셨다는것은 이해 되었습니다.
그후 웹뷰컨트롤은 네이티브 쪽에서 작업이 되어야 하는데, 위 전달주신 건 네이티브쪽 문제가 있다고 전달 주신 것으로 이해하면 될까요?
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
브라우저가 아닌 모바일 웹뷰로 결제창을 띄울 때 카드사별 결제수단을 인증하려면 외부 앱(3rd-party 앱)을 연동해야 합니다. 연동에 필요한 외부 앱 스킴(App URL Scheme)목록과 추가 로직을 살펴보세요.
https://docs.tosspayments.com/guides/webview#url-%EB%B3%80%ED%99%98%ED%95%98%EA%B8%B0
이 내용 말씀 하시는게 맞을까요?
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
브라우저가 아닌 모바일 웹뷰로 결제창을 띄울 때 카드사별 결제수단을 인증하려면 외부 앱(3rd-party 앱)을 연동해야 합니다. 연동에 필요한 외부 앱 스킴(App URL Scheme)목록과 추가 로직을 살펴보세요.
넵 이 내용입니다
저 에러는, 어떤 액션을 취하셨을때 맞이한 에러 인가요?
tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱 스킴 URL로 변환
print('변경 전 : ${url}');
print('변경 후 : ${appScheme.url}');
if (appScheme.isAppLink()) { // 앱 스킴 URL인지 확인
appScheme.launchApp(); // 앱 설치 상태에 따라 카드사 앱 실행 또는 앱마켓으로 이동
return NavigationDecision.prevent;
}
}
이렇게 로그를 찍어봤는데
I/flutter (27458): 변경 전 : intent://pay?payToken=lDV9FM9Zla0iajlRo0NL6c&isBnplShop=false&deviceType=mobile&isTossApp=false&appPayVersion=2.0#Intent;scheme=supertoss;package=viva.republica.toss;end
I/flutter (27458): 변경 후 : intent://pay?payToken=lDV9FM9Zla0iajlRo0NL6c&isBnplShop=false&deviceType=mobile&isTossApp=false&appPayVersion=2.0#Intent;scheme=supertoss;package=viva.republica.toss;end
둘 다 똑같이 나오는게 맞나요? intent가 http나 https로 convert되어 나오는게 맞나요?
제일 위 에러는 앱 설치하기를 눌렀을 때 나오는 에러입니다
앱이 설치된 상태에서, 결제하기를 진행 하시면 어떻게 되시나요?
영상으로 보내드리겠습니다!
app availability check 한 이후, 앱 설치 되어 있지 않으면 스토어로 보내는 부분에 대한 구현은 해주셔야 할것 같아요.
여기 함수 appScheme.launchApp(); 주석 내용과 별개로요?
webview lib 어떤거 쓰세요?
webview_flutter.dart 이용 중입니다
지금 받는 에러가 Unhandled Exception: Invalid argument (urlString): To use an in-app web view, you must provide an http(s) URL.: "market://details?id=viva.republica.toss"
이건가요?
네 맞습니다 스토어로 이동하면서 나오는 오류 같습니다
우선 정리해드릴게요
1가지만 더 확인 요청드려요
이미 앱이 설치되어있는 결제수단의 경우, 위 에러가 발생하지 않는게 맞는거죠?
제가 설명드린 부분은 무시 부탁 드립니다.
제가 내부 싱크가 덜 된 상태에서 가이드 드렸습니다
앱 설치가 되어있는 상황에서도 같은 에러 발생하네요
지금 flutter native component로 개발 하면서, tosspayemtns_flutter_sdk사용해서 개발 중이신가요?
아니면 웹뷰에 웹서버 띄워놓고, convertUrl만 외부앤 띄우는데 활용하시려는 걸까요?
지금 후자로 사용 중인게 맞으시죠?
네 맞습니다
웹뷰에 웹서버를 띄워 제작 중입니다
그러면 에러메세지만 봤을 때는, 귀사 웹뷰에서 http/https 외에는 허용하지 않는 것으로 보이는데 확인 가능할까요?
확인해보겠습니다!
확인되셨을까요?
혹시
android:usesCleartextTraffic="true">
말씀하신 설정이 이 설정이 맞을까요?
웹 서버 설정을 말씀하신건가요?
우선 귀사 mid 한번 공유해주시겠어요?
tankauction입니다
+
startsWith 로 검색했을 때, 웹뷰에서 특정 프로토콜만 허용하는 조건이 없나요?넵 그런 설정은 따로 없습니다
Dart packages
tosspayments_widget_sdk_flutter package - All Versions
Pub is the package manager for the Dart programming language, containing reusable libraries & packages for Flutter and general Dart programs.
여기서 다운로드 받아서 샘플 앱 실행했을 때도 동일한현상 발생하는지 확인해주실 수 있으세요?
더불어 위 mid는 현재 사용 불가한 상태인 것 같은데, 별도 계약 진행 중이신걸까요 ?
tankasset으로 확인 부탁드립니다!
우선 저도 다시한번 해당 소스코드 확인해볼게요.
example한번 확인해주고 계셔주세요
이렇게 진행되고 마지막 화면에서
무한로딩입니다
토스앱 로그인 되셨나요?
아뇨 미로그인입니다
로그인 안되어있어서 그렇습니다.
로그인하니 잘 넘어갑니다
네 그럼 해결된건가요..?
아뇨 샘플예제에서만 잘 넘어갑니다..
그럼 귀사 웹뷰 설정 문제로 보입니다. 이부분은 혹시 저희 쪽 이슈있는지 확인해서 오늘 중 공유드릴게요
넵 감사합니다.. 웹뷰 설정 다시한번 살펴보겠습니다
@비타500
이슈 확인되었습니다.
메세지 보면 말씀주세요
우선 import만 tosspayments_sdk_flutter: ^0.2.0로 변경해주시면 문제 없을겁니다
넵 적용 후 말씀 드리겠습니다
tosspayments_sdk_flutter: ^0.2.0으로 문제없이 작동됩니다.
그럼 tosspayments_widget_sdk_flutter로 바뀐 걸로 알고있는데 tosspayments_sdk_flutter로 계속 사용해도 문제 없나요?
converturl 로직만 사용하실 경우 문제 없습니다
네 알겠습니다. 감사합니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.