sungyeon Posts - Toss payments 개발자 커뮤니티

sungyeon

•Created by sungyeon on 10/4/2024 in #❓┃연동개발-문의

빌링 키 발급 중 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"
        });
    }

7 replies