U_X•3mo ago

필수 파라미터가 누락되었다고 뜹니다

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');


async function requestTossPayment(site, keyword, payMethod) {


    try {
        const payment = tossPayments.payment();
        await payment.requestPayment({
            method: "CARD",
            amount: {
                currency: "KRW",
                value: 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        });
    } catch (err) {

        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');


async function requestTossPayment(site, keyword, payMethod) {


    try {
        const payment = tossPayments.payment();
        await payment.requestPayment({
            method: "CARD",
            amount: {
                currency: "KRW",
                value: 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        });
    } catch (err) {

        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

이렇게 코드를 작성했는데 필수 파라미터가 누락되었다고 뜹니다 뭐가 잘못되었을까요..?

51 Replies

토스페이먼츠 BOT•3mo ago

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

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

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

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

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

Kimoon Lee•3mo ago

flowMode 를 안보내신것 같습니다.

Kimoon Lee•3mo ago

https://docs.tosspayments.com/guides/v2/payment-window/integration

카드/간편결제 통합결제창 연동하기 | 토스페이먼...

토스페이먼츠 카드/간편결제 통합결제창을 연동하는 방법이에요. 구매자가 결제창에서 결제수단, 결제 정보를 선택한 뒤에 카드 또는 간편결제 앱으로 이동해요.

Kimoon Lee•3mo ago

여기 샘플의 요청 값 참고해서 보내주세요.

U_XOP•3mo ago

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');

// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {

    try {
        const payment = tossPayments.payment();
        await payment.requestPayment({
            method: "CARD",
            amount: {
                currency: "KRW",
                value: 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            flowMode: "DEFAULT" // :white_check_mark: 통합결제창 옵션 추가
        });
    } catch (err) {
        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');

// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {

    try {
        const payment = tossPayments.payment();
        await payment.requestPayment({
            method: "CARD",
            amount: {
                currency: "KRW",
                value: 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            flowMode: "DEFAULT" // :white_check_mark: 통합결제창 옵션 추가
        });
    } catch (err) {
        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

이렇게 했는데 여전히 필수 파라미터가 누락되었다고 합니다

Minsu Kim•3mo ago

문서 다시한번만 확인해주셔요 card안에 flowMode가 설정됩니다.

U_XOP•3mo ago

async function requestTossPayment(site, keyword, payMethod) {
    try {
        const payment = tossPayments.payment();
        const baseOptions = {
            method: payMethod === "카드" ? "CARD" : payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" : "ACCOUNT_TRANSFER",
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 객체로 옵션 추가
        if (baseOptions.method === "CARD") {
            baseOptions.card = {
                useEscrow: false,
                flowMode: "DEFAULT", // 통합결제창 여는 옵션
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        await payment.requestPayment(baseOptions);
    } catch (err) {
        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

async function requestTossPayment(site, keyword, payMethod) {
    try {
        const payment = tossPayments.payment();
        const baseOptions = {
            method: payMethod === "카드" ? "CARD" : payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" : "ACCOUNT_TRANSFER",
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerEmail: "test@example.com",
            customerName: "비회원",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 객체로 옵션 추가
        if (baseOptions.method === "CARD") {
            baseOptions.card = {
                useEscrow: false,
                flowMode: "DEFAULT", // 통합결제창 여는 옵션
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        await payment.requestPayment(baseOptions);
    } catch (err) {
        console.error(err.message || err);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (err.message || err));
    }
}

이렇게 했는데도 여전히 오류가 뜹니다

Kimoon Lee•3mo ago

지금 요청하신건 저희쪽으로 전달이 되지 않았습니다. JS 쪽에서 오류가 발생한건 아닌지 브라우저 콘솔 확인해 보세요.

U_XOP•3mo ago

브라우저 콘솔에서는 buy:673 필수 파라미터가 누락되었습니다. requestTossPayment @ buy:673 라고 뜹니다 Uncaught (in promise) Error: 필수 파라미터가 누락되었습니다.

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

async function requestTossPayment(payMethod) {
  const method = payMethod === "카드" ? "CARD" :
                 payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" : "TRANSFER";

  try {
    await tossPayments.requestPayment(method, {
      amount: { value: 1650, currency: 'KRW' },
      orderId: generateRandomString(),
      orderName: "고정 URL 구매",
      customerKey: generateRandomString(),
      customerName: "비회원",
      customerEmail: "test@example.com",
      successUrl: "https://lynky.xyz/buy-success",
      failUrl: "https://lynky.xyz/buy-fail"
    });
  } catch (error) {
    console.error('Toss payment request failed:', error);
  }
}

const tossPayments = TossPayments('test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm');

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

async function requestTossPayment(payMethod) {
  const method = payMethod === "카드" ? "CARD" :
                 payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" : "TRANSFER";

  try {
    await tossPayments.requestPayment(method, {
      amount: { value: 1650, currency: 'KRW' },
      orderId: generateRandomString(),
      orderName: "고정 URL 구매",
      customerKey: generateRandomString(),
      customerName: "비회원",
      customerEmail: "test@example.com",
      successUrl: "https://lynky.xyz/buy-success",
      failUrl: "https://lynky.xyz/buy-fail"
    });
  } catch (error) {
    console.error('Toss payment request failed:', error);
  }
}

이렇게 수정 하니 apigw-sandbox.tosspayments.com/payment-gateway-window/open/pg-window/v1/px-payment-parameters?Authorization=Basic%20dGVzdF9nY2tfZG9jc19Pdms1cmsxRXdrRWJQMFc0M24wN3hsem06:1 Failed to load resource: the server responded with a status of 400 () buy:671 Toss payment request failed: t: 인증되지 않은 시크릿 키 혹은 클라이언트 키 입니다. at XMLHttpRequest.<anonymous> (payment-widget:14:222910) 라고 뜨는데 테스트 키가 저게 아닌가요? 저는 테스트 키 가지고 실행 중 입니다

Minsu Kim•3mo ago

지금 결제위젯을 쓰시는건가요? 결제창을 쓰시는건가요 키는 결제위젯 키, 코드는 결제창 코드인데요 하나로 통일해서 사용해 주세요

U_XOP•3mo ago

결제창으로 쓰고 싶습니다 그거 관련된 키가 뭔가요?

<script src="https://js.tosspayments.com/v2/standard"></script>

const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 옵션 추가
        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // TossPayments v2 표준 결제창은 payment.requestPayment(options)로 호출
        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

<script src="https://js.tosspayments.com/v2/standard"></script>

const clientKey = "test_gck_docs_Ovk5rk1EwkEbP0W43n07xlzm";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 옵션 추가
        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // TossPayments v2 표준 결제창은 payment.requestPayment(options)로 호출
        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

이렇게 했는데도 필수 파라미터가 누락 되었다고 합니다.

Kimoon Lee•3mo ago

test_ck 로 시작되는 키를 사용해 주세요. 지금 결제창 호출하시는데 결제위젯키를 사용하고 계씹니다.

U_XOP•3mo ago

test_ck_QbgMGZzorz4ewpDJPG173l5E1em4 로 사용 했는데도 여전히 필수 파라미터가 누락 되었다고 합니다.

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 옵션 추가
        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // TossPayments v2 표준 결제창은 payment.requestPayment(options)로 호출
        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        // 카드 결제일 때만 card 옵션 추가
        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // TossPayments v2 표준 결제창은 payment.requestPayment(options)로 호출
        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

Kimoon Lee•3mo ago

지금은 계좌이체로 보내고 계신거죠?>

U_XOP•3mo ago

카드 결제로 했습니다 가상계좌, 계좌이체, 신용/체크카드 결제 모두 필수 파라미터가 없다고 합니다. buy:699 Toss payment request failed: r: 필수 파라미터가 누락되었습니다. at i.value (standard:7:478725) at n.value (standard:7:380684) at requestTossPayment (buy:674:38) at HTMLButtonElement.<anonymous> (buy:796:11)

Kimoon Lee•3mo ago

저희 로그상에 값이 이렇게 정상적이지 않은 json 이 전달되고 있어요. {"amount":{"value":1650,"currency":"KRW"},"orderId":"zz715ywrhMzieP6Z56uq","orderName":"고정 URL 구매","customerKey":"YIJHRjwfYIGrjIoIEOUr","customerName":"비회원","customerEmail":"test@example.com","successUrl":"https://lynky.xyz/buy-success","failUrl":"https://lynky.xyz/buy-fail","methodType":"TRANSFER"}" method 값이 이상하게 들어가는 것처럼 보입니다. await payment.requestPayment(options); 호출하기 전에 options 의 값을 json 으로 변경해서 보내주실수 있을까요?

U_XOP•3mo ago

async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // options를 JSON 문자열로 변환해서 콘솔에 출력
        const optionsJson = JSON.stringify(options, null, 2);
        console.log("결제 옵션(JSON):", optionsJson);

        // 필요하다면 서버로 전송 (예시)
        // await fetch('/save-payment-options', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: optionsJson
        // });

        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            method,
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail"
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // options를 JSON 문자열로 변환해서 콘솔에 출력
        const optionsJson = JSON.stringify(options, null, 2);
        console.log("결제 옵션(JSON):", optionsJson);

        // 필요하다면 서버로 전송 (예시)
        // await fetch('/save-payment-options', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: optionsJson
        // });

        await payment.requestPayment(options);
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

로 보냈습니다 buy:706 Toss payment request failed: r: 필수 파라미터가 누락되었습니다. at i.value (standard:7:478725) at n.value (standard:7:380684) at requestTossPayment (buy:675:38) at HTMLButtonElement.<anonymous> (buy:804:11) requestTossPayment @ buy:706 (anonymous) @ buy:804 @Kimoon Lee

Kimoon Lee•3mo ago

에러 받으신 시간이 언제이신가요? 그런데 payment.requestPayment(options); 에 optionsJson 을 넣으셔야 하는거 아닌가요?

U_XOP•3mo ago

지금 다시 수정해서 했는데 여전히 필수 파라미터 오류가 뜹니다 지금 했습니다

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method // "CARD" 등
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // options를 JSON 문자열로 변환해서 콘솔에 출력
        const optionsJson = JSON.stringify(options, null, 2);
        console.log("결제 옵션(JSON):", optionsJson);

        // 필요하다면 서버로 전송 (예시)
        // await fetch('/save-payment-options', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: optionsJson
        // });

        await payment.requestPayment(optionsJson); // ❌ JSON 문자열은 안 됨
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
// ...existing code...
async function requestTossPayment(site, keyword, payMethod) {
    const method =
      payMethod === "카드" ? "CARD" :
      payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
      payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

    try {
        const payment = tossPayments.payment();
        let options = {
            amount: 1650,
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method // "CARD" 등
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        // options를 JSON 문자열로 변환해서 콘솔에 출력
        const optionsJson = JSON.stringify(options, null, 2);
        console.log("결제 옵션(JSON):", optionsJson);

        // 필요하다면 서버로 전송 (예시)
        // await fetch('/save-payment-options', {
        //     method: 'POST',
        //     headers: { 'Content-Type': 'application/json' },
        //     body: optionsJson
        // });

        await payment.requestPayment(optionsJson); // ❌ JSON 문자열은 안 됨
    } catch (error) {
        console.error('Toss payment request failed:', error);
        alert('결제창 호출 중 오류가 발생했습니다.\n' + (error.message || error));
    }
}

Kimoon Lee•3mo ago

https://tosspublic.notion.site/HAR-1d5714bbfde7809dbbbce11eeb71ff87

tosspublic on Notion

📘 HAR 파일 저장 가이드 | Notion

웹 페이지의 네트워크 활동을 기록하려면, 브라우저의 개발자 도구(DevTools) 의 네트워크(Network) 탭을 사용하여 .har 파일을 저장할 수 있습니다.

Kimoon Lee•3mo ago

이가이드에 따라서 브라우저에서 에러 발생시키신 후에 HAR 파일 만드신후 공유해 주실수 있을까요? 저희 서버로 넘어오기 전에 FE 쪽에서 에러가 발생되는것 같습니다.

U_XOP•3mo ago

여기 있습니다

127.0.0.1.har

Kimoon Lee•3mo ago

에러 발생시키신것 맞나요? 파일에 에러난 부분이 없는데요.

Minsu Kim•3mo ago

이거 HAR은 Network 탭만 캡쳐되고, Console에 오류가 나오는 건 기록이 안될겁니다.

Kimoon Lee•3mo ago

그러면 순수하게 FE 에서 에러가 난거네요. 에러 발생한 상태에서 브라우저 콘솔 캡쳐해서 보내주세요.

U_XOP•3mo ago

음..

U_XOP•3mo ago

이렇게 나옵니다.

Kimoon Lee•3mo ago

console.log("결제 옵션(JSON):", optionsJson); 이거 출력하신거는 콘솔에 안뜨나요?

U_XOP•3mo ago

넵.. 안 뜨네요..

U_XOP•3mo ago

requestTossPayment 호출됨 https://lynky.xyz/ httpslynkyxyz1 카드 buy:700 결제 함수 에러: r: 필수 파라미터가 누락되었습니다. at n.<anonymous> (standard:7:478725) at n.value (standard:7:380684) at requestTossPayment (buy:674:38) at HTMLButtonElement.<anonymous> (buy:795:11)

Lynky - URL 무료 단축 서비스

Lynky - 간편한 무료 단축 URL

U_XOP•3mo ago

이렇게 뜹니다 결제 옵션(JSON): { "amount": 1650, "orderId": "OUV3aVIfPstF2K7ZUHo1", "orderName": "고정 URL 구매", "customerName": "비회원", "customerEmail": "test@example.com", "successUrl": "https://lynky.xyz/buy-success", "failUrl": "https://lynky.xyz/buy-fail", "method": "CARD", "card": { "useEscrow": false, "flowMode": "DEFAULT", "useCardPoint": false, "useAppCardOnly": false } } 이렇게 뜨네요 @Kimoon Lee 음..

Kimoon Lee•3mo ago

지금 V2 사용하시는 거죠? 그럼 "amount": 1650, 가 아니라 "amount": { "currency": "KRW", "value": 50000 }, 이런식으로 object 로 보내주셔야 합니다.

U_XOP•3mo ago

requestTossPayment 호출됨 https://lynky.xyz/ httpslynkyxyz11414 카드 buy:698 결제 옵션(JSON): { "amount": { "currency": "KRW", "value": 1650 }, "orderId": "JvMKSNLOA15iCDobCJuS", "orderName": "고정 URL 구매", "customerName": "비회원", "customerEmail": "test@example.com", "successUrl": "https://lynky.xyz/buy-success", "failUrl": "https://lynky.xyz/buy-fail", "method": "CARD", "card": { "useEscrow": false, "flowMode": "DEFAULT", "useCardPoint": false, "useAppCardOnly": false } } buy:701 Uncaught (in promise) TypeError: tossPayments.requestPayment is not a function at requestTossPayment (buy:701:28) at HTMLButtonElement.<anonymous> (buy:797:11) requestTossPayment @ buy:701 (anonymous) @ buy:797 [NEW] Explain Console errors by using Copilot in Edge: click
to explain an error. Learn more Don't show again

Lynky - URL 무료 단축 서비스

Lynky - 간편한 무료 단축 URL

U_XOP•3mo ago

여전히 이렇게 나옵니다.. 뭐가 문제일까요..

Kimoon Lee•3mo ago

tossPayments.requestPayment 이게 없다는 에러인데요.

U_XOP•3mo ago

? 뭐가 빠졌길래 그럴까요..?

<script src="https://js.tosspayments.com/v2/standard"></script>


const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
async function requestTossPayment(site, keyword, payMethod) {
        console.log("requestTossPayment 호출됨", site, keyword, payMethod);
        const method =
          payMethod === "카드" ? "CARD" :
          payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
          payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

        let options = {
            "amount": {
                "currency": "KRW",
                "value": 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        const optionsJson = JSON.stringify(options, null, 2);
        alert(optionsJson);  // 결제 옵션을 JSON 문자열로 변환하여 alert로 표시
        console.log("결제 옵션(JSON):", optionsJson);

        // 수정된 부분: tossPayments.payment() :x:
        await tossPayments.requestPayment(method, options);

}

<script src="https://js.tosspayments.com/v2/standard"></script>


const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
async function requestTossPayment(site, keyword, payMethod) {
        console.log("requestTossPayment 호출됨", site, keyword, payMethod);
        const method =
          payMethod === "카드" ? "CARD" :
          payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
          payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

        let options = {
            "amount": {
                "currency": "KRW",
                "value": 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        const optionsJson = JSON.stringify(options, null, 2);
        alert(optionsJson);  // 결제 옵션을 JSON 문자열로 변환하여 alert로 표시
        console.log("결제 옵션(JSON):", optionsJson);

        // 수정된 부분: tossPayments.payment() :x:
        await tossPayments.requestPayment(method, options);

}

이렇게 했습니다

Kimoon Lee•3mo ago

아 죄송합니다. https://docs.tosspayments.com/guides/v2/payment-window/integration

카드/간편결제 통합결제창 연동하기 | 토스페이먼...

Kimoon Lee•3mo ago

여기 있는 FE 코드 그대로 써보실수 있나요? const tossPayments = TossPayments(clientKey); const payment = tossPayments.payment({ customerKey }); await payment.requestPayment({ 이렇게 호출해 주셔야 합니다. await tossPayments.requestPayment(method, options); 지금은 이렇게 호출하고 계시구요.

U_XOP•3mo ago

requestTossPayment 호출됨 https://lynky.xyz/ httpslynkyxyz12412141 카드 buy:698 결제 옵션(JSON): { "amount": { "currency": "KRW", "value": 1650 }, "orderId": "cD2s7DHadeLU5OSmfGxP", "orderName": "고정 URL 구매", "customerName": "비회원", "customerEmail": "test@example.com", "successUrl": "https://lynky.xyz/buy-success", "failUrl": "https://lynky.xyz/buy-fail", "method": "CARD", "card": { "useEscrow": false, "flowMode": "DEFAULT", "useCardPoint": false, "useAppCardOnly": false } } buy:701 Uncaught (in promise) ReferenceError: payment is not defined at requestTossPayment (buy:701:9) at HTMLButtonElement.<anonymous> (buy:797:11) requestTossPayment @ buy:701 (anonymous) @ buy:797 [NEW] Explain Console errors by using Copilot in Edge: click
to explain an error. Learn more

Lynky - URL 무료 단축 서비스

Lynky - 간편한 무료 단축 URL

U_XOP•3mo ago

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
async function requestTossPayment(site, keyword, payMethod) {
        console.log("requestTossPayment 호출됨", site, keyword, payMethod);
        const method =
          payMethod === "카드" ? "CARD" :
          payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
          payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

        let options = {
            "amount": {
                "currency": "KRW",
                "value": 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        const optionsJson = JSON.stringify(options, null, 2);
        alert(optionsJson);  // 결제 옵션을 JSON 문자열로 변환하여 alert로 표시
        console.log("결제 옵션(JSON):", optionsJson);

        // 수정된 부분: tossPayments.payment() ❌
        await payment.requestPayment({method, options});

}

const clientKey = "test_ck_QbgMGZzorz4ewpDJPG173l5E1em4";
const tossPayments = TossPayments(clientKey);

function generateRandomString(length = 20) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return result;
}
async function requestTossPayment(site, keyword, payMethod) {
        console.log("requestTossPayment 호출됨", site, keyword, payMethod);
        const method =
          payMethod === "카드" ? "CARD" :
          payMethod === "가상계좌" ? "VIRTUAL_ACCOUNT" :
          payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD";

        let options = {
            "amount": {
                "currency": "KRW",
                "value": 1650
            },
            orderId: generateRandomString(),
            orderName: "고정 URL 구매",
            customerName: "비회원",
            customerEmail: "test@example.com",
            successUrl: "https://lynky.xyz/buy-success",
            failUrl: "https://lynky.xyz/buy-fail",
            method: method
        };

        if (method === "CARD") {
            options.card = {
                useEscrow: false,
                flowMode: "DEFAULT",
                useCardPoint: false,
                useAppCardOnly: false
            };
        }

        const optionsJson = JSON.stringify(options, null, 2);
        alert(optionsJson);  // 결제 옵션을 JSON 문자열로 변환하여 alert로 표시
        console.log("결제 옵션(JSON):", optionsJson);

        // 수정된 부분: tossPayments.payment() ❌
        await payment.requestPayment({method, options});

}

여전히 그렇습니다.. await payment.requestPayment({method, options}); 로 했습니다

Kimoon Lee•3mo ago

const payment = tossPayments.payment({ customerKey }); 이게 없으신것 같은데요.

U_XOP•3mo ago

음..

Kimoon Lee•3mo ago

처음 연동하시는거면 github 에 있는 저희 샘플을 우선 돌려보시기 바랍니다.

U_XOP•3mo ago

오 떴습니다 감사합니다 혹시 라이브로 전환하게 된다면 가입비가 얼마일까요? 그리고 혹시 보증보험이 필수일까요?

Kimoon Lee•3mo ago

이부분은 1544-7772로 문의 부탁드립니다.

U_XOP•3mo ago

넵 감사합니다!

토스페이먼츠 BOT•3mo ago

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

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

U_XOP•3mo ago

아 혹시 하나만 더 질문을 드려도 될까요? Uncaught (in promise) r: method 파라미터에 사용할 수 없는 enum 값입니다. at Proxy.<anonymous> (standard:7:478725) at Object.apply (standard:7:74711) at Proxy.<anonymous> (standard:7:79247) at Object.apply (standard:7:72012) at requestTossPayment (buy:705:17) at HTMLButtonElement.<anonymous> (buy:808:11) 계좌 이체에서는 이렇게 뜨는데 뭘까요?

Minsu Kim•3mo ago

뭐라고 method를 넘기셨어요?

U_XOP•3mo ago

payMethod === "계좌이체" ? "ACCOUNT_TRANSFER" : "CARD"; 라고 했습니다

Kimoon Lee•3mo ago

ACCOUNT_TRANSFER 라는 enum 은 없습니다. 가이드를 참고해주세요.

필수 파라미터가 누락되었다고 뜹니다

Did you find this page helpful?