플러터에서 토스 페이먼츠 연동 문의 드립니다.
안녕하세요.
tosspayments_sdk_flutter를 이용하여 플러터 연동을 시도하고 있습니다.
연동하는 중에 문의 사항이 있어 질문드립니다.
1.
카드사 앱에서 결제 완료했을 때 콜백으로 웹브라우저가 켜지는데
PaymentData.successUrl 에 지정한 url로 이동하지 않습니다.
카드사 앱에서 결제 완료 했을 때 다이나믹링크를 지정하여 저희 앱으로 돌아오게 하고 싶습니다.
2.
또한 수동으로 앱으로 이동했을 때 카드사 웹뷰에서 '결제완료'버튼을 누르면
무한 로딩이 걸리면서 더이상 동작이 없습니다.
success 콜백이 호출되는 것은 확인 했으나
다시 앱 화면으로 돌아오지는 않았습니다.
제가 success콜백에서 pop코드를 넣어줘야 하는 부분일까요?
제가 연동하면서 미처 설정하지 못한 것이 있을까요?
소스코드:
Get.to(() => TossPayments(
clientKey: '',
data: PaymentData(
successUrl: "https://epicone.page.link/n9hg",
paymentMethod: '카드',
amount: 10,
orderId: 'test_order_id',
orderName: "test",
),
success: (success) {
print(success);
if (success != null) {}
},
fail: (fail) {
print(fail);
},
));
환경:
Flutter SDK3.10.5
tosspayments_sdk_flutter: ^0.1.7
IOS 16.5.1
IPhone 11
Safari
감사합니다
16 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요
몇가지 확인 요청 드려요
1. 플러터 내 웹뷰를 통해서 서비스 웹을 띄우고, 그곳에서 결제프로세스를 진행하고 있으신가요? 아니면 Native 로 결제를 처리하고 있으신가요?
2. successUrl 에 명시된 주소의 경우 웹 주소로 이해 하면 될까요?
3. successUrl 에 명시된 주소에서 승인 API 호출 로직은 구현한 상태 이신가요?
위 내용을 정리해주시면,
결제 프로세스에서 카드사 앱에서 기존 앱으로 돌아가는 것에 대해서 설명 드릴 수 있을것 같아요
그리고 카드 결제의 경우, 최소 100원 이상 이셔야 하는점도 참고 해주시면 좋아요
다이나믹 링크를 말씀 주셨는데,
결제 요청을 할때 저희 측에 앱 스킴을 넘길 수 있도록 하고 있고,
결제완료 된 이후에 전달된 해당 앱 스킴으로 돌아가도록 지원하는 기능이
OS / 카드사 마다 동작하는 것이 조금씩 다릅니다
그래서, 지금 결제를 시작하는 부분이 웹뷰인지 알려주시면 이를 기반으로 F/U 설명을 드릴 수 있을것 같습니다.
flutterSDK 사용시 paymentData.successurl은 변경불가합니다
방식이 sdk 호출시 웹뷰가 뜨고, 웹뷰내에서 승인 후 웹뷰를 닫고 다시 콜백을 줍니다
콜백 받는데에서 원하는대로 이동하세요
샘플앱 띄워보시기 바랍니다
sdk에 example파일도 넣어두었어요~
먼저 답변 감사합니다!
1.
저희가 웹뷰를 따로 띄우지 않고 sdk에서 띄워주는 웹뷰를 사용중입니다. Native는 사용하지 않고 Flutter만 사용중입니다. 저희가 계획한 결제 프로세스는
Flutter 결제화면 -> SDK 호출 -> SDK에서 띄운 카드사 선택 웹뷰 -> 카드사 앱으로 이동 -> 결제 -> SDK에서 띄운 웹뷰로 이동 -> SDK에서 띄운 웹뷰에서 '결제완료' 버튼 클릭 -> success콜백으로 결제완료 백엔드 API 호출
입니다.
2. 작성한 코드에서 명시된 successUrl의 주소는 저희 앱 다이나믹 링크입니다.
3. 다이나믹 링크를 통해 앱 화면으로 돌아올 수 있다고 생각했기 때문에 API호출이 아니라 앱링크를 넣었습니다.
SDK에 포함된 example 을 빌드해 보았으나 같은 현상이 계속됩니다.
저는 카드사 앱에서 결제를 마치면 저희 앱으로 돌아와서 SDK에서 호출된 웹뷰에서 '결제완료' 버튼을 누르는 플로우를 예상했습니다. 그러나 저희 앱으로 돌아오지 않고 카드사 앱에서 결제를 마치면 웹 브라우저로 이동합니다. 카드사 앱에서 저희 앱으로 바로 이동시키고 싶은데 어떻게 하면 될까요?
만약 웹브라우저로 이동하는것이 의도된 것이라면 어떻게 결제 프로세스를 진행해야 할까요?
successUrl: "https://epicone.page.link/n9hg" 이걸 보내지 말아보시겠어요?
successURL파라미터를 아예 보내지 말아보시기 바랍니다.
저희도 한번 확인해보고 말씀드릴게요
현재 확인 중이신가요?
example앱 아무것도 수정하지말고,실행 후 가상계좌로 한번 테스트해보세요
지금 확인했습니다 successUrl 없이 호출해볼게요!
successUrl없이 호출했으나 역시 웹 브라우저로 이동합니다.. ㅠ
구체적으로는 웹 브라우저로 이동한 다음 잠깐 새로운 탭이 생성되며 어떤 URL을 호출한다음 바로 탭이 닫힙니다
example앱 가상계좌로 테스트해볼게요
가상계좌로 설정하면 바로 결제 결과 페이지로 이동하며 인증성공! 메세지가 표시됩니다
웹브라우저로 이동했다고 생각하느 ㄴ화면 보여주시겠어요?
영상으로 한번 제공해주심 좋을 것 같아요
아 넵 알겠습니다
안드로이드로 테스트중이시죠?
IOS 에서 Safari로 테스트 중입니다
혹시 지금 테스트하기 전입니다만 카드결제시 일어나는 PlatformException때문일까요? 일단 영상 녹화 진행하겠습니다
페이북말고 다른걸로 해보시겟어요
페이북말고 다른걸로 하면 아마 될텐데, 확인해보시면 페이북관련해서도 가이드해드릴게요
다른 카드로 시도해보고 말씀드리겠습니다!
현대카드로 시도했더니 앱 정상이동합니다 감사합니다!
페이북 관련해서 가이드 해주시면 수정하겠습니다
결제창 JavaScript SDK | 토스페이먼츠 개발자센터
토스페이먼츠 결제창 JavaScript SDK 사용에 필요한 준비와 메서드 사용법, 결제 실패 및 에러 처리 방법을 알아봅니다.
appSheme파라미터가 있고, BC가 ISP 앱입니다.
돌아올 앱을 지정해줘야 돌아올 수 있습니다 . 이건 flutter문제가 아니라 공통 스펙입니다.
별개로 android쪽에 약간의 에러가 있어서, 이부분은 수정 배포될 예정입니다.
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
앱 스킴 추가했더니 페이북에서도 정상 작동 합니다
답변 감사드립니다!!
혹시 '별개로 android쪽에 약간의 에러가 있어서, 이부분은 수정 배포될 예정입니다.' 이 부분 관련해서 문의가 있습니다
안드로이드 환경에서 테스트하면 intent가 넘어가는 부분에서 '웹페이지를 사용할 수 없음' 페이지가 뜨는데요 이 현상을 말하는 것인지 궁금합니다. 혹시 수정 배포 일자를 여쭤봐도 될까요..? 만약 업데이트 예정이 다음주 이상으로 잡혀있다면 라이브러리를 수정하여 사용하려고 합니다.
방금 SDK 0.1.8 버전 확인했습니다
정상 작동하네요 감사합니다 ㅠ