webview에서 앱카드 결제 문의 드립니다.
webview에서 앱카드 결제 문의 드립니다.
현재 fluter에서 next를 웹뷰로 사용하면서 next에서 toss sdk(결제창)을 연결해 사용중입니다.
카카오 뱅크나 토스 등의 결제는 잘 되는데 앱카드 결제시에 계속해서 오류가 나오고 아무런 동작이되지 않습니다.
이부분은 어떻게 해결할 수 있을까요?
112 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
웹뷰 처리는 하셨나요
fluter 개발자가 우선 앱스키마 처리는 했다고 합니다
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.
요거 처리되어있다면 문제가 발생하지 않아야합니다
플루터 부분 참고해서 다시한번만 확인해보셔요
간혹 해당 앱이 안깔려있으면 멈추는 경우가 있으나
올바르게 처리를 하셨다면 앱스토어가 알아서 열립니다
flutter도 문서와 같이 플러그인 추가해서 작업이 되야한다는 말씀이실까요?
네네
앱스킴 처리, 플러그인 처리까지
모두 올바르게 되어야합니다
넵 확인후 다시 말씀드리곘습니다
저희 플러터 개발자께서 질문드려서 다시한번 답변 요청드립니다
현재 플러터쪽에서 토스페이먼츠 sdk를 설치해서 보여주는게 아니라 플러터쪽은 해당 sdk설치가 안되어 있으며,
웹뷰를 띄워서 js에서 토스페이먼츠를 실행하고 있는 상황이며
문서에서 작성된 tossPaymentsWebview 메소드는 실행되고 있지 않은 상태에서 js에서 모든 토스 페이먼츠 흐름이 진행되고 있습니다.
이런 상황에서 해당 문서에 보이는 것처럼 토스 페이먼츠 sdk를 플러터에서 설치 후 보여줘야 하는건지
아니면 js에서 따로 앱링크를 설정해서 보여줘야 하는건지 문의드립니다
어떤 오류가 발생하는지 좀더 자세히 화면이나 영상으로 제공해주세요
앱설치되어있으세요?
설치 되어있지 않습니다
네 그래서 그렇습니다.
앱 설치가 안되어있으면 이게 정상인건가요?
모든 카드사 동일 하다고 보면 될까요?
네 맞습니다.
앱설치 후에 다시한번 해보세요
따로 저희 쪽에서 처리할 수 있는 방안은 없을까요?
앱이 안열릴 때 에러메세지가 잡힐거에요
해당 에러를 catch해서
앱설치가 안된걸 webview에서 인지한다던디
각 appstore가 열리도록
직접 링크 걸어주시면 도비니다.
appscheme별로 구분해서요
에러메세지는 console.error 말씀이실까요?
아뇨 flutter webview에서 열수 없는 url이라고 에러가 떨어져있을거에요
web 쪽말고요
금방 확인해보겠습니다
flutter에서는 해당 에러를 확인 할수 없다고 합니다
관련된 에러를 받고있지 않다고 합니다
https://pub.dev/packages/tosspayments_widget_sdk_flutter/versions
여기서
import 'package:tosspayments_widget_sdk_flutter/model/tosspayments_url.dart';
경로 파일 한번 확인해보시도록 안내해주세요.
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.
이건 네이티브 쪽 처리 부분이라 위에 참고해서 구현해주시면 됩니다.
지금 저희가
toss 결제 서비스를 flutter에서 설정한게아니라
저 sdk는 안쓰셔도 되는데요. 저쪽 파일 보시면 저희가 어떻게 처리했는지 참고하실 수 이씅ㄹ거에요!
next를 이용해서 결제서비스를 이용하고 있거든요
이런 내용과 별개인가요?
지금 앱이 설치 안되었을 때 아무 반응이 없는건 정상적인 현상입니다.
앱실행하기 버튼을 눌렀을 때, hyundai:// 같은 링크를 webview에 띄워달라고 요청이 갔을텐데
앱이 설치가 안되었으니 아무 반응이 없는거에요
아무 반응이 없을 때 return 'https://apps.apple.com/app/id702653088';
이렇게 앱스토어로 연결하게 하는 처리가 필요합니다.
해당 요청이 webview는 아예 오지 않았다고 합니다
저희쪽 보면 이렇게 처리를 해두었어요

