해외결제(페이팔) 결제 위젯 관련 문의드립니다.

공식문서 보고 페이팔 간편결제 위젯 로딩 및 공식문서에서 제공된 키로 결제 테스트까지 완료했습니다. 현재 계약된 키로 테스트키 결제 위젯 로딩부터 되지 않고 에러가 발생하는데, 어떤 문제인지 알 수 있을까요?

"code": "4009",
"message": "존재하지 않는 멀티 결제위젯입니다.",

"code": "4009",
"message": "존재하지 않는 멀티 결제위젯입니다.",

13 Replies

토스페이먼츠 BOT•2y ago

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

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

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

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

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

이실장•2y ago

위젯 render쪽 스크립트 한번 공유해주시겠어요?

김용휘OP•2y ago

MID는 reinpolbqk 입니다. 잠시만요.

수민•2y ago

const clientKey = process.env.NEXT_PUBLIC_TOSSPAYMENTS_CLIENT_KEY as string;

export default function Toss() {
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance["renderPaymentMethods"]
  > | null>(null);

  useAsync(async () => {
    const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS); // 비회원 결제

    // ------  결제위젯 렌더링 ------
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      "#payment-method",
      {
        value: 664.98,
        currency: "USD", // USD 통화만 지원
        country: "US", // ISO-3166의 두 자리 국가 코드 모두 지원
      }
      // { variantKey: "PAYPAL" }
    );

    // ------  이용약관 렌더링 ------
   paymentWidget.renderAgreement("#agreement");

    paymentWidgetRef.current = paymentWidget;
    paymentMethodsWidgetRef.current = paymentMethodsWidget;
  }, []);

  return (
    <main>
      <h1>토스페이먼츠 위젯 연동</h1>
      <div id="payment-method" style={{ width: "100%" }} />
      <div id="agreement" style={{ width: "100%" }} />
      <Button variant={"primary"} onClick={handleClick}>
        결제하기
      </Button>
    </main>
  );
}

const clientKey = process.env.NEXT_PUBLIC_TOSSPAYMENTS_CLIENT_KEY as string;

export default function Toss() {
  const paymentWidgetRef = useRef<PaymentWidgetInstance | null>(null);
  const paymentMethodsWidgetRef = useRef<ReturnType<
    PaymentWidgetInstance["renderPaymentMethods"]
  > | null>(null);

  useAsync(async () => {
    const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS); // 비회원 결제

    // ------  결제위젯 렌더링 ------
    const paymentMethodsWidget = paymentWidget.renderPaymentMethods(
      "#payment-method",
      {
        value: 664.98,
        currency: "USD", // USD 통화만 지원
        country: "US", // ISO-3166의 두 자리 국가 코드 모두 지원
      }
      // { variantKey: "PAYPAL" }
    );

    // ------  이용약관 렌더링 ------
   paymentWidget.renderAgreement("#agreement");

    paymentWidgetRef.current = paymentWidget;
    paymentMethodsWidgetRef.current = paymentMethodsWidget;
  }, []);

  return (
    <main>
      <h1>토스페이먼츠 위젯 연동</h1>
      <div id="payment-method" style={{ width: "100%" }} />
      <div id="agreement" style={{ width: "100%" }} />
      <Button variant={"primary"} onClick={handleClick}>
        결제하기
      </Button>
    </main>
  );
}