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 가 더이상 지원되지 않아 오류가 발생하는 것 같아 문의드립니다.
3 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
안녕하세요 이안님 반나절동안 해결이 안되어 문의드립니다.
리액트네이티브 웹뷰 프로젝트를 작업중인데, 포스트메세지를 통해 rn으로 토스 결제창을 띄우도록 합니다. 이후 결제취소를 위해 뒤로 가기 버튼 등으로 결제창을 종료시킵니다.
하지만 결제창이 뜨는 순간부터 포스트메세지가 작동을 안합니다.
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> 맞습니다 "@tosspayments/widget-sdk-react-native": "^1.4.0", 사용중이고 app.js여서 import { PaymentWidgetProvider, usePaymentWidget, PaymentMethodWidget, AgreementWidget } from "@tosspayments/widget-sdk-react-native"; 이렇게 사용하고 있습니다. 네 맞습니다! 넵 알겠습니다. 감사합니다. 넵!!! 개발자님 하나만 더 여쭤보겠습니다. 제가 결제를 실행시키려면 웹뷰에서 rn으로 포스트메세지를 보냅니다. 그럼 만약 처음에는 결제가 됐다고 해도 이후 앱이 완전 종료된 후 실행된 상태가 아니라면 더이상 포스트메세지가 작동을 안하잖아요? 개발자님의 의도는 포스트메세지를 사용하지 말라는 말씀이실까요? 제가 이해한대로라면 그게 딥링크가 맞을까요? 알겠습니다. 참고해서 해보겠습니다. 감사합니다!!!!
) : (
<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"; 이렇게 사용하고 있습니다. 네 맞습니다! 넵 알겠습니다. 감사합니다. 넵!!! 개발자님 하나만 더 여쭤보겠습니다. 제가 결제를 실행시키려면 웹뷰에서 rn으로 포스트메세지를 보냅니다. 그럼 만약 처음에는 결제가 됐다고 해도 이후 앱이 완전 종료된 후 실행된 상태가 아니라면 더이상 포스트메세지가 작동을 안하잖아요? 개발자님의 의도는 포스트메세지를 사용하지 말라는 말씀이실까요? 제가 이해한대로라면 그게 딥링크가 맞을까요? 알겠습니다. 참고해서 해보겠습니다. 감사합니다!!!!
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.