신용/체크카드 > 카카오뱅크 결제 오류 문의드립니다.
웹뷰 환경에서 해당 기능 동작에 장애가 발생하고 있어서 문의드립니다.
저희는 결제창 Javascript SDK 를 사용하고 있습니다.
저희 앱(웹뷰) 환경에서 신용/체크카드 > 카카오뱅크 결재 시 첫번째 스크린샷이 노출되고 결제하기 선택 시 두번째 스크린샷 화면으로 이동되고 확인 버튼을 눌러도 아무 반응하지 않습니다.
어떤 부분에 문제가 있는지 알기 어려워 문의드립니다.
71 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
앱에서 테스트하신걸까요?
다른 카드사 앱은 잘 이동하는지 확인 부탁드려요
가맹점 앱에서 결제앱(3rd-party)을 호출하는 경우 외부 앱 허용이 필요합니다.
아래 링크 내용 적용하셨는지 확인 부탁드려요.
https://docs.tosspayments.com/guides/webview
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
브라우저가 아닌 모바일 웹뷰로 결제창을 띄울 때 카드사별 결제수단을 인증하려면 외부 앱(3rd-party 앱)을 연동해야 합니다. 연동에 필요한 외부 앱 스킴(App URL Scheme)목록과 추가 로직을 살펴보세요.
@박수습 안녕하세요.
일단 다른 카드사 앱은 잘 동작합니다.
카카오뱅크만 동작을 하지 않고 있고 있습니다.
보내주신 가이드 보면 앱스킴 리스트와 aos, ios 설정을 확인했는데요.
해당 페이지의 모든 스킴은 잘 등록되어있습니다.
1) ISP 페이북 앱 설치 되어 있으신가요?
2) 앱 설치되어 있지 않을때, 스토어로 이동되는 코드가 구현 되어 있으신가요?
@유부장
1) ISP 페이북 앱 설처 여부와 관련이 없이 동일하게 오류 발생합니다.
2) ISP 앱 설치 되지 않을때 스토어로 이동하는 코드를 저희가 넣어야 하는건가요?
저희 앱도 아니라서 이상한것 같습니다.
앱 설치되어 있지 않을때, 스토어로 이동되는 코드가 구현 되어 있으신가요? -> 위에 박수습님이 보내주신 링크 보시고 Webview 로직 구현 부탁드립니다.
@Ayaan 아~ 마켓으로 연결하는 코드 말씀이시죠?
일단 앱이 있는 경우에도 안되는 이슈라서 이건 해당 코드 여부와 관련이 없어보이는데요.
아닐까요?
네.
해당 Webview 로직 전체가 구현되어야 합니다.
해당 webview 로직 구현이 이슈라면 다른 모든 앱카드 연동에 이슈가 있어야 할것 같은데요.
카카오뱅크만 이슈가 있어서요
BC카드와 국민카드->ISP결제 들어가셨을 때는
이슈가 없나요?
카카오뱅크는 BC카드 결제망을 사용하므로 BC 및 국민 ISP에서도 동일한 이슈가 있으면 연동 문제라고 볼 수 있겠습니다.
@Ayaan BC 카드는 페이북 앱이 잘 노출되고, 카카오뱅크는 노출되지 않네요.
혹시 어떤 언어, 어떤 OS에서 발생하는지 알 수 있을까요?
앱은 RN 으로 개발되어 있지만 토스페이먼츠는 브라우저 SDK를 통해 처리하고 있습니다.
RN...이군요 잠시만요
국민카드의 경우 KB Pay 노출이라서 잘 되는것 같습니다.
아뇨 국민카드에서 하단 ISP인증서 결제 버튼 눌러서 봐주셔야 합니다.
KB Pay말고 ISP/페이북으로 결제하는 메뉴가 있어서요.
일단 해당 문서 참고해서 연동하셨는지 확인부탁드릴게요.
@Ayaan 아래의 스크린샷 메뉴에서 카드사 선택을 하고 있는데요.
결제창 방식이군요.
비씨(페이북) 의 경우 잘 처리되는데 뜨는 화면이 조금 다르네요.
이경우 ISP 페이북 잘뜹니다.
넵 위에 결제창 Javascript SDK 을 사용하고 있다고 적어두었습니다.
KB -> ISP인증서나 Kbank, 우체국카드 등은 어떻게 나오나요?
KB 국민(KB Pay) 선택후 최하단 ISP 인증서 결제 선택하면 카카오뱅크와 동일하게 동작하지 않네요.
확인했습니다.. 요 문서 확인하셔서 연동하신 앱과 차이가 혹시 있는지 확인해보시겠어요?
저는 일단 위에 보내드린 노션 문서의 샘플코드로 정상 결제 되는 점 확인했습니다.
pdf 파일 말씀하시는거죠?
일단 앱스킴은 및 설정은 동일하게 작성되어있고, 코드는 아직 확인해보지 못했습니다.
@Ayaan 샘플코드 처럼 작성되지 않았을경우.. 이처럼 특정 케이스만 동작안할수있나요?
모든 앱카드 연동이 잘못됬다면 이해가 되는데 특정 동작만 안되는게 이상하긴해서요.
카드사마다 호출 방식이 다르다 보니(아예 스킴 포맷이 다른 경우도 종종있음), 특정 핸들링 로직이 누락되면 안되는 경우도 있습니다..
최대한 웹뷰 핸들링 부분은 샘플과 동일하게 맞춰주시는게 좋습니다.
@Ayaan 코드는 확인해보니 동일한 형태로 들어가있긴하네요.
if (isIos) {
// url.startsWith(data.url)
Linking.canOpenURL(data.url).then(canOpen => {
if (canOpen) Linking.openURL(data.url);
else showAlert(('CANNOT_OPEN_THE_PAGE'));
});
} else {
SendIntentAndroid.openAppWithUri(data.url)
.then(isOpened => {
if (!isOpened) showAlert(('CANNOT_OPEN_THE_PAGE'));
})
.catch(err => {
console.log(err);
});
}
아 혹시 코드는 보내주실 때,
이거 앞뒤로 3번씩 감싸주시겠어요?
\``
// 코드 작성
```
이런식으로 보내주시면 확인에 도움이 됩니다.
@Ayaan 조금 달라보이는 부분은 RN WebView Component 의 props 로 있는 originWhitelist 값이 pdf 에는 "" 이지만 저희는 지정해서 사용하고 있긴합니다.
이부분은 앱스킴에 있는 부분이 적용되어 있습니다.
```
const originWhitelist = ['https://', 'http://', 'intent:', 'kakaolink://', 'naversearchthirdlogin://',
'naversearchapp://', 'supertoss://', 'kb-acp://', 'iivbank://', 'nhappcardansimclick://', 'nhallonepayansimclick://',
'nonghyupcardansimclick://', 'lottesmartpay://', 'lotteappcard://', 'mpocket.online.ansimclick://', 'ansimclickscard://', 'tswansimclick://',
'ansimclickipcollect://', 'vguardstart://', 'samsungpay://', 'scardcertiapp://', 'shinhan-sr-ansimclick://', 'smshinhanansimclick://',
'com.wooricard.wcard://', 'newsmartpib://', 'citispay://', 'citicardappkr://', 'citimobileapp://', 'cloudpay://',
'hanawalletmembers://', 'hdcardappcardansimclick://', 'smhyundaiansimclick://', 'shinsegaeeasypayment://', 'payco://', 'lpayapp://',
'ispmobile://', 'tauthlink://', 'ktauthexternalcall://', 'upluscorporation://', 'hanaskcardmobileportal://', 'wooripay://',
'lmslpay://', 'imslpay://', 'newliiv://', 'liivbank://', 'kbbank://', 'kftc-bankpay://', 'kb-bankpay://', 'nhappcash-acp://',
'chaipayment://', 'kb-auth://', 'hyundaicardappcardid://'
];
```
canOpenUrl을
openUrl로 바꿔보세요
openUrl만 사용해보세요
@이실장 해당 코드 이슈면 IOS에서만 안되어야 하는데요;; AOS, IOS 모두 동일하게 안됩니다.
양쪽 다 안되시는 상황이신건가요?
네
지금
웹뷰위에 웹서버 띄워놓으신거죠?
@이실장 운영앱에서 동일하게 발생하는 이슈라서요.
개발중인 이슈가 아니에요 ^^;
웹뷰위에 웹서버 띄워놓으신거죠?
네
android도 위 카드사만 안되나요?
네 동일합니다.
페이북 앱은 설치되어있나요?
네
위 내용 읽어주시면 감사합니다.
지금 테스트 중인 핸드폰이 PC에 연결되어잇꺼나
특정 와이파이/사내/vpn망에 연결되어있나요?
실효폰에서도 동일합니다.
LTE 망 사용시나 테더링 wifi는 퍼블릭한 상황입니다.
모든 상황에서 모든 상태가 IOS/AOS 구분하지않고 동일합니다.
@이실장 BC 카드 제외하고는 넘어가지 않는다고 문의드리는 중입니다.
안드로이드앱 영상 올려드려요.
BC로 했을 떄는 어떻게되나요?
페이북 실행됩니다.
일단 저희 RN 샘플앱에서는 동일한 현상이 발생하지 않습니다. native의 경우 워낙 연동방식이 다양하기 때문에 더이상 원인 확인이 어렵네요.
pdf문서 확인하셔서 샘플앱에서는 이상이 없는지 우선 확인이 필요할 것 같습니다.
- 저희 쪽 서비스에는 이상이 없다.
- RN자체에도 이상은 없다.
정리하면,
비씨 화면을 통한 ISP결제는 정상
타 카드사 화면(우체국 제외) 통한 ISP결제시 오류 발생
모든 OS동일하게 100%확률 발생, 샘플 소스와 코드 상 다른 부분 없음
맞을까요?
@Ayaan 저희가 마무리하겠습니다.
@Ayaan 비씨 , 우체국 제외하고 ISP 결제 시 오류 발생하며, 모든 OS 동일하고 , 100% 재현됩니다.
샘플코드와 100% 매칭되지는 않겠지만 주요 코드를 알려주시면 적용해볼수있을것 같습니다.
넵 알겠습니다. 단순히 이야기가 반복되고 있는 것 같아 중간 정리 하였습니다. ^^
비씨, 우체국의 경우 ISP 네이밍이 아닌 페이북으로 표시되는데 이런 경우는 페이북 앱으로 잘 이동되고, ISP 워딩이나 카카오뱅크는 동작하지 않습니다.
@이실장 위 코드는 동일합니다. RN도 버전에 따른 웹뷰가 다를텐데 단순 코드만 가지고 의견 주시는 부분도 이해되지 않습니다.
화이트 리스트를 없애고 한번 실행해보시기 바랍니다.
카카오뱅크에서 페이북으로 넘길 때 그 중간에 화이트리스트에 포함되지 않은 url이 포함될 수 있습니다
최근 RN에서 웹뷰 문법상의 업데이트가 없었습니다. (즉 코드는 동일합니다)
그부분도 테스트는 진행해볼수 있겠지만, 사용앱에도 모든 list 를 허용 할수 없지 않나요?
그래서 가이드에 있는 앱스킴은 모두 허용된 상태입니다.
우선 원인 파악을 해야할 것 같습니다.
화이트 리스트에서 걸리는건지
@이실장 네 그런 경우가 있을것 같은데요. 그럼 어떤 URL이 필요한지도 추후에는 가이드가 될까요?
아니면 다른 이슈인지
우선 이상이 없으면 중간중간 url이 어떻게 바뀌는지 로그 찍어서 확인해봐야할 것 같아요
@Ayaan 코드보다는 RN 버전에 따른 웹뷰 오류가 있지 않을까 합니다. 저희는 0.68.0 버전을 사용하고 있습니다.
최근 RN에서 웹뷰 관련 업데이트는 없었습니다. 말씀해 주신 0.68.0 에서 샘플 앱 잘 실행됩니다.
카카오뱅크의 경우 공유해주신 브릿지에서 페이북 넘어가기전에 아래 페이지를 한번 더 거칩니다.
@이실장 일단 화이트리스트를 풀고 확인후 답변드리겠습니다.
@이실장 일단 저희 whitelist 에 https://* 값이 있어서 넘어가지 않았을까 싶은데요.
정확한건 코드가이드에 있는 ["*"] 처리후 다시 문의드리겠습니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.