DIetPepsiBear•2d ago

[React Native SDK] PaymentWidgetProvider 위젯이 화면에 표시되지 않는 문제

안녕하세요, React Native SDK를 사용하여 결제 위젯을 구현 중인데, 위젯이 화면에 표시되지 않는 문제가 발생하여 문의드립니다. 환경 정보 - 프레임워크: Expo React Native (Bare Workflow) - 플랫폼: iOS - SDK 버전: @tosspayments/widget-sdk-react-native (최신 버전) - React 버전: 19.1.0 - React Native 버전: Expo SDK 52 공식 문서와 샘플 코드를 참고하여 다음과 같이 구현했습니다: 1. SDK 초기화

<PaymentWidgetProvider clientKey={clientKey} customerKey={customerKey}>
  <PaymentWidgetContent />
</PaymentWidgetProvider>

<PaymentWidgetProvider clientKey={clientKey} customerKey={customerKey}>
  <PaymentWidgetContent />
</PaymentWidgetProvider>

2. 위젯 렌더링

const paymentWidget = usePaymentWidget();

useEffect(() => {
  async function renderPaymentWidgets() {
    if (!paymentWidget) return;
    
    await paymentWidget.setAmount({ currency: 'KRW', value: amount });
    await Promise.all([
      paymentWidget.renderPaymentMethods('payment-methods', { variantKey: 'DEFAULT' }),
      paymentWidget.renderAgreement('agreement', { variantKey: 'DEFAULT' }),
    ]);
    setIsReady(true);
  }
  renderPaymentWidgets();
}, [paymentWidget, amount]);

const paymentWidget = usePaymentWidget();

useEffect(() => {
  async function renderPaymentWidgets() {
    if (!paymentWidget) return;
    
    await paymentWidget.setAmount({ currency: 'KRW', value: amount });
    await Promise.all([
      paymentWidget.renderPaymentMethods('payment-methods', { variantKey: 'DEFAULT' }),
      paymentWidget.renderAgreement('agreement', { variantKey: 'DEFAULT' }),
    ]);
    setIsReady(true);
  }
  renderPaymentWidgets();
}, [paymentWidget, amount]);

3. 컴포넌트 렌더링

<PaymentMethodWidget selector="payment-methods" />
<AgreementWidget selector="agreement" />

<PaymentMethodWidget selector="payment-methods" />
<AgreementWidget selector="agreement" />

위젯이 화면에 표시되지 않고, "결제 위젯을 준비하는 중..." 메시지만 계속 표시됩니다. 로그 확인 결과: - SDK import 성공 - PaymentWidgetProvider 초기화 완료 - usePaymentWidget 훅 호출 성공 - setAmount() 호출 완료 - renderPaymentMethods() 호출 완료 - renderAgreement() 호출 완료 - onLoadEnd 콜백 호출됨 - 하지만 위젯 UI가 화면에 표시되지 않음 문제 분석 React 웹 샘플 코드와 비교한 결과, 다음과 같은 차이점을 발견했습니다: React 웹 샘플: - HTML div는 항상 렌더링됨 - JavaScript로 위젯을 주입하는 방식 React Native SDK: - 컴포넌트가 렌더링되어야 renderPaymentMethods()가 동작함 - 하지만 초기화 중에는 컴포넌트를 렌더링하지 않아서 위젯이 표시되지 않을 수 있음 1. 렌더링 타이밍 - PaymentMethodWidget과 AgreementWidget 컴포넌트는 언제 렌더링해야 하나요? - renderPaymentMethods() 호출 전에 컴포넌트가 렌더링되어 있어야 하나요? 2. 초기화 순서 - 올바른 초기화 순서가 있나요? - 컴포넌트 렌더링 → setAmount() → renderPaymentMethods() 순서가 맞나요? 3. 로딩 상태 처리 - 초기화 중에도 위젯 컴포넌트를 렌더링해야 하나요? - 아니면 초기화 완료 후에만 렌더링해야 하나요? 4. 디버깅 방법 - 위젯이 렌더링되지 않는 문제를 디버깅하는 방법이 있나요? - 추가로 확인해야 할 로그나 상태가 있나요? 위젯이 정상적으로 화면에 표시되어 사용자가 결제 수단을 선택할 수 있어야 합니다.

7 Replies