결제위젯 에러

<!-- 결제위젯 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment-widget"></script>

<!-- 결제위젯 SDK 추가 -->
<script src="https://js.tosspayments.com/v1/payment-widget"></script>

export default function TossPayment(props) {
  const { price, successUrl, failUrl, TOSS_CLIENT_KEY, customerId } = props;

  useEffect(() => {
    const script = document.createElement("script");
    const scriptText = document.createTextNode(
      `const paymentWidget = PaymentWidget("${TOSS_CLIENT_KEY}", "${customerId}")
      paymentWidget.renderPaymentMethods(
        "#payment-method", 
        { value: ${price} },
        { variantKey: "DEFAULT" } // 렌더링하고 싶은 결제 UI의 variantKey
      )
      paymentWidget.renderAgreement('#agreement')
      `
    );
    script.appendChild(scriptText);
    document.body.appendChild(script);
  }, []);

  return (
    <>
      <div id="payment-method"></div>
      <div id="agreement"></div>
    </>
  );
}

export default function TossPayment(props) {
  const { price, successUrl, failUrl, TOSS_CLIENT_KEY, customerId } = props;

  useEffect(() => {
    const script = document.createElement("script");
    const scriptText = document.createTextNode(
      `const paymentWidget = PaymentWidget("${TOSS_CLIENT_KEY}", "${customerId}")
      paymentWidget.renderPaymentMethods(
        "#payment-method", 
        { value: ${price} },
        { variantKey: "DEFAULT" } // 렌더링하고 싶은 결제 UI의 variantKey
      )
      paymentWidget.renderAgreement('#agreement')
      `
    );
    script.appendChild(scriptText);
    document.body.appendChild(script);
  }, []);

  return (
    <>
      <div id="payment-method"></div>
      <div id="agreement"></div>
    </>
  );
}

import TossPayment from "../../Components/Page/TossPayment";

// 자체 서버에서 TOSS_CLIENT_KEY, customerId 등 받아옵니다
const getTossKey = async () => {
  await API.get("/toss/request-data")
    .then((res) => {
      if (res.data.status) {
        console.log(res.data);
        setTossValues(res.data.results);
        setIsLoadedTossData(true);
      }
    })
    .catch(function (error) {});
};

// 컴포넌트 호출 
{isLoadedTossData && (
  <TossPayment
    price={intRechargePoint}
    TOSS_CLIENT_KEY={tossValues.TOSS_CLIENT_KEY}
    customerId={tossValues.customerId}
  />
)}

import TossPayment from "../../Components/Page/TossPayment";

// 자체 서버에서 TOSS_CLIENT_KEY, customerId 등 받아옵니다
const getTossKey = async () => {
  await API.get("/toss/request-data")
    .then((res) => {
      if (res.data.status) {
        console.log(res.data);
        setTossValues(res.data.results);
        setIsLoadedTossData(true);
      }
    })
    .catch(function (error) {});
};

// 컴포넌트 호출 
{isLoadedTossData && (
  <TossPayment
    price={intRechargePoint}
    TOSS_CLIENT_KEY={tossValues.TOSS_CLIENT_KEY}
    customerId={tossValues.customerId}
  />
)}