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

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;

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;

현재 코드입니다.

GitHub

payment-widget-sample/react/src/pages/Checkout.tsx at main · tosspa...

토스페이먼츠 결제위젯 샘플 프로젝트입니다. . Contribute to tosspayments/payment-widget-sample development by creating an account on GitHub.

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

Similar Threads

Similar Threads

Similar Threads