FE_Pelican 😅•17mo ago

카트 승인중인데 키를 라이브키를 적용을 아직 안햇는데 진행이 되고 있을까여?

라이프키가 나온줄 모르고 잇다가 이제 확인햇네요 그리고 클라이언트 키를 적용시키니 위젯이 안뜨네요 테스트키로는 잘되는데 ..T T

8 Replies

토스페이먼츠 BOT•17mo ago

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

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

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

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

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

Kimoon Lee•17mo ago

MID 알려주실수 있을까요? 그리고 라이브 클라이언트키로 띄우면 위젯이 안뜨시는 거죠?

FE_Pelican 😅OP•17mo ago

네 mid는 popein7ahb 입니다. 클라이언트 키로 입력하면 작동이 되지 않습니다. 사진은 테스트 키를 사용시 결재 페이지 샷입니다.

ㄱㄱㅇ•17mo ago

export function CheckoutPage({ price, productName, name, email, phone }) {
  const paymentWidgetRef = useRef(null);
  const paymentMethodsWidgetRef = useRef(null);

  useEffect(() => {
    (async () => {
      const paymentWidget = await loadPaymentWidget(clientKey, customerKey);
      const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
        selector,
        { value: price },
      );
      paymentWidget.renderAgreement('#agreement');
      paymentWidgetRef.current = paymentWidget;
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
    })();
  }, []);

  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;

    if (paymentMethodsWidget == null) {
      return;
    }
    paymentMethodsWidget.updateAmount(
      price,
      paymentMethodsWidget.UPDATE_REASON.COUPON,
    );
  }, [price]);

  const handleClick = async () => {
    const paymentWidget = paymentWidgetRef.current;
    if (!name || !email || !phone) {
      return  alert('구매 정보를 입력 해 주세요');
    }
    try {
      await paymentWidget?.requestPayment({
        orderId: nanoid(),
        orderName: productName,
        customerName: name,
        customerEmail: email,
        successUrl: `${window.location.origin}/success?productName=${productName}&phone=${phone}&name=${name}`,
        failUrl: `${window.location.origin}/fail`,
      });
    } catch (error) {
      console.error('결재 실패', error);
      alert('결재가 취소되거나, 이용약관에 동의 해주세요');
      
    }
  };

  return (
    <>
      <div>
        <div id={"payment-widget"} />
        <div id={'agreement'} />
        <button
          className={
            'flex w-[340px] h-[40px] transition bg-cartbtn hover:bg-cartbtnHover rounded-[10px] text-[18px] text-white justify-center items-center mx-auto mt-[60px]'
          }
          onClick={handleClick}
        >
          결제 진행
        </button>
      </div>
    </>
  );
}

export function CheckoutPage({ price, productName, name, email, phone }) {
  const paymentWidgetRef = useRef(null);
  const paymentMethodsWidgetRef = useRef(null);

  useEffect(() => {
    (async () => {
      const paymentWidget = await loadPaymentWidget(clientKey, customerKey);
      const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
        selector,
        { value: price },
      );
      paymentWidget.renderAgreement('#agreement');
      paymentWidgetRef.current = paymentWidget;
      paymentMethodsWidgetRef.current = paymentMethodsWidget;
    })();
  }, []);

  useEffect(() => {
    const paymentMethodsWidget = paymentMethodsWidgetRef.current;

    if (paymentMethodsWidget == null) {
      return;
    }
    paymentMethodsWidget.updateAmount(
      price,
      paymentMethodsWidget.UPDATE_REASON.COUPON,
    );
  }, [price]);

  const handleClick = async () => {
    const paymentWidget = paymentWidgetRef.current;
    if (!name || !email || !phone) {
      return  alert('구매 정보를 입력 해 주세요');
    }
    try {
      await paymentWidget?.requestPayment({
        orderId: nanoid(),
        orderName: productName,
        customerName: name,
        customerEmail: email,
        successUrl: `${window.location.origin}/success?productName=${productName}&phone=${phone}&name=${name}`,
        failUrl: `${window.location.origin}/fail`,
      });
    } catch (error) {
      console.error('결재 실패', error);
      alert('결재가 취소되거나, 이용약관에 동의 해주세요');
      
    }
  };

  return (
    <>
      <div>
        <div id={"payment-widget"} />
        <div id={'agreement'} />
        <button
          className={
            'flex w-[340px] h-[40px] transition bg-cartbtn hover:bg-cartbtnHover rounded-[10px] text-[18px] text-white justify-center items-center mx-auto mt-[60px]'
          }
          onClick={handleClick}
        >
          결제 진행
        </button>
      </div>
    </>
  );
}

위젯 컴포넌트 코드입니다. 웹 환경에서 해당 오류가 발생하고, 테스트 키 및 라이브 키 모두 같은 에러가 발생합니다.

Kimoon Lee•17mo ago

const paymentMethodsWidget = paymentWidget.renderPaymentMethods( selector, { value: price }, ); 이부분을 const paymentMethodsWidget = paymentWidget.renderPaymentMethods( selector, { value: price },{ variantKey: "DEFAULT" } ); 이렇게 수정해서 해보실수 있을까요?

토스페이먼츠 BOT•17mo ago

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

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

ㄱㄱㅇ•17mo ago

저희가 멀티결제 UI를 사용하지 않고 있습니다. 따라서 variantKey가 필요 없는게 아닌가요..? 상점 페이지에서도 기본 UI만 사용하고 있습니다.

ㄱㄱㅇ•17mo ago

해당 코드로 테스트해도 같은 문제가 발생합니다🥲 아 개발자 센터에서 결제 위젯 연동 키로 교체하니 작동합니다. 감사합니다

카트 승인중인데 키를 라이브키를 적용을 아직 안햇는데 진행이 되고 있을까여?

Did you find this page helpful?