배지호•13mo ago

결제 위젯이 생성되지 않습니다.

https://github.com/tosspayments/payment-widget-sample/blob/main/react/src/pages/Checkout.tsx 위의 사이트를 참고하여 결제 위젯을 연동하고 있습니다. customerKey는 nanoid return값을 넣어주고 clientKey는 결제 위젯 연동 키에 나와있는 클라이언트 키를 그대로 넣어주었는데 const data = usePaymentWidget(clientKey, customerKey); console에 찍어보니 data가 undefined가 뜹니다. 혹시 결제 위젯 이용 금액을 지불한 후 나오는 clientKey를 사용해야 해결되는 문제인가요?

import { useQuery } from '@tanstack/react-query';
import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';
import { nanoid } from 'nanoid';

const clientKey = '클라이언트 키';
const customerKey = nanoid();

const usePaymentWidget = (clientKey: string, customerKey: string) => {
  useQuery({
    queryKey: ['paymentWidget', clientKey, customerKey],
    queryFn: () => {
      return loadPaymentWidget(clientKey, customerKey);
    },
  });
};

const TossPaymentWidget = () => {
  const data = usePaymentWidget(clientKey, customerKey);
  console.log(data);
  return <div>hi</div>;
};

export default TossPaymentWidget;

import { useQuery } from '@tanstack/react-query';
import { loadPaymentWidget } from '@tosspayments/payment-widget-sdk';
import { nanoid } from 'nanoid';

const clientKey = '클라이언트 키';
const customerKey = nanoid();

const usePaymentWidget = (clientKey: string, customerKey: string) => {
  useQuery({
    queryKey: ['paymentWidget', clientKey, customerKey],
    queryFn: () => {
      return loadPaymentWidget(clientKey, customerKey);
    },
  });
};

const TossPaymentWidget = () => {
  const data = usePaymentWidget(clientKey, customerKey);
  console.log(data);
  return <div>hi</div>;
};

export default TossPaymentWidget;