11 replies

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

안녕하세요,
React Native SDK를 사용하여 결제 위젯을 구현 중인데, 위젯이 화면에 표시되지 않는 문제가 발생하여 문의드립니다.
환경 정보
- 프레임워크: Expo React Native (Bare Workflow)
- 플랫폼: iOS
- SDK 버전: @tosspayments/widget-sdk-react-native@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. 디버깅 방법
- 위젯이 렌더링되지 않는 문제를 디버깅하는 방법이 있나요?
- 추가로 확인해야 할 로그나 상태가 있나요?

위젯이 정상적으로 화면에 표시되어 사용자가 결제 수단을 선택할 수 있어야 합니다.

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

<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" />

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

문제 분석

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

문제 분석

Continue the conversation

Toss payments 개발자 커뮤니티

Continue the conversation

Toss payments 개발자 커뮤니티

Similar Threads