gkr
gkr2w ago

webview에서 앱카드 결제 문의 드립니다.

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

if (appScheme.isAppLink()) { // 앱스킴 URL인지 확인
appScheme.launchApp(mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return NavigationDecision.prevent;
}
}
tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱스킴 URL로 변환

if (appScheme.isAppLink()) { // 앱스킴 URL인지 확인
appScheme.launchApp(mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return NavigationDecision.prevent;
}
}
Future<bool> launchApp({LaunchMode mode = LaunchMode.externalApplication}) async {
if (Platform.isAndroid) {
try {
return await launchUrlString((await getAppLink())!, mode: mode);
} catch (e) {
return await launchUrlString((await getMarketUrl())!, mode: mode);
}
} else if (Platform.isIOS) {
final appLink = await getAppLink();
if (appLink != null) {
try {
if (await launchUrlString(appLink)) return true;
} catch (e) {
// pass
}
}

final marketUrl = await getMarketUrl();
if (marketUrl != null) {
try {
return await launchUrlString(marketUrl);
} catch (e) {
// pass
}
}
}
return false;
}
}
Future<bool> launchApp({LaunchMode mode = LaunchMode.externalApplication}) async {
if (Platform.isAndroid) {
try {
return await launchUrlString((await getAppLink())!, mode: mode);
} catch (e) {
return await launchUrlString((await getMarketUrl())!, mode: mode);
}
} else if (Platform.isIOS) {
final appLink = await getAppLink();
if (appLink != null) {
try {
if (await launchUrlString(appLink)) return true;
} catch (e) {
// pass
}
}

final marketUrl = await getMarketUrl();
if (marketUrl != null) {
try {
return await launchUrlString(marketUrl);
} catch (e) {
// pass
}
}
}
return false;
}
}
그걸 저희 sdk는 이런식으로 처리하고 잇꼬요 이걸 참고해서 구현해주시면 됩니다.
gkr
gkrOP2w ago
그 sdk를
이실장
이실장2w ago
저희 sdk를 쓰면 저희가 만들어둔 method를 그대로 사용하면되는데. 저희 sdk를 안쓴다고 하시니, 저희 method를 참고해서 구현해주시면 되요
gkr
gkrOP2w ago
import { ANONYMOUS, loadTossPayments } from "@tosspayments/tosspayments-sdk"; next에서 사용하고 있어도 flutter에서 받을수 있는걸까요 아니면 next에서 sdk를 쓰면서 flutter에서도 사용을 같이 해야 해당 내용을 받을 수 있는걸까요?
이실장
이실장2w ago
next인지는 중요한게 아닙니다. 결국 flutter에서 webview lib를 띄워서 웹서버를 호출해서 사용 중이신거잖아요?
gkr
gkrOP2w ago
넵 맞습니다
이실장
이실장2w ago
webview위에서 http:// 웹서버 위에 올라가 있는 웹사이트들이 쭉 문제없이 바뀔거에요 flutter 입장에서는 next인지는 중요하지 않고 웹서버 이고, http로 된 주소는 문제 없이 쭉이동이 가능합니다. 그리고 말씀해주신것처럼 appScheme처리도 하셨기 때문에 설치된 앱의 경우에는 정상적으로 이동가능한 상황이시죠?
gkr
gkrOP2w ago
넵 그렇습니다 appScheme는 toss 문서와 온전히 동일하게 설정하는것 맞을까요?
이실장
이실장2w ago
그것도 어떻게 구현하시는지에 따라서 설정할 필요가 있을수도 있고 없을수도있습니다. 암튼 지금 현상 자체만 말씀드리면
이실장
이실장2w ago
이런데서 앱카드 링크를 누르면 http:// 가 아니라 앱을 열기 위해 hanawalletmembers://로 시작하는 url이 호출됩니다.
No description
이실장
이실장2w ago
그런데 앱이 설치되어있지 않아서 아무일도 안일어나는거고요
if (hanawalletmembers:// 이 실행되었을 때 && 아무일도 일어나지 않는다면)
if (hanawalletmembers:// 이 실행되었을 때 && 아무일도 일어나지 않는다면)
이 조건문으로 각 앱스토어 링크를 연결해주시거나 해주시면 됩니다. native쪽 가이드이기 때문에 세부 코드 안내는 어렵고 개념만 설명드려요
gkr
gkrOP2w ago
혹시 저희 앱 개발자 분께서 이어서 질문 드려도 될까요?
이창재
이창재2w ago
안녕하세요. 해당 프로젝트 플러터 개발자입니다. 제가 이 스레드 이어 받아도 될까요
유부장
유부장2w ago
네, 이어서 편하게 말씀 주세요
이창재
이창재2w ago
현재 플러터에서도 설정을 마쳐 대부분의 결제가 무리없이 진행되고 있으나 ios에서는 모든 결제가 이상없이 진행됩니다. Android에서 국민/우리 만 현재 https://techchat.tosspayments.com/m/1351124894640898140 위 에러가 발생하고 있습니다. 하지만 이 프로젝트에서 사용하는건 web_view플러터가 아닌 inappwebview를 사용중이라 해당 이슈와도 다른 문제같습니다.
KBpay 결제 실패 문의 - Toss payments 개발자 커뮤니티
flutter를 이용하여 앱을 개발 중입니다. 샵바이를 통하여 결제 연동을 진행하고 있는데, 안드로이드에서 Intent scheme으로 카드사 앱을 이동시키는 과정에서 다른 카드사의 경우는 다 정상적으로 진행되는데, KBpay만 이동 및 실행되지 않는 이슈가 있습니다. 샵바이 ...
이실장
이실장2w ago
어떤 에러가 발생하면서 안되나요? https://discord.com/channels/864296203746803753/1354883436225106071 이쪽 한번 확인해보세요! 같은 이슈인지요
이창재
이창재2w ago
No description
이창재
이창재2w ago
해당 URL_SCHEME오류가 발생합니다
이실장
이실장2w ago
이건 그냥 단순히 intent처리를 못하신거네요 다른 카드사는 intent url처리를 어떻게하셨어요?
이창재
이창재2w ago
국민과 우리 두 건만 발생합니다
이실장
이실장2w ago
다른카드사는 어떻게 처리하셨나요?
이창재
이창재2w ago
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를 사용중이고 토스 공식 문서에 있는것을 참고하여 진행하였습니다
이실장
이실장2w ago
tossPaymentsWebview(uri.rawValue); 여기서 어떤 로직이 도나요? 저희 sdk타게 되나요?
이창재
이창재2w ago
onReceivedError로 빠집니다
이실장
이실장2w ago
import 'package:tosspayments_widget_sdk_flutter/model/tosspayments_url.dart';
tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱스킴 URL로 변환
if (appScheme.isAppLink()) { // 앱스킴 URL인지 확인
appScheme.launchApp(mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return NavigationDecision.prevent;
}
}
import 'package:tosspayments_widget_sdk_flutter/model/tosspayments_url.dart';
tossPaymentsWebview(url) {
final appScheme = ConvertUrl(url); // Intent URL을 앱스킴 URL로 변환
if (appScheme.isAppLink()) { // 앱스킴 URL인지 확인
appScheme.launchApp(mode: LaunchMode.externalApplication); // 앱 설치 상태에 따라 앱 실행 또는 마켓으로 이동
return NavigationDecision.prevent;
}
}
이걸실행시킨건지 궁금합니다.
이창재
이창재2w ago
넵 해당건 그대로 사용하고 있습니다. 앱이 설치되어 있지 않으면 해당 마켓으로 보내지긴 합니다만 마켓으로 보내지면서 앱의 화면은 위 화면처럼 오류를 반화하고 있습니다.
이실장
이실장2w ago
else {
// 그 외의 경우에는 tossPaymentsWebvew 함수로 검증
log(uri.rawValue);
convertUrl = tossPaymentsWebview(uri.rawValue);
log(converUrl)
return NavigationActionPolicy.CANCEL;
}
else {
// 그 외의 경우에는 tossPaymentsWebvew 함수로 검증
log(uri.rawValue);
convertUrl = tossPaymentsWebview(uri.rawValue);
log(converUrl)
return NavigationActionPolicy.CANCEL;
}
이렇게 전후 로그한번 찍어볼수 있을까요? flutter log함수명은 제가 정확히 기억이 안나서 한번 확인해서 해주시기 바랍니다.
이창재
이창재2w ago
넵 잠시만요 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을 찍어보겠습니다
이실장
이실장2w ago
네네
이창재
이창재2w ago
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'
이실장
이실장2w ago
I/flutter (20188): 변환된 URL!!!!!!!!!!Instance of 'ConvertUrl' 이게 appScheme찍은건가요?
이창재
이창재2w ago
네 그렇습니다
이실장
이실장2w ago
webconsole등에 는 에러메세지 있을까요?
이창재
이창재2w ago
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}} 이게 아마 안드로이드 웹뷰 오류 같네요
이실장
이실장2w ago
네 변환이 안됬네요
이창재
이창재2w ago
같은 메소드인데 ios는 이상없이 작동되고 안드로이드만 이런걸로 봐서 안드로이드 웹뷰쪽 문제 같긴합니다
이실장
이실장2w ago
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.
이실장
이실장2w ago
혹시 이거 실행해서 한번 해보실 수 있을까요? 웹서버 넣어서 띄울수 있는 샘플입니다.
이창재
이창재2w ago
바로 디버그로 실행시키면 되나요?
이실장
이실장2w ago
네~
이창재
이창재2w ago
이거 좀 오래된 플러터 버전 사용중이라 빌드 바꾸는데 시간 걸릴것 같습닏 urldmf url을 넣어야 하는거죠? intent://pay?srCode=6993036&tcodeSeq=1299370939&kb-acp://#Intent;scheme=kb-acp;package=com.kbcard.cxh.appcard;end; 이 인텐트를 넣고 실행해 보니 아무것도 실행되지 않네요
이실장
이실장2w ago
아뇨 그걸 실행시키는건 아니고 귀사 사이트를 넣고 실행시키면 됩니다. 동일하게 동작하는지 확인하려는 작업입니다.
이창재
이창재2w ago
사이트라고 말씀하시는게 구매 화면 말씀하시는걸까요
이실장
이실장2w ago
넵 혹시 올려서 하실수 있는게 없으시며 ㄴ 아래 확인해보세요 https://forhost.kr/tosspayments/sample.html
이창재
이창재2w ago
이건 잘되네요.. 음...
이실장
이실장2w ago
inappwebview 쓰신다고요?
이창재
이창재2w ago
네 이거 설마 디버깅에서는
이실장
이실장2w ago
webview_flutter는 아예 안쓰는거죠?
이창재
이창재2w ago
실행이 안될수도 있나요?
이실장
이실장2w ago
디버깅이라는게 usb꼽아두고요? 디바이스에서 실행하는거 말씀이신가요?
이창재
이창재2w ago
sp 네
이실장
이실장2w ago
kbpay는 그럴수도 있어요 한번 usb뽑고 해보실래요?
이창재
이창재2w ago
그럼 릴리즈 모드 apk추출해서 한번 해볼게요 그문제는 아닌것 같습니다 릴리즈 apk에서도 앱은 열립니다 우리은행 앱도 열리고요 우리은해 앱에서 결제하는 화면까지 이동도 됩니다 다만 현재 사용하는 앱에서 위 intent오류가 발생합니다.
이실장
이실장2w ago
https://discord.com/channels/864296203746803753/1354883436225106071 이 링크 한번 확인해서 해보실 수 있을까요
이창재
이창재2w ago
내ㅔㅂ 잠시만요 안됩니다..
이실장
이실장2w ago
이상하네요 kb pay도 앱은 실행되는데 뒤에 저게 남아있는건가요?
이창재
이창재2w ago
이실장
이실장2w ago
저희 샘플 실행해보셔서 아시겠지만 워낙 lib 버전이나 dart버전등에 따라 동작이 천차만별이어서요 저희쪽에서 더 이상 확인해드리기가 어렵네요
이창재
이창재2w ago
아...
이실장
이실장2w ago
앱이 실행된거보면 처리는 모두 정상인데
이창재
이창재2w ago
dk 아 되네요 하
이실장
이실장2w ago
어떤게 문제였나요?
이창재
이창재2w ago
이거 공지를 해주셔야 할것 같아요ㅕ inappwebview속성중에 useShouldInterceptRequest: false로 하니깐 문제없이 작동되요 해당건이 true이면 아까처럼 되고요
Minsu Kim
Minsu Kim2w ago
GitHub
[Android] useShouldInterceptRequest and shouldOverrideUrlLoading no...
Setting InAppWebViewSettings inAppWebViewSettings(String? path) { return InAppWebViewSettings(allowingReadAccessTo: WebUri(path!), allowContentAccess: true, useShouldOverrideUrlLoading: true, useSh...
Minsu Kim
Minsu Kim2w ago
관련 이슈가 깃허브에 있네요
이실장
이실장2w ago
No description
이실장
이실장2w ago
처음에 안내 드렸던 내용이긴 합니다..!
Minsu Kim
Minsu Kim2w ago
파라미터가 약간 다릅니다!
이실장
이실장2w ago
useShouldInterceptFetchRequest 가 아니라 useShouldInterceptRequest군요
Minsu Kim
Minsu Kim2w ago
이번 문제 건에서는 useShouldInterceptRequest, 해당 문의건에서는 useShouldInterceptAjaxRequest/useShouldInterceptFetchRequest 네요 네네
이창재
이창재2w ago
네네 저 두개 넣었을때는 안됬는데 useShouldInterceptRequest: false, 이건 넣으니깐 되네요 원래 인터셉트 때문에 true로 설정되어있었어요
이실장
이실장2w ago
기본값이 false인데 true로 설정하시는 경우는 어떤 목적일까요? 궁금해서 문의드려요
이창재
이창재2w ago
이게 저도 레거시 코드라 이 파라미터가 뭔지 확인해볼게요 잠시만요
이실장
이실장2w ago
뭔가 로깅하는데 사용할 수도 있겠네요
이창재
이창재2w ago
아 이게 안드로이드만 실행되는 파라미터네요 그래서 ios는 문제없이 실행되고 안드만 안됬던거네요
이실장
이실장2w ago
해결되셨다니 다행입니다. flutter가 워낙 변수가 많네요 lib도 다양하고요
이창재
이창재2w ago
크로스 플랫폼이고 게속 업데이트가 되다보니 쉽지 않네요
이실장
이실장2w ago
webview를 fork떠서 특정버전으로 고정해두시는 것도 방법일 수 있을 것 같습니다.. ㅎㅎ 진행하시면서 추가 확인필요한 사항은 말씀주시고요 늦은시간까지 고생많으셨습니다.
이창재
이창재2w ago
넵 늦은시간까지 수고하셨슴니다
토스페이먼츠 BOT
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.

Did you find this page helpful?