네 그래서 위에 경로 파일 참고해서 진행해보시면 될 것 같아요
그리고 위 처리는 꼭 안하셔도 됩니다
대부분 서비스가 위처리를 하지 않고 있습니다.
- 고객은 본인이 설치한 카드를 선택한다.
- 카드사 브릿지에서 앱설치하기 경로를 제공한다.
next.js에서 요청 보낸거를
flutter webview에서 확인이 가능하는 말씀이신거죠?
nextjs에서 요청보낸거를 확인하는게 아니라
앱실행 버튼을 눌렀을 때 화면 웹뷰쪽으로 화면전환을 어디로 시켜달라는 요청이 들어갔을거에요.
그걸 저희 sdk는 이런식으로 처리하고 잇꼬요
이걸 참고해서 구현해주시면 됩니다.
그 sdk를
저희 sdk를 쓰면 저희가 만들어둔 method를 그대로 사용하면되는데.
저희 sdk를 안쓴다고 하시니, 저희 method를 참고해서 구현해주시면 되요
import { ANONYMOUS, loadTossPayments } from "@tosspayments/tosspayments-sdk";
next에서 사용하고 있어도 flutter에서 받을수 있는걸까요
아니면 next에서 sdk를 쓰면서
flutter에서도 사용을 같이 해야 해당 내용을 받을 수 있는걸까요?
next인지는 중요한게 아닙니다. 결국 flutter에서 webview lib를 띄워서 웹서버를 호출해서 사용 중이신거잖아요?
넵 맞습니다
webview위에서 http:// 웹서버 위에 올라가 있는 웹사이트들이 쭉 문제없이 바뀔거에요
flutter 입장에서는 next인지는 중요하지 않고 웹서버 이고, http로 된 주소는 문제 없이 쭉이동이 가능합니다.
그리고 말씀해주신것처럼 appScheme처리도 하셨기 때문에 설치된 앱의 경우에는 정상적으로 이동가능한 상황이시죠?
넵 그렇습니다
appScheme는 toss 문서와 온전히 동일하게 설정하는것 맞을까요?
그것도 어떻게 구현하시는지에 따라서
설정할 필요가 있을수도 있고 없을수도있습니다.
암튼 지금 현상 자체만 말씀드리면
이런데서 앱카드 링크를 누르면 http:// 가 아니라 앱을 열기 위해 hanawalletmembers://로 시작하는 url이 호출됩니다.

그런데 앱이 설치되어있지 않아서 아무일도 안일어나는거고요
이 조건문으로 각 앱스토어 링크를 연결해주시거나 해주시면 됩니다.
native쪽 가이드이기 때문에 세부 코드 안내는 어렵고 개념만 설명드려요
혹시 저희 앱 개발자 분께서 이어서 질문 드려도 될까요?
안녕하세요. 해당 프로젝트 플러터 개발자입니다. 제가 이 스레드 이어 받아도 될까요
네, 이어서 편하게 말씀 주세요
현재 플러터에서도 설정을 마쳐 대부분의 결제가 무리없이 진행되고 있으나
ios에서는 모든 결제가 이상없이 진행됩니다.
Android에서 국민/우리 만 현재 https://techchat.tosspayments.com/m/1351124894640898140
위 에러가 발생하고 있습니다. 하지만 이 프로젝트에서 사용하는건 web_view플러터가 아닌 inappwebview를 사용중이라 해당 이슈와도 다른 문제같습니다.
KBpay 결제 실패 문의 - Toss payments 개발자 커뮤니티
flutter를 이용하여 앱을 개발 중입니다.
샵바이를 통하여 결제 연동을 진행하고 있는데, 안드로이드에서 Intent scheme으로 카드사 앱을 이동시키는 과정에서 다른 카드사의 경우는 다 정상적으로 진행되는데, KBpay만 이동 및 실행되지 않는 이슈가 있습니다.
샵바이 ...
어떤 에러가 발생하면서 안되나요?
https://discord.com/channels/864296203746803753/1354883436225106071
이쪽 한번 확인해보세요! 같은 이슈인지요

