김지운 Posts - Toss payments 개발자 커뮤니티

김지운

•Created by 김지운 on 3/17/2023 in #❓┃연동개발-문의

성공리다이렉트 url 이동 후 500에러 반환 문제.

안녕하세요. react와 typescript를 이용해서 결제 기능을 구현하고 있습니다.

const tossPay = async () => {
    const paymentWidget = await loadPaymentWidget(
      tossConfig.clientKey,
      tossConfig.customerKey
    );
    paymentWidget.renderPaymentMethods(
      "#payment-method",
      calculateTotalPrice()
    );

    paymentWidget.requestPayment({
      orderId: "",
      orderName: "",
      successUrl: "https://localhost:3000/success",
      failUrl: "https://localhost:3000/fail",
      customerEmail: userEmail,
      customerName: userName,
    });
  };

const tossPay = async () => {
    const paymentWidget = await loadPaymentWidget(
      tossConfig.clientKey,
      tossConfig.customerKey
    );
    paymentWidget.renderPaymentMethods(
      "#payment-method",
      calculateTotalPrice()
    );

    paymentWidget.requestPayment({
      orderId: "",
      orderName: "",
      successUrl: "https://localhost:3000/success",
      failUrl: "https://localhost:3000/fail",
      customerEmail: userEmail,
      customerName: userName,
    });
  };

결제하기 버튼은 위와 같이 연동했고.

export const SuccessPage = () => {
  const confirmPayments = async () => {
    const url = "https://api.tosspayments.com/v1/payments/confirm";
    const requestOptions = {
      method: "POST",
      headers: {
        Authorization: `Basic test_sk_~~~`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        paymentKey: paymentKey,
        amount: amount,
        orderId: orderId,
      }),
    };
    const response = await fetch(url, requestOptions);
    if (!response.ok) {
      throw new Error("결제 승인 API 호출 실패");
    }
    const responseJson = await response.json();
    console.log(responseJson);
  };
  confirmPayments().catch((error: any) => {
    console.log(error.message);
  });
  return <div></div>;
};

export const SuccessPage = () => {
  const confirmPayments = async () => {
    const url = "https://api.tosspayments.com/v1/payments/confirm";
    const requestOptions = {
      method: "POST",
      headers: {
        Authorization: `Basic test_sk_~~~`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        paymentKey: paymentKey,
        amount: amount,
        orderId: orderId,
      }),
    };
    const response = await fetch(url, requestOptions);
    if (!response.ok) {
      throw new Error("결제 승인 API 호출 실패");
    }
    const responseJson = await response.json();
    console.log(responseJson);
  };
  confirmPayments().catch((error: any) => {
    console.log(error.message);
  });
  return <div></div>;
};

성공페이지('/success')는 위와 같이 구현했습니다. 테스트 방식은 결제하기 버튼을 눌러, 결제창이 뜨면, 제 토스페이 계정으로 결제를 진행했습니다. 하지만, 성공리다이렉트 페이지에서 콘솔에 Failed to load resource: the server responded with a status of 500 () 이 에러가 발생했으며, {"code":"UNAUTHORIZED_KEY","message":"인증되지 않은 시크릿 키 혹은 클라이언트 키 입니다.","data":null} 에러 내용에는 이와 같은 내용이 포함되어 있었습니다. 500에러를 반환했기 때문에 시크릿 키와 클라이언트 키 문제라고 생각하지는 않았는데요. 개발자 센터에서 테스트 키를 거듭해서 확인하고 삽입했는데도, 계속 같은 에러를 반환합니다. 이런 오류를 어떻게 해결해야 할까요?

27 replies