자체 UI 방식으로 네이버페이/카카오페이 결제 호출 방법 문의

안녕하세요. 현재 토스페이먼츠의 자체 UI 방식을 사용하여 결제 요청을 구현 중입니다. 가상계좌 결제의 경우 아래와 같이 requestPayment를 호출하고 있습니다:

await payment.requestPayment({
    method: "VIRTUAL_ACCOUNT", // 가상계좌
    amount: { currency: "KRW", value: 10000 },
    orderId: "qqBMGnddTULGsamxpaIJV",
    orderName: "토스 티셔츠 외 2건",
    successUrl: window.location.origin + "/shop/success",
    failUrl: window.location.origin + "/shop/fail",
    customerEmail: "customer123@gmail.com",
    customerName: "김토스",
    customerMobilePhone: "01012341234"
});

await payment.requestPayment({
    method: "VIRTUAL_ACCOUNT", // 가상계좌
    amount: { currency: "KRW", value: 10000 },
    orderId: "qqBMGnddTULGsamxpaIJV",
    orderName: "토스 티셔츠 외 2건",
    successUrl: window.location.origin + "/shop/success",
    failUrl: window.location.origin + "/shop/fail",
    customerEmail: "customer123@gmail.com",
    customerName: "김토스",
    customerMobilePhone: "01012341234"
});

네이버페이나 카카오페이 같은 간편결제도 동일한 방식으로, 아래와 같이 method만 변경하여 호출하면 되는지 궁금합니다.

await payment.requestPayment({
    method: "KAKAOPAY", // 카드 및 간편결제
    amount: { currency: "KRW", value: 10000 },
    orderId: "qqBMGnddTULGsamxpaIJV",
    orderName: "토스 티셔츠 외 2건",
    successUrl: window.location.origin + "/shop/success",
    failUrl: window.location.origin + "/shop/fail",
    customerEmail: "customer123@gmail.com",
    customerName: "김토스",
    customerMobilePhone: "01012341234"
});

await payment.requestPayment({
    method: "KAKAOPAY", // 카드 및 간편결제
    amount: { currency: "KRW", value: 10000 },
    orderId: "qqBMGnddTULGsamxpaIJV",
    orderName: "토스 티셔츠 외 2건",
    successUrl: window.location.origin + "/shop/success",
    failUrl: window.location.origin + "/shop/fail",
    customerEmail: "customer123@gmail.com",
    customerName: "김토스",
    customerMobilePhone: "01012341234"
});

즉, method 값만 KAKAOPAY 또는 NAVERPAY로 변경하면 호출 가능한지, 혹은 별도의 추가 설정이나 API 호출 방식이 필요한지 궁금합니다. 감사합니다.

13 Replies

토스페이먼츠 BOT•2w ago

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

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

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

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

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

Minsu Kim•2w ago

method: CARD 간편결제 정보는 card.easypay 필드로 넘겨야합니다.

Minsu Kim•2w ago

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

카드사 및 간편결제 자체창 연동하기 | 토스페이먼...

카드사 및 간편결제 자체창을 연동하는 방법을 알아봅니다.

Minsu Kim•2w ago

https://docs.tosspayments.com/sdk/v2/js#paymentrequestpayment

토스페이먼츠 JavaScript SDK | 토스페이먼츠 개발자센터

토스페이먼츠 JavaScript SDK를 추가하고 메서드를 사용하는 방법을 알아봅니다.

[BE]심봉교OP•2w ago

{
                        method: "CARD", // 카드 및 간편결제
                        amount:  { currency: "KRW", value: 10000 },
                        orderId: "RwkTkLAMiDoPpVMwJN3WX", // 고유 주문번호
                        orderName: "토스 티셔츠 외 2건",
                        successUrl: window.location.origin + "/success", // 결제 요청이 성공하면 리다이렉트되는 URL
                        failUrl: window.location.origin + "/fail", // 결제 요청이 실패하면 리다이렉트되는 URL
                        customerEmail: "customer123@gmail.com",
                        customerName: "김토스",
                        customerMobilePhone: "01012341234",
                        // 카드 결제에 필요한 정보
                        card: {
                            useEscrow: false,
                            flowMode: "DIRECT", // 자체창 여는 옵션
                            // cardCompany: "삼성", // 카드사 자체창
                            easyPay: "KAKAOPAY", // 간편결제 자체창
                            useCardPoint: false,
                            useAppCardOnly: false,
                        },
                    }

{
                        method: "CARD", // 카드 및 간편결제
                        amount:  { currency: "KRW", value: 10000 },
                        orderId: "RwkTkLAMiDoPpVMwJN3WX", // 고유 주문번호
                        orderName: "토스 티셔츠 외 2건",
                        successUrl: window.location.origin + "/success", // 결제 요청이 성공하면 리다이렉트되는 URL
                        failUrl: window.location.origin + "/fail", // 결제 요청이 실패하면 리다이렉트되는 URL
                        customerEmail: "customer123@gmail.com",
                        customerName: "김토스",
                        customerMobilePhone: "01012341234",
                        // 카드 결제에 필요한 정보
                        card: {
                            useEscrow: false,
                            flowMode: "DIRECT", // 자체창 여는 옵션
                            // cardCompany: "삼성", // 카드사 자체창
                            easyPay: "KAKAOPAY", // 간편결제 자체창
                            useCardPoint: false,
                            useAppCardOnly: false,
                        },
                    }

카카오페이를 넣고 실행하면

_app-8fdcc4457fbc5d3f.js:37 
 
{code: 'NOT_SUPPORTED_EASYPAY_METHOD', message: '지원되지 않는 간편결제 수단입니다.', data: {…}, __sentry_captured__: true}
code
: 
"NOT_SUPPORTED_EASYPAY_METHOD"
data
: 
failUrl
: 
"http://localhost:5173/fail?code=NOT_SUPPORTED_EASYPAY_METHOD&message=%EC%A7%80%EC%9B%90%EB%90%98%EC%A7%80%20%EC%95%8A%EB%8A%94%20%EA%B0%84%ED%8E%B8%EA%B2%B0%EC%A0%9C%20%EC%88%98%EB%8B%A8%EC%9E%85%EB%8B%88%EB%8B%A4.&orderId=RwkTkLAMiDoPpVMwJN3WX"
[[Prototype]]
: 
Object
message
: 
"지원되지 않는 간편결제 수단입니다."
__sentry_captured__
: 
true
[[Prototype]]
: 
Object

_app-8fdcc4457fbc5d3f.js:37 
 
{code: 'NOT_SUPPORTED_EASYPAY_METHOD', message: '지원되지 않는 간편결제 수단입니다.', data: {…}, __sentry_captured__: true}
code
: 
"NOT_SUPPORTED_EASYPAY_METHOD"
data
: 
failUrl
: 
"http://localhost:5173/fail?code=NOT_SUPPORTED_EASYPAY_METHOD&message=%EC%A7%80%EC%9B%90%EB%90%98%EC%A7%80%20%EC%95%8A%EB%8A%94%20%EA%B0%84%ED%8E%B8%EA%B2%B0%EC%A0%9C%20%EC%88%98%EB%8B%A8%EC%9E%85%EB%8B%88%EB%8B%A4.&orderId=RwkTkLAMiDoPpVMwJN3WX"
[[Prototype]]
: 
Object
message
: 
"지원되지 않는 간편결제 수단입니다."
__sentry_captured__
: 
true
[[Prototype]]
: 
Object