sungyeon•4w ago

빌링 키 발급 중 400 error 문의

테스트코드를 통해 정기 결제를 위한 빌링키 발급 코드를 작성하고 있습다. 카드 정보를 입력하는 위젯에서, 정보를 입력 후 다음으로 넘어가면 본인 인증을 하는 뷰로 이어져야 하는데, 콘솔 상으로 특별한 에러코드 없이 아래와 같은 400 ERROR을 받은 후 SUCCESS 페이지로 리다이렉션 됩니다. 요청 URL: https://log-sandbox.tosspayments.com/v1/log 요청 메서드: POST 상태 코드: 400 Bad Request 관련 코드는 다음과 같습니다.

const customerKey = generateRandomString();
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq";

    useEffect(() => {
        async function fetchPayment() {
            try {
                const tossPayments = await loadTossPayments(clientKey);
                const paymentInstance = tossPayments.payment({ customerKey });
                console.log("paymentInstance", paymentInstance);
                setPayment(paymentInstance);
            } catch (error) {
                console.error("Error fetching payment:", error);
            }
        }

        fetchPayment();
    }, [clientKey, customerKey]);

    useEffect(() => {
        if (payment) {
            requestBillingAuth(); // payment 객체가 설정된 후에 자동으로 실행
        }
    }, [payment]);

async function requestBillingAuth() {
        console.log("payment", payment);
        if (!payment) {
            console.error('payment 객체가 초기화되지 않았습니다.');
            return;
        }

        await payment.requestBillingAuth({
            method: "CARD", // 자동결제(빌링)은 카드만 지원합니다
            successUrl: window.location.origin + "/account/billing", // 요청이 성공하면 리다이렉트되는 URL
            failUrl: window.location.origin + "/fail", // 요청이 실패하면 리다이렉트되는 URL
            customerEmail: "customer123@gmail.com",
            customerName: "김토스",
            windowTarget : "self"
        });
    }

const customerKey = generateRandomString();
const clientKey = "test_ck_D5GePWvyJnrK0W0k6q8gLzN97Eoq";

    useEffect(() => {
        async function fetchPayment() {
            try {
                const tossPayments = await loadTossPayments(clientKey);
                const paymentInstance = tossPayments.payment({ customerKey });
                console.log("paymentInstance", paymentInstance);
                setPayment(paymentInstance);
            } catch (error) {
                console.error("Error fetching payment:", error);
            }
        }

        fetchPayment();
    }, [clientKey, customerKey]);

    useEffect(() => {
        if (payment) {
            requestBillingAuth(); // payment 객체가 설정된 후에 자동으로 실행
        }
    }, [payment]);

async function requestBillingAuth() {
        console.log("payment", payment);
        if (!payment) {
            console.error('payment 객체가 초기화되지 않았습니다.');
            return;
        }

        await payment.requestBillingAuth({
            method: "CARD", // 자동결제(빌링)은 카드만 지원합니다
            successUrl: window.location.origin + "/account/billing", // 요청이 성공하면 리다이렉트되는 URL
            failUrl: window.location.origin + "/fail", // 요청이 실패하면 리다이렉트되는 URL
            customerEmail: "customer123@gmail.com",
            customerName: "김토스",
            windowTarget : "self"
        });
    }

5 Replies

토스페이먼츠 BOT•4w ago

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

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

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

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

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

Ayaan•4w ago

log쪽은 ERROR가 와도 무관합니다. 말 그대로 log 남기는 API라서, 결제진행에 영향이 없어야하는데요.

유부장•4w ago

1. 빌링키 생성 요청 결제창은 잘 뜬것 같고 2. 카드 정보도 잘 입력 했고 3. successUrl 로 잘 이동 된것 같은데요 상황만 봐서는 잘 진행된것 같습니다. 콘솔에 보이는 샌드박스 로그 관련해서는 신경쓰지 않으셔도 될것 같고요. 공용키 사용하고 있으신것 같은데, 공용키에서 테스트 환경에서 휴대폰 본인인증은 없으면 우선은 무시하시고, 나중에 계약하고 난 이후에 보시면 될것 같습니다.

sungyeon•4w ago

계속 진행해보겠습니다. 친절한 답변 감사드립니다 (__)

토스페이먼츠 BOT•4w ago

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

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