해당 URL_SCHEME오류가 발생합니다
이건 그냥 단순히 intent처리를 못하신거네요
다른 카드사는 intent url처리를 어떻게하셨어요?
국민과 우리 두 건만 발생합니다
다른카드사는 어떻게 처리하셨나요?
shouldOverrideUrlLoading:
(controller, navigationAction) async {
final uri = navigationAction.request.url!;
if (uri.scheme == 'http' || uri.scheme == 'https') {
// 표준 웹 URL 체크
return NavigationActionPolicy.ALLOW;
} else {
// 그 외의 경우에는 tossPaymentsWebvew 함수로 검증
tossPaymentsWebview(uri.rawValue);
return NavigationActionPolicy.CANCEL;
}
inappwecview를 사용중이고
토스 공식 문서에 있는것을 참고하여 진행하였습니다
tossPaymentsWebview(uri.rawValue);
여기서 어떤 로직이 도나요?
저희 sdk타게 되나요?
onReceivedError로 빠집니다
이걸실행시킨건지 궁금합니다.
넵 해당건 그대로 사용하고 있습니다.
앱이 설치되어 있지 않으면 해당 마켓으로 보내지긴 합니다만
마켓으로 보내지면서 앱의 화면은 위 화면처럼 오류를 반화하고 있습니다.
이렇게 전후 로그한번 찍어볼수 있을까요?
flutter log함수명은 제가 정확히 기억이 안나서 한번 확인해서 해주시기 바랍니다.
넵 잠시만요
tossPaymentsWebview(uri.rawValue);이게 반환값이 bool여서 로그 찍으면 bool으로 나올것 같은데요
tossPaymentsWebview(url) async {
final appScheme = ConvertUrl(url); // Intent URL을 앱 스킴 URL로 변환
if (appScheme.isAppLink()) {
// 앱 스킴 URL인지 확인
await appScheme.launchApp(
mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return true;
}
return false;
}
이 메소드 내부에서
appScheme을 찍어보겠습니다
네네
I/flutter (20188): RAW VALUE!!!!!!intent://pay?srCode=5204605&tcodeSeq=1299369015&kb-acp://#Intent;scheme=kb-acp;package=com.kbcard.cxh.appcard;end;
I/flutter (20188): 변환된 URL!!!!!!!!!!Instance of 'ConvertUrl'
I/flutter (20188): 변환된 URL!!!!!!!!!!Instance of 'ConvertUrl' 이게 appScheme찍은건가요?
네 그렇습니다
webconsole등에 는 에러메세지 있을까요?
I/flutter (20188): onReceivedError :: intent://pay?srCode=6993036&tcodeSeq=1299370939&kb-acp://#Intent;scheme=kb-acp;package=com.kbcard.cxh.appcard;end;
I/flutter (20188): WebResourceError{description: net::ERR_UNKNOWN_URL_SCHEME, type: UNSUPPORTED_SCHEME
이렇게 나옵니다
[AndroidInAppWebViewController] (android) WebView ID 4 calling "onReceivedError" using {request: {headers: {Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.7, Upgrade-Insecure-Requests: 1}, isRedirect: false, method: GET, hasGesture: true, isForMainFrame: false, url: intent://pay?srCode=6993036&tcodeSeq=1299370939&kb-acp://#Intent;scheme=kb-acp;package=com.kbcard.cxh.appcard;end;}, error: {description: net::ERR_UNKNOWN_URL_SCHEME, type: -10}}
이게 아마 안드로이드 웹뷰 오류 같네요
네 변환이 안됬네요
같은 메소드인데 ios는 이상없이 작동되고
안드로이드만 이런걸로 봐서
안드로이드 웹뷰쪽 문제 같긴합니다
GitHub
GitHub - youjun-lee/flutter_webview_sample_app: flutter webview sample
flutter webview sample. Contribute to youjun-lee/flutter_webview_sample_app development by creating an account on GitHub.
혹시 이거 실행해서 한번 해보실 수 있을까요?
웹서버 넣어서 띄울수 있는 샘플입니다.
바로 디버그로 실행시키면 되나요?
네~
이거 좀 오래된 플러터 버전 사용중이라
빌드 바꾸는데 시간 걸릴것 같습닏
urldmf
url을 넣어야 하는거죠?
intent://pay?srCode=6993036&tcodeSeq=1299370939&kb-acp://#Intent;scheme=kb-acp;package=com.kbcard.cxh.appcard;end;
이 인텐트를 넣고 실행해 보니
아무것도 실행되지 않네요
아뇨 그걸 실행시키는건 아니고
귀사 사이트를 넣고 실행시키면 됩니다.
동일하게 동작하는지 확인하려는 작업입니다.
사이트라고 말씀하시는게
구매 화면 말씀하시는걸까요
넵
혹시 올려서 하실수 있는게 없으시며 ㄴ
아래 확인해보세요
https://forhost.kr/tosspayments/sample.html
이건 잘되네요..
음...
inappwebview 쓰신다고요?
네
이거 설마
디버깅에서는
webview_flutter는 아예 안쓰는거죠?
실행이 안될수도 있나요?
디버깅이라는게
usb꼽아두고요?
디바이스에서 실행하는거 말씀이신가요?
sp
네
kbpay는 그럴수도 있어요
한번 usb뽑고 해보실래요?
그럼 릴리즈 모드 apk추출해서
한번 해볼게요
그문제는
아닌것 같습니다
릴리즈 apk에서도
앱은 열립니다
우리은행 앱도 열리고요
우리은해 앱에서 결제하는 화면까지 이동도 됩니다
다만 현재 사용하는 앱에서
위 intent오류가 발생합니다.
https://discord.com/channels/864296203746803753/1354883436225106071
이 링크 한번 확인해서 해보실 수 있을까요
내ㅔㅂ 잠시만요
안됩니다..
이상하네요
kb pay도 앱은 실행되는데
뒤에 저게 남아있는건가요?
넵
저희 샘플 실행해보셔서 아시겠지만
워낙 lib 버전이나 dart버전등에 따라
동작이 천차만별이어서요
저희쪽에서 더 이상 확인해드리기가 어렵네요
아...
앱이 실행된거보면 처리는 모두 정상인데
dk
아
되네요
하
어떤게 문제였나요?
이거 공지를 해주셔야 할것 같아요ㅕ
inappwebview속성중에
useShouldInterceptRequest: false로 하니깐 문제없이 작동되요
해당건이 true이면 아까처럼 되고요
GitHub
[Android] useShouldInterceptRequest and shouldOverrideUrlLoading no...
Setting InAppWebViewSettings inAppWebViewSettings(String? path) { return InAppWebViewSettings(allowingReadAccessTo: WebUri(path!), allowContentAccess: true, useShouldOverrideUrlLoading: true, useSh...
관련 이슈가 깃허브에 있네요

처음에 안내 드렸던 내용이긴 합니다..!
파라미터가 약간 다릅니다!
useShouldInterceptFetchRequest 가 아니라 useShouldInterceptRequest군요
이번 문제 건에서는 useShouldInterceptRequest, 해당 문의건에서는 useShouldInterceptAjaxRequest/useShouldInterceptFetchRequest 네요
네네
네네
저 두개 넣었을때는
안됬는데
useShouldInterceptRequest: false, 이건 넣으니깐 되네요
원래 인터셉트 때문에
true로 설정되어있었어요
기본값이 false인데 true로 설정하시는 경우는 어떤 목적일까요?
궁금해서 문의드려요
이게 저도
레거시 코드라
이 파라미터가 뭔지 확인해볼게요 잠시만요
뭔가 로깅하는데 사용할 수도 있겠네요
아
이게
안드로이드만 실행되는 파라미터네요
그래서 ios는 문제없이 실행되고
안드만 안됬던거네요
해결되셨다니 다행입니다.
flutter가 워낙 변수가 많네요
lib도 다양하고요
크로스 플랫폼이고
게속 업데이트가 되다보니 쉽지 않네요
webview를 fork떠서 특정버전으로 고정해두시는 것도 방법일 수 있을 것 같습니다.. ㅎㅎ
진행하시면서 추가 확인필요한 사항은 말씀주시고요 늦은시간까지 고생많으셨습니다.
넵 늦은시간까지 수고하셨슴니다
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.