RN android 에서만 겪는 초기화 이슈 문의드립니다. 비슷한 사례가 있었다면 어떻게 안내해주셨는지 궁금합니다.
https://github.com/tosspayments/tosspayments-sample-v1/blob/main/payment-widget/react-native/App.tsx
위 코드 App.tsx 참고해서 현재 ios 는 문제 없이 잘 작동합니다.
android에서만
{paymentWidgetControl && (
<PaymentMethodWidget
{paymentWidgetControl && (
<PaymentMethodWidget
selector="payment-methods"
onLoadEnd={async () => {
console.debug('📦 [PaymentMethodWidget] onLoadEnd 시작');
try {
// 여기서 코드가 멈춥니다~!
const control = await paymentWidgetControl.renderPaymentMethods(
'payment-methods',
{ value: TRAINER_MATCHING_PRICE, currency: 'KRW', country: 'KR' },
{ variantKey: 'DEFAULT' }
);
// 여기까지 안 오는 문제가 발생합니다.
// async await 는 시점 디버깅을 위해 추가했습니다. then 사용해도 동일하게 android 에서만 위 renderPaymentMethods 메소드가 동작하지 않습니다. 리소스 경쟁이 발생하는 건지, 교착상태에 빠진 걸로 보입니다.
console.debug('✅ renderPaymentMethods 완료:', control);
setPaymentMethodWidgetControl(control);
} catch (error: any) {
console.error('❌ renderPaymentMethods 오류:', JSON.stringify(error));
Alert.alert('결제 위젯 초기화 오류', error.message || JSON.stringify(error));
}
}}
/>
)}
코드 일 부분인데 주석으로 상세하게 이슈를 남겼습니다. 감사합니다.
GitHub
tosspayments-sample-v1/payment-widget/react-native/App.tsx at main ...
토스페이먼츠 SDK v1 샘플 프로젝트입니다. . Contribute to tosspayments/tosspayments-sample-v1 development by creating an account on GitHub.
62 Replies
⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다
오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.
- 주문번호(orderId) :
- 문의 내용 :
(img를 함께 첨부해주시면 도움이됩니다)
* 계약관련 내용은 1544-7772로 문의주세요.
* 주말/공휴일에는 답변이 늦을 수 있어요.
renderPaymentMethods가 지연되는 것 같은데
네트워크가 혹시 와이파이라면 데이터로 해보셔요
❤️ 기술문의 경험이 어떠셨나요?!
간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.
데이터로 했지만 여전히 안 되네용...
혹시 다른 방법있을까요
네트워크 디버깅을 통해서 어떤 요청에서 딜레이가 생기는지를 확인해보아야 할것 같네요.
확인 후 바로 공유드리겠습니다
모든 요청은 문제 없이 잘 작동합니다
다만! 승인 후 돌아온 응답 객체에 해당 메소드가 없어서 발생한 문제입니다~!
추가 질문드립니다.
혹시 이런 경우도 있나요?
RN expo AOS 환경입니다.
응답 객체 크기가 너무 커서 다 못받는 경우도 있을까요?
일반적인 상황은 아닙니다.
결제승인은 됬는데
응답을 정상적으로 못받고 계신건가요?
2번까지 도달을 안 합니다. 1번은 로그에 나오구요!
agreementWidgetControl , paymentMethodWidgetControl 객체가 비어있습니다. 즉 초기화가 안 됩니다. 화면은 랜더링이 되는데 말이죠
즉 renderPaymentMethods가 실행이 안되고 멈춰있어서
control이 비어있다는 말씀이시죠?
네 맞습니다~!
랜더링은 돼서 결제방식, 약관은 보이고 체크도 됩니다. 다만 결제하기 누르면 객체가 비어있어서 그다음 동작을 하지 않습니다.
렌더링은 되는데 결제하기때 객체가 비어있으면 렌더링된 객체가 결제하기코드 쪽으로 전달이 되지 않는것 처럼 보이는데요.
이부분 확인부탁드립니다.
위 사진 onLoadEnd 는 호출되며
paymentWigetControl => null 입니다.
그래서 renderPaymentMethods 가 실패합니다.
제가 말씀드린 랜더는 실제 화면에 UI 가 보이는걸 의미합니다~!
renderPaymentMethods 메소드는 없습니다.
paymentWigetControl .renderPaymentMethods 호출 시 문제가 발생합니다
랜더링은 돼서 결제방식, 약관은 보이고 체크도 됩니다라고 하신 UI 를 캡쳐해 주실수 있을까요?
paymentWigetControl => null 입니다.
그래서 renderPaymentMethods 가 실패합니다.
라고 하셨는데 이미 이 UI 는 renderPaymentMethods가 된 상태에요.
캡쳐하신 에러가 발생하는 부분은 agreementwidgetcontrol 이라고 되어 있는데요.
공유해주신 코드에 해당 내용은 없습니다.
코드 동일합니다
임시 가림처리 -> 부분은 마스킹 처리했다고 봐주세요~! 원래는 실제 사용하는 데이터 들어갑니다~!
PaymentWidgetProvider 태그는 상위 레이아웃에 있으므로 해당 부분은 인지해주시면 감사드리겠습니다~! (ios에서는 아주 잘 동작합니다. android 에서만 발생하는 이슈입니다)
agreement widget 세팅하는 코드를 저희 샘플에 있는대로
<AgreementWidget
selector="agreement"
onLoadEnd={() => {
paymentWidgetControl
.renderAgreement('agreement', {
variantKey: 'DEFAULT',
})
.then(control => {
setAgreementWidgetControl(control);
});
}}
이렇게 넣어 보실수 있을까요?이미 여러차례 했었습니다 ...ㅎ
그럼 저희 RN 샘플에서도 동일하게 에러나시는 거죠?
더 상세하게 디버깅하기 위해 await 걸었던건데, 이미 수차례... 5번? 정도 위처럼 then 처리 (샘플과 완전히 동일하게) 했었습니다
네! 완전히 동일하더군요
혹시 사용하시는 RN 버전하고 widget-sdk-react-native 버전 확인 가능하실까요?
"@nx/react-native": "20.4.6",
"react-native": "0.74.5",
"@tosspayments/payment-sdk": "^1.9.1",
"@tosspayments/tosspayments-sdk": "^2.2.4",
"@tosspayments/widget-sdk-react-native": "^1.4.0",
"tosspayments-react-native-webview": "^1.0.0", (하도 안 돼서, 커스텀 웹뷰로 시도해서 있는 것입니다. 무시해 주세요~)
요렇게 사용중입니다~! 더 필요하신 정보 있으시면 말씀해 주세요
@박상우 약관위젯은 필수사용이 아닌데요. 혹시 약관위젯은 아예 랜더링 안하면 어떤가요
그 부분 테스트를 안 해봤네요. 한 번 해보고 공유드리겠습니다
시도해봤습니다~!
결제 완료까지 안오구요. catch 부분에서 에러 메세지도 안 옵니다..!
네트워크에서 paymentWidgetControl.requestPayment 요청이 안 나오는 현상입니다
클릭 이벤트는 읽히는데
그게 reuqestPayments에 전달이 안되나요?
네 맞습니다
저희도 처음 겪는 현상이라 원인을 모르겠네요
답변 감사드립니다
일단 로그상 요청은 저희까지 들어온 것 같아요
리턴도 잘 마무리 되었는지 문의드립니다
내부 로그를 확인했을때 renderPaymentMethods 의 resolve 가 정상적으로 되지 않은것으로 보입니다.
증상만 보면 웹뷰와 Native SDK 사이에 통신이 안되는게 아닌가 싶은데요.
위젯 바로 아래에 text 나 다른 UI 를 위치 시키신후에 결제수단위젯에서 결제수단 바꿨을 때(특히, 높이 변화가 있는 카드<->기타결제수단) 위젯 높이 조절 잘 되는지 확인을 해보실수 있을까요?
넵 바로 확인해보겠습니다
위젯 높이 조절이 잘 되는 것이 확인됩니다~
안되네요
3줄입니다 카드 선택쪽은
아 그럼 한 줄이 잘리는 거네요!?
네 원래 웹뷰 영역 높이가 가변으로 바뀌어야하는데요 그부분이 안되에요
웹뷰 <>네이티브간 통신이 안되고있어요
ㅈㅓ희 샘플그대로 실행했을때도 안된다는 말씀이시죠?
네 맞습니다~!
혹시 window.ReactNativeWebView 를 재정의 하거나 custom 하는 부분이 있으신가요?
특히 window.ReactNativeWebView.postMessage 이부분이요
해당 코드 지워보고 테스트해봤으나 동일한 증상이 나타납니다
어떤 코드가 있으셨던 건가요?
window.ReactNativeWebView 쪽 커스텀 하신 코드 모두 삭제해 보실수 있을까요?
다음 주소 부분 처리할 때 사용했었습니다 한 번 다 지워보고 해보겠습니다
그럼 기존에 샘플 예제 파일을 그대로 실행하셨던게 아니네요?
RN에 해당하는 부분만 가져와서 그대로 복붙하고 실행했었습니다~! 클론해서 실행하지는 않았습니다
저희는 클론해서 실행하신건지를 확인드린것이었는데 전달에 착오가 있었네요.
아니면 저희샘플 그대로 클론해서 확인해 보시기 바랍니다.
전달 제대로 안 된점 사과의 말씀 드립니다ㅠ 확인해보겠습니다
아닙니다 현재 다음쪽이랑 충돌이 있어서요!
저희 웹뷰 라이브러리말고
rn쪽 웹뷰 라이브러리도 사용하시죠
네 맞습니다
RN에서 토스연동을 하고 있는중 웹뷰 관련 문의드...
현재 상황은 V1 결제 위젯을 연동해놓은 상태입니다.
안드로이드에서 다른 웹뷰에 들어가야할 이벤트가 토스 웹뷰쪽으로 들어가고 있는데
관련해서 해결책이 있을까요?
여기 참고해주세요 우선 현재 이방법이 최선입니다
확인해보겠습니다 감사드립니다
공유감사드립니다. 확인 후에 저도 해당 내용 공유하도록 하겠습니다