kanghyeji•2mo ago

iOS에서 PaymentWidget이 카드사 선택 UI를 렌더링하지 못합니다.

안녕하세요. @tosspayments/widget-sdk-react-native 1.3.0 버전을 사용중에 있는데요. iOS에서 PaymentWidget이 카드사 선택 UI를 그리지 못합니다. 해당 화면에 처음 진입 시에는 정상 동작 하고, 재진입 시 UI가 안그려져요. 문제 상황 시 다음 warning이 뜨네요.

Error evaluating injectedJavaScript: This is possibly due to an unsupported return type. Try adding true to the end of your injectedJavaScript string. Error Domain=WKErrorDomain Code=4 "JavaScript 예외가 발생했습니다" UserInfo={WKJavaScriptExceptionLineNumber=3, WKJavaScriptExceptionMessage=ReferenceError: Can't find variable: PaymentWidget, WKJavaScriptExceptionColumnNumber=33, WKJavaScriptExceptionSourceURL=about:blank, NSLocalizedDescription=JavaScript 예외가 발생했습니다}

Error evaluating injectedJavaScript: This is possibly due to an unsupported return type. Try adding true to the end of your injectedJavaScript string. Error Domain=WKErrorDomain Code=4 "JavaScript 예외가 발생했습니다" UserInfo={WKJavaScriptExceptionLineNumber=3, WKJavaScriptExceptionMessage=ReferenceError: Can't find variable: PaymentWidget, WKJavaScriptExceptionColumnNumber=33, WKJavaScriptExceptionSourceURL=about:blank, NSLocalizedDescription=JavaScript 예외가 발생했습니다}

확인 부탁드리겠습니다!

10 Replies

토스페이먼츠 BOT•2mo ago

⏳ 잠시만 기다려주세요! 곧 답변드리겠습니다

오류 문의일 경우 아래 정보를 미리 전달해주시면, 빠른 답변에 도움이 됩니다.

- 주문번호(orderId) : - 문의 내용 :

(img를 함께 첨부해주시면 도움이됩니다)

* 계약관련 내용은 1544-7772로 문의주세요. * 주말/공휴일에는 답변이 늦을 수 있어요.

Kimoon Lee•2mo ago

혹시 customerkey 에 live_ck 나 live_sk 로 시작하는 값을 넣으신건 아닌지 확인부탁드립니다.

kanghyeji•2mo ago

아니요, 숫자로 이뤄진 11자리 값을 넣고 있습니다. 혹시 해당 키가 문제인가 해서 숫자, 영문 대소문자, 특수문자를 조합한 키를 넣어봤으나 역시 동일했습니다.

Kimoon Lee•2mo ago

지금 오류를 보면 PaymentWidget 이 없다는 에러로 보입니다. 재진입시에 widget을 다시 렌더링 하고 계신건가요?

kanghyeji•2mo ago

화면 진입 시마다 renderPaymentMethods 메서드를 호출하고 있습니다.

Kimoon Lee•2mo ago

정확히 코드를 어떻게 구현하신 것인지 모르겠지만 진입시마다 paymentwidget 을 다시 초기화 해서 구현해 보실수 있을까요?

kanghyeji•2mo ago

import { PaymentMethodWidget, usePaymentWidget } from '@tosspayments/widget-sdk-react-native';

const paymentWidgetControl = usePaymentWidget();

useEffect(()=>{
  paymentWidgetControl.renderPaymentMethods(
        'payment-methods',
        { value: paymentData?.totalCost || 0 },
        { variantKey: 'DEFAULT' },
      );
},[...])

return (
  ...
  <PaymentMethodWidget
    selector="payment-methods"
    ...
  />
)

import { PaymentMethodWidget, usePaymentWidget } from '@tosspayments/widget-sdk-react-native';

const paymentWidgetControl = usePaymentWidget();

useEffect(()=>{
  paymentWidgetControl.renderPaymentMethods(
        'payment-methods',
        { value: paymentData?.totalCost || 0 },
        { variantKey: 'DEFAULT' },
      );
},[...])

return (
  ...
  <PaymentMethodWidget
    selector="payment-methods"
    ...
  />
)

코드는 위와 같습니다만, widget을 다시 초기화하는 방법이 따로 있을까요??

import { PaymentWidgetProvider } from '@tosspayments/widget-sdk-react-native';
import { v4 as uuidv4 } from 'uuid';

useEffect(() => {
    if (authStore.userToken) {
      (async () => {
        try {
           // 11자리 숫자의 uuid 셋팅
          const userInformation = await verifyByToken();
          setTossCustomerKey(userInformation?.uuid);
        } catch (e: any) {
          // 실패 시 임의의 uuid 값 셋팅
          setTossCustomerKey(uuidv4());
        }
      })();
    }
  }
}, [...]);

return (
  <PaymentWidgetProvider
    clientKey={...}
    customerKey={tossCustomerKey}
  >
)

import { PaymentWidgetProvider } from '@tosspayments/widget-sdk-react-native';
import { v4 as uuidv4 } from 'uuid';

useEffect(() => {
    if (authStore.userToken) {
      (async () => {
        try {
           // 11자리 숫자의 uuid 셋팅
          const userInformation = await verifyByToken();
          setTossCustomerKey(userInformation?.uuid);
        } catch (e: any) {
          // 실패 시 임의의 uuid 값 셋팅
          setTossCustomerKey(uuidv4());
        }
      })();
    }
  }
}, [...]);

return (
  <PaymentWidgetProvider
    clientKey={...}
    customerKey={tossCustomerKey}
  >
)

renderPaymentMethods 메서드 호출 부분을 setTimeout으로 딜레이 주니까 정상 동작 하긴 하네요..!

Kimoon Lee•2mo ago

아마 초기화가 안된상태에서 렌더링이 시도 되거나 한게 아닌가 싶습니다.

kanghyeji•2mo ago

네 일단 위 방법으로 대처하겠습니다. 추후 초기화 여부 state를 알 수 있는 등의 대응을 해주시면 좋을 것 같습니다!! 감사합니다!

토스페이먼츠 BOT•2mo ago

❤️ 기술문의 경험이 어떠셨나요?!

간단히 코멘트 남겨주세요! 제품 발전에 큰 힘이 됩니다.