EXPO ios 어플에서 결재
안녕하세요.
현재 iOS 실물 서비 앱을 Expo(React Native) Managed Workflow로 개발 중입니다.
Expo 환경 특성상
iOS Native SDK
React Native SDK
를 직접 설치하거나 Podfile/Info.plist를 수정할 수 없어,
토스 결제 SDK를 앱 내부에서 사용할 수 없는 상황입니다.
그래서 현재는
Safari 외부 브라우저로 이동 → 결제 진행 → 딥링크로 앱 복귀
라는 Web 결제 API 방식을 사용하고 있습니다.
다만, 이 방식은 iOS Safari 정책 및 딥링크 구조 특성상
실제 기기(TestFlight / App Store 환경)에서
앱 복귀가 불안정하게 동작하는 문제가 발생합니다.
이에 대해 아래 질문을 드리고 싶습니다:
Expo(React Native) 환경에서 토스 Web 결제(API 방식)를 사용할 때의 공식 가이드나 참고 문서가 있을까요?
Safari → 앱 복귀(deep link) 안정성을 높이기 위한 권장 설정 또는 알려진 우회 방법이 있을까요?
Expo 환경에서 토스 결제를 구현할 때 업계에서 일반적으로 사용하는 패턴이나 사례가 있을까요?
토스 측에서 Expo 환경을 위한 SDK 지원 계획 또는 다른 대안이 있을까요?
현재 iOS 앱에서 안정적인 결제 복귀 동작을 구현하는 것이 가장 중요한 과제라
토스 내부에서도 이에 대한 Best Practice를 알고 계시면 공유 부탁드립니다.
감사합니다.
34 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(문제가 발생한 이미지나 전체 결제흐름 동영상을 첨부해주시면 빠른 분석을 받으실 수 있습니다.)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
우선 개발 환경이..
rn을 사용하시는거죠?
현재 "Safari 외부 브라우저로 이동 → 결제 진행 → 딥링크로 앱 복귀" 여기 연동해두신 저희 결제창 이미지도 공유해주시겠어요 ?
일단 EXPO 프레임워크에서 RN을 쓰고 있습니다.
지금 ios testflight에서 문재가 생겨서 이미지는 따로 볼수가 없습니다
외부브라우저에 뜨는링크는 testflight와 관련없지 않나요?
결제위젯을 연동했는지, 결제창은 연동했는지 확인해보고자 합니다.
네, 현재 상황을 조금 더 명확하게 설명드리겠습니다.
저희는 Expo(React Native) Managed Workflow 환경에서 개발 중이라
토스의 RN SDK나 네이티브 결제창은 사용할 수 없는 구조입니다.
그래서 현재는 토스 Web 결제 API를 사용하고 있으며,
실제 결제는 아래 방식으로 이루어집니다:
1) 백엔드에서 Toss 결제 위젯 URL 생성
2) iOS에서는 Safari 외부 브라우저로 해당 URL을 오픈
3) 사용자가 Safari에서 결제 진행
4) Toss → 저희 서버로 redirect
5) 서버에서 custom scheme(borini://payment/success)으로 앱 복귀 처리
Android는 WebView에서 정상 동작하고 있고,
문제는 iOS TestFlight 환경에서 Safari → 앱 복귀(deep link)가 간헐적으로 작동하지 않는 점입니다.
현재 사용 중인 화면은 Toss Web 결제창(웹 위젯)이며,
React Native 결제위젯 SDK는 사용하지 않습니다.
Safari에서 딥링크 복귀가 TestFlight에서만 불안정해
실 기기 화면 캡처는 어렵지만
동일한 화면을 웹에서 캡처한 이미지로 전달드렸습니다.
추가로 확인드리고 싶은 내용은 아래와 같습니다:
Expo(React Native) 환경에서 토스 Web 결제 API를 사용할 때 참고할 공식 가이드가 있을지
iOS Safari에서 custom scheme 복귀가 불안정한 것이 알려진 케이스인지
Safari 대신 In-App Browser(expo-web-browser) 방식으로 여는 것이 가능한지 / 문제없는지
Expo 환경에서 토스 Web 결제가 안정적으로 운영된 사례나 추천 방식이 있는지
동문서답 한거 같지만 위에 내용들이 제 문재에 새로 답변 해주시는데에 도움이 되면 좋겟네요
감사합니다.
1. 별도로 공식 가이드는 없습니다.
2. 이부분은 저희가 확인해 드릴수는 없을것 같습니다. EXPO community 등에 확인해 보셔야 할것 같아요
3. 저희가 추천 드리지는 않는 방법입니다. In-App Browser 는 저희가 호환성을 보장하지 않습니다.
4. 현재까지 저희가 경험한건 없습니다.
지금 사용하시는 방법이 상당히 특이한 방식이라 저희가 가이드를 드리긴 어려워보입니다.
안전하게 하시려면 결제 씬을 현재 개발하신 expo 환경과 별개로 진행하시는게 좋아보입니다.
링크로 랜딩하신후에 브라우저에서 결제가 끝나면 고객이 직접 기존 앱으로 이동하는 방식으로 설계하시는게 더 안전해 보입니다.
그런데 info.plist 사용이 불가해서 외부 브라우저를 연다고 하셨잖아요?
그 말은 appScheme을 화이트리스트로 관리가 어려워 외부앱을 여는게 불가하다는 말씀이시죠?
아니요.
외부 앱을 여는 것이 불가하다는 뜻은 아닙니다.
WebView 안에서만 불가하고,
Safari 같은 외부 브라우저에서는 정상적으로 열립니다.
네 외부브라우저로 빼는게 일반적인 선택은 아니라
불가피해서 어쩔수 없이 했는지 궁금해서요
webview안에서 동작하는게 가장 best지 않나요 ?
안녕하세요.
먼저, 본 글 내용 대로 추가 답변을 드리면,
Expo 환경 특성 상 React Native SDK를 직접 설치하거나 info.plist를 수정할 수 없어수정할 수 있고, 이에 RN SDK를 직접 이용해야만 합니다.
Safari 외부 브라우저로 이동 -> 결제 진행 -> 딥링크로 앱 복귀권장하지 않으며, 지금 겪고 계신 문제가 생기는 것이 정상적인 상황입니다. 이는 브라우저 세션 관리 정책과 보안 때문에 그렇습니다.
공식 가이드나 참고 문서가 있을까요?별도 가이드가 마련되어 있지는 않습니다만, 아래 참고 자료를 사용해 보시기 바랍니다. SDK에서 공식적으로 Expo를 지원할 방법이 있는지도 제가 알아보고, 있다면 반영될 순 없는지 알아볼게요 참고자료: https://github.com/portone-io/iamport-react-native/blob/main/manuals/EXPO.md 만약, prebuild하여서 plist를 직접 주입하는 것에 문제가 있거나 원치 않으실 경우, 아래 레포를 참고하셔서 custom plugin으로 지정하시기 바랍니다. Plugin Demo 레포: https://github.com/kms0219kms/tosspayments-expo-poc @DIetPepsiBear @PepsiBear
제가 원래는 아래와 같은 방법으로 결재가 진행 됩니다.
1.앱에서 결제 버튼 클릭
2.백엔드가 토스 웹 위젯 URL 생성
3. iOS: Safari에서 (expo web view) 토스 웹 위젯 표시 (결제 수단 선택, 카드 정보 입력 등)
4,사용자가 결제 완료
5.토스가 Deep Link/Universal Link로 앱으로 복귀
이렇게 할적에 정기 결재를 진행 할적에 똑같은 플로우로 진행 하더라도 위젯에 구비되어있는 카드정보 입력이 나오는 건가요? 제가 추가로 작업 안하더라도?
일단 이건 위젯이 아니라 결제창입니다.
지금 정확히 확인 필요한 부분이 어떤 부분일까요?
어느 부분 확인 필요한지 한번 정리해주세요
정기결제도 동일한 flow로 진행이 되는데요 저희가 카드 정보 넣는 UI 를 제공해 드리고 있습니다.
일단 지난번에도 말씀드렸는데
백엔드가 토스 웹 위젯을 호출 << 이런 건 없습니다.
백엔드가 토스페이먼츠 결제창 URL을 만들수는 없고, 관련 API도 없습니다.
무조건, Webview 안의 페이지에서 js.tosspayments.com~ JS를 로드하여서 결제창을 호출하여야 합니다.
정기결제도 동일하게, Webview 안의 페이지에서 JS를 로드해야 합니다.
또한, iOS: Safari에서 토스 웹 위젯 표시 << 불가능합니다. 지난번에 이슈 있으셨듯이, 앱으로 돌아와도 처리가 안됩니다.
Safari가 아니라, react-native-webview를 통해서 불러와야 합니다.
모두 감사드립니다
시간에 쫒기는 와중에 안정적인 방법을 계속 찾다보니 설명이 이상하거나, 불확실하거나, 달라지는점 죄송합니다.
일단은, 정기결제(BillingKey 발급)가 반드시 WebView 내부에서 js.tosspayments.com 스크립트를 로드해야 한다는 점은 이해했습니다.
제가 찾아본 봐로는 Expo 환경에서는 두 가지 브라우저 방식을 사용할 수 있습니다: React Native WebView 와 expo-web-browser (SFSafariViewController 기반 인앱 브라우저), 그래서 한 가지 확인이 필요합니다.
정기결제 BillingKey 발급 UI는 expo-web-browser(SFSafariViewController 기반)에서도 정상 동작이 가능한가요?
아니면 React Native WebView에서만 공식적으로 지원되는 건가요?
Safari 외부 브라우저에서는 Billing UI가 동작하지 않는다는 점은 알고 있지만, expo-web-browser는 Safari와 WebView의 중간 형태라서 공식적으로 지원 여부를 확인하고 싶습니다.
감사합니다.
React Native Webview로 하시길 바랍니다.
UI가 동작하긴하는데요. 문제는 Safari 외부브라우저나 web-browser에서 앱으로 데이터를 다시 쏘는데에 문제가 있습니다.
공식 가이드나 참고 문서가 있을까요?별도 가이드가 마련되어 있지는 않습니다만, 아래 참고 자료를 사용해 보시기 바랍니다. SDK에서 공식적으로 Expo를 지원할 방법이 있는지도 제가 알아보고, 있다면 반영될 순 없는지 알아볼게요 참고자료: https://github.com/portone-io/iamport-react-native/blob/main/manuals/EXPO.md 만약, prebuild하여서 plist를 직접 주입하는 것에 문제가 있거나 원치 않으실 경우, 아래 레포를 참고하셔서 custom plugin으로 지정하시기 바랍니다. Plugin Demo 레포: https://github.com/kms0219kms/tosspayments-expo-poc 이 내용을 참고하시면 RN Webview에서 잘 작동할거에요
너무나 감사드립니다
@DIetPepsiBear
Safari 외부 브라우저에서는 Billing UI가 동작하지 않는다는 점은 알고 있지만, expo-web-browser는 Safari와 WebView의 중간 형태라서 공식적으로 지원 여부를 확인하고 싶습니다.이부분 궁금한게 있어요 "Safari 외부 브라우저에서는 Billing UI가 동작하지 않는다는 점은 알고 있지만, " 이게 혹시 어떤 내용인지 조금 설명해주실 수 있을까요?
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
다시 바뀌어서 safari에서 결재하는 방식을 하려고 합니다.
토스 결제 위젯(payment-widget)은 HTML + JavaScript 환경에서만 정상 동작하는 것으로 확인했습니다.
이에 따라 다음과 같은 방식으로 결제를 구현하려고 합니다:
앱에서 주문 생성 후
Safari 브라우저로 이동하여
저희 서버가 제공하는 “전용 웹 결제 페이지(HTML)”를 여는 방식
이 페이지 안에서 https://js.tosspayments.com/v1/payment-widget 스크립트를 로드하고
PaymentWidget()으로 결제 UI를 렌더링합니다
결제 성공/실패 시 successUrl / failUrl을 앱의 Deep Link로 설정하여 iOS 앱으로 복귀합니다
질문드립니다:
1) 위와 같이 “웹 결제 페이지를 Safari에서 띄워서 토스 위젯을 실행하는 방식”이 토스 정책상 정식으로 허용되는 방식인가요?
2) iOS 앱 내부가 아닌 Safari 브라우저에서 위젯을 실행하는 것에 제한은 없는지 궁금합니다.
3) successUrl / failUrl에 커스텀 스킴 (예: borini://pay/success)을 사용하는 데 문제는 없는지요?
앱 내 WebView가 아닌 Safari 브라우저를 사용하는 이유는
iOS 정책상 외부 결제 페이지를 Safari에서 여는 것이 더 안정적이기 때문입니다.
위의 방식이 토스페이먼츠에서도 권장하는 흐름인지 확인 부탁드립니다.
감사합니다.
iOS 정책 적으로 Safari로 우회결제 하는건 오히려 앱스토어에서 제재를 먹을 수 있는 사안입니다.
(실제로 카카오톡이 구글과 애플에서 아예 앱 삭제가 되었고, 선물하기의 경우 토스페이먼츠를 웹뷰로. 이모티콘 등은 인앱결제로 사용하고 있습니다.)
앱 내에서 webview로 결제하시기 바랍니다.
@Ayaan이안
저는 디질털 서비스가 아닌 실물 서비스인데, 실물서비스는 safari로 하는게 가능하다 들었어서, 혹시 제 정보가 틀리면 알려주시면 감사하겠습니다.
앱에서 소비되는 재화가 아니면 인앱결제를 안쓰셔도 됩니다.
3) successUrl / failUrl에 커스텀 스킴 (예: borini://pay/success)을 사용하는 데 문제는 없는지요?
직접 한번 테스트해보셔야할 것 같네요
1) 위와 같이 “웹 결제 페이지를 Safari에서 띄워서 토스 위젯을 실행하는 방식”이 토스 정책상 정식으로 허용되는 방식인가요?
2) iOS 앱 내부가 아닌 Safari 브라우저에서 위젯을 실행하는 것에 제한은 없는지 궁금합니다.
저희가 막는건 없ㅅ븐디ㅏ
제가 이해하기론 Safari는 공식적으로 지원 안하고 + 특이케이스고 결국 돌고 돌아서 webview형식을 주로 사용 해야 하는거 같은데.
애플 정책상 webview를 추천이 안되는 경우를 보았는데, webview를 사용 했음에도 불구하고 apple 앱심사 통과한 케이스가 있나요?
그리고 제가 ios를 expo에서 개발중인데 expo 에서 sdk를 사용 하자니 어려움이 있어서 sdk를 사용 안하는 방식을 찾다보니 결국엔 safari 아님 webview를 왔다갔다 하고 있는데 추천 하는 방식이 있는지 궁금합니다
어짜피 디지털이 아니기 때문에
웹뷰로 돌려도 심사에 문제가 없을건데요
추천은 말씀드린 것처럼
웹뷰에 하세요
그게 아니면 직접 이것저것 테스트해보시기 바랍니다.
두분다 감사합니다
제가 햇갈려서 그러는데 iOS + WebView + Toss 결제 구현 할적에 sdk는 필수가 이니지만 js위젯은 사용 해야 하는거 맞을까요?
React Native에서는 SDK 필수입니다.
직접 Swift나 Objective C를 쓴다면 선택사항인데, RN에서는 필수 사항입니다.
제가 찾아본 아래 문서를 이해한 바 순수 RN Webview, sdk 사용 안하고 가능 하다고 이해헀는데 제가 잘못 이해 한걸까요? 아니면 정책상 필수라고 말씀 주신 걸까요?
개발 문서:
React Native WebView: https://github.com/react-native-webview/react-native-webview
Expo WebView 설정: https://docs.expo.dev/versions/latest/sdk/webview/
토스페이먼츠 WebView 가이드: https://docs.tosspayments.com/guides/v2/payment-widget/integration#웹뷰webview-연동하기
도움 주셔서 감싸합다
GitHub
GitHub - react-native-webview/react-native-webview: React Native Cr...
React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.
연동하기 | 토스페이먼츠 개발자센터
토스페이먼츠의 간편한 결제 연동 과정을 한눈에 볼 수 있습니다. 각 단계별 설명과 함께 달라지는 UI와 코드를 확인해보세요.
한국의 결제 시스템은 외국과 달리 앱카드 인증이라는 단계가 추가로 붙어있습니다.
이에 AI 사용할 때 이 부분을 간과하고 안내를 하는 경향이 있는것 같은데요,
앱카드 인증을 위해 앱을 호출해야 하는데, 이는 안드로이드, iOS 모두 매우 민감한 동작이고
오픈이 가능한 모든 앱을 Manifest에 등록하여 심사에 같이 올려야하고,
코드에서도 앱 호출 URL을 응답받으면 앱을 호출하도록 세팅해야 합니다.
이 코드 부분 적용이 네이티브 코드를 주입해야 하여, RN에서는 어렵기 떄문에
웹뷰(WebView) 연동하기 | 토스페이먼츠 개발자센터
모바일 웹뷰 결제는 앱투앱(App to App) 이동이 필요한데요. 결제기관의 앱스킴 목록과 OS별 이동 방법을 알아보세요.
이 문서에서와 같이 Webview만 이용하더라도 SDK 이용을 강제하고 있습니다.
정책적인 부분보다 기술적인 부분에 더 가깝습니다.
혹시 WKNavigationDelegate을 onShouldStartLoadWithRequest로 대채해서 사용 하고 성공한 경우가 있나요?