react native에서 결제위젯을 어떻게 연동해야할까요?
현재 기존 문서들을 살펴보면서 sdk v1으로 개발중인데
https://github.com/tosspayments/widget-sdk-react-native#readme
https://github.com/tosspayments/tosspayments-react-native-webview#readme
이러한 기존 react native 관련 라이브러리들은 404가 뜨고 있고
그래도 기존 문서들을 통해 react native에서 sdk v1으로 설치하여 진행하려 하는데 RNCTPWebViewModule 오류나 android 빌드 오류들이 계속해서 발생하고 있습니다.
sdk v2로 react native에서 토스 결제를 구현할 수 있나요?
sdk v1으로 react native 가 더이상 지원되지 않아 오류가 발생하는 것 같아 문의드립니다.
23 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
먼저 리액트 네이티브는 V1만 지원을 하고 있습니다.
결제위젯 React Native SDK(Version 1) | 토스페이먼츠 개...
결제위젯 React Native SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.
GitHub
tosspayments-sample-v1/payment-widget/react-native at main · tossp...
토스페이먼츠 SDK v1 샘플 프로젝트입니다. . Contribute to tosspayments/tosspayments-sample-v1 development by creating an account on GitHub.
이 두 링크를 참조해 주셔야 합니다.
안녕하세요 이안님 반나절동안 해결이 안되어 문의드립니다.
리액트네이티브 웹뷰 프로젝트를 작업중인데, 포스트메세지를 통해 rn으로 토스 결제창을 띄우도록 합니다. 이후 결제취소를 위해 뒤로 가기 버튼 등으로 결제창을 종료시킵니다.
하지만 결제창이 뜨는 순간부터 포스트메세지가 작동을 안합니다.
토스 sdk안쓰고 직접 웹뷰 띄우시는건가요?
포스트메시지는 아마 브라우저 보안 정책이 있어서 결제창 뜬 이후 막힐 수도 있습니다. 크로스오리진으로 여러뎁스 빠져버리거든요.
rn에서 띄우고 있습니다.
<PaymentWidgetProvider clientKey={CLIENT_KEY} customerKey={customerKey}>
<SafeAreaView style={{flex:1}}>
{is_loading ? (
<View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
<ActivityIndicator size="large" />
</View>
) : (
<WebView/> )} {/* 토스페이먼츠 결제 화면 */} {showPayment && paymentData && ( <PaymentScreen paymentData={paymentData} onClose={() => setShowPayment(false)} onSuccess={(result) => { // 성공 처리는 딥링크에서 처리됨 console.log('성공 처리는 딥링크에서 처리됨'); }} onFail={(error) => { setShowPayment(false); Alert.alert('결제 실패', error);
// 웹으로 실패 결과 전달 const failData = JSON.stringify({ type: "payment_result", success: false, message: error }); webViews.current.postMessage(failData); }} /> )} </SafeAreaView> </PaymentWidgetProvider>
) : (
<WebView/> )} {/* 토스페이먼츠 결제 화면 */} {showPayment && paymentData && ( <PaymentScreen paymentData={paymentData} onClose={() => setShowPayment(false)} onSuccess={(result) => { // 성공 처리는 딥링크에서 처리됨 console.log('성공 처리는 딥링크에서 처리됨'); }} onFail={(error) => { setShowPayment(false); Alert.alert('결제 실패', error);
// 웹으로 실패 결과 전달 const failData = JSON.stringify({ type: "payment_result", success: false, message: error }); webViews.current.postMessage(failData); }} /> )} </SafeAreaView> </PaymentWidgetProvider>
이거 문서에 있는 라이브러리로 여시는건지만 확인해주세요~ 저희가 코드를 하나하나 봐드리기에는 제약이 있어서요
맞습니다
"@tosspayments/widget-sdk-react-native": "^1.4.0", 사용중이고
app.js여서
import {
PaymentWidgetProvider,
usePaymentWidget,
PaymentMethodWidget,
AgreementWidget
} from "@tosspayments/widget-sdk-react-native";
이렇게 사용하고 있습니다.
그럼 귀사 앱 자체는 웹뷰가 대부분인데
결제만 저걸 쓰는거죠?
네 맞습니다!
그럼 저거 쓰지마시구요
잠시만요 다른 샘플 링크 찾아서 보내드릴게요
넵
https://discord.com/channels/864296203746803753/1391641956299444275
여기 타 가맹점 기존 문의건인데요
여기 보면 파일도 있고 깃헙 링크도 있는데
두개 다 참고하셔서 연동해보세요
알겠습니다. 감사합니다.
가맹점 연동 상태를 하나하나 다 봐드릴 수 없다보니
일단 샘플 참고하셔서 해보시고
또 막히면 다시 문의주세요~!
넵!!!
개발자님 하나만 더 여쭤보겠습니다.
제가 결제를 실행시키려면 웹뷰에서 rn으로 포스트메세지를 보냅니다.
그럼 만약 처음에는 결제가 됐다고 해도 이후 앱이 완전 종료된 후 실행된 상태가 아니라면
더이상 포스트메세지가 작동을 안하잖아요?
개발자님의 의도는 포스트메세지를 사용하지 말라는 말씀이실까요?
네 맞아요
웹뷰 안에서 모든 걸 다 해결하는 방법이 있기때문에
굳이 RN과 통신해서 결제를 열 필요가 없습니다
제가 이해한대로라면 그게 딥링크가 맞을까요?
아니요 아닙니다
웹뷰 안에서
토스페이먼츠 js SDK (@tosspayments/payment-sdk or https://js.tosspayments.com/v2/standard) 를 불러오고 결제를 오픈하는겁니다
그냥 PC 처럼요
이러면 다만 카드/은행 앱과 귀사 앱 사이 통신이 필요한데요. 이걸 딥링크로 구현하는겁니다.
그게 위에 새로드린 샘플에 있는 내용이구요.
알겠습니다. 참고해서 해보겠습니다. 감사합니다!!!!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.