/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ ul: "ul", li: "li", p: "p", h1: "h1", a: "a", img: "img", h2: "h2", strong: "strong", pre: "pre", code: "code", div: "div", span: "span", h3: "h3", table: "table", thead: "thead", tr: "tr", th: "th", tbody: "tbody", td: "td" }, _provideComponents(), props.components), {TableOfContents, LogNextLink, Callout, GlossaryPopover, CopyLinkIcon, Grid, GridCol, IconCard, FeedbackButton, ClientKey, SecretKey, TechStackScope, UniqueId, ExternalLink, ParameterList, ParameterItem, RequestSnippet, Accordion, AccordionItem} = _components; if (!Accordion) _missingMdxReference("Accordion", true); if (!AccordionItem) _missingMdxReference("AccordionItem", true); if (!AccordionItem.Icon) _missingMdxReference("AccordionItem.Icon", true); if (!Callout) _missingMdxReference("Callout", true); if (!ClientKey) _missingMdxReference("ClientKey", true); if (!CopyLinkIcon) _missingMdxReference("CopyLinkIcon", true); if (!ExternalLink) _missingMdxReference("ExternalLink", true); if (!FeedbackButton) _missingMdxReference("FeedbackButton", true); if (!GlossaryPopover) _missingMdxReference("GlossaryPopover", true); if (!Grid) _missingMdxReference("Grid", true); if (!GridCol) _missingMdxReference("GridCol", true); if (!IconCard) _missingMdxReference("IconCard", true); if (!LogNextLink) _missingMdxReference("LogNextLink", true); if (!ParameterItem) _missingMdxReference("ParameterItem", true); if (!ParameterList) _missingMdxReference("ParameterList", true); if (!RequestSnippet) _missingMdxReference("RequestSnippet", true); if (!SecretKey) _missingMdxReference("SecretKey", true); if (!TableOfContents) _missingMdxReference("TableOfContents", true); if (!TechStackScope) _missingMdxReference("TechStackScope", true); if (!UniqueId) _missingMdxReference("UniqueId", true); return _jsxs(_Fragment, { children: [_jsx(TableOfContents, { children: _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#api-키-준비하기", title: true, children: "API 키 준비하기" }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#1-먼저-sdk를-준비하세요", title: true, children: "1. 먼저, SDK를 준비하세요" }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#2-결제창을-띄워보세요-", title: true, children: "2. 결제창을 띄워보세요 🚀" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#결제-정보-파라미터", title: true, children: "결제 정보 파라미터" }) }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#3-결제-승인을-요청하세요", title: true, children: "3. 결제 승인을 요청하세요" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#리다이렉트-url-확인하기", title: true, children: "리다이렉트 URL 확인하기" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#결제-승인-api-호출하기", title: true, children: "결제 승인 API 호출하기" }) }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#4-결제를-성공적으로-완료하셨네요-", title: true, children: "4. 결제를 성공적으로 완료하셨네요! 🎉" }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(LogNextLink, { passHref: true, href: "#5-간편결제-응답-확인하기", title: true, children: "5. 간편결제 응답 확인하기" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#간편결제-결제수단-타입", title: true, children: "간편결제 결제수단 타입" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#case-1-간편결제에-등록된-카드로-결제하기", title: true, children: "Case 1. 간편결제에 등록된 카드로 결제하기" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#case-2-간편결제에-등록된-카드--적립식-결제수단으로-결제하기", title: true, children: "Case 2. 간편결제에 등록된 카드 + 적립식 결제수단으로 결제하기" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#case-3-충전식-결제수단으로-결제하기", title: true, children: "Case 3. 충전식 결제수단으로 결제하기" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#case-4-충전식-결제수단--적립식-결제수단으로-결제하기", title: true, children: "Case 4. 충전식 결제수단 + 적립식 결제수단으로 결제하기" }) }), "\n", _jsx(_components.li, { children: _jsx(LogNextLink, { passHref: true, href: "#case-5-적립식-결제수단으로-결제하기", title: true, children: "Case 5. 적립식 결제수단으로 결제하기" }) }), "\n"] }), "\n"] }), "\n"] }) }), "\n", _jsx(Callout, { type: "warning", children: _jsxs(_components.p, { children: ["카드사 및 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/easypay", title: true, children: "간편결제" }) }), " 자체창을 바로 호출하기 위해서는 결제 UI를 직접 만들어야 합니다. 새로운 버전의 ", _jsx(LogNextLink, { passHref: true, href: "/guides/payment-widget/integration", title: true, children: "결제위젯" }), "을 사용하면 따로 결제 UI를 만들 필요가 없어 편리합니다."] }) }), "\n", _jsxs(_components.h1, { id: "카드사-및-간편결제-자체창-바로-열기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#카드사-및-간편결제-자체창-바로-열기", children: _jsx(CopyLinkIcon, { id: "카드사-및-간편결제-자체창-바로-열기" }) }), "카드사 및 간편결제 자체창 바로 열기"] }), "\n", _jsx(_components.p, { children: "토스페이먼츠 결제창 화면 대신 미리 선택한 카드사와 간편결제사의 자체창을 바로 호출하는 방법을 알려드려요." }), "\n", _jsx(_components.p, { children: "카드사 자체창은 앱카드, 일반결제 등 카드사에서 제공하는 모든 결제 방법을 제공합니다. 간편결제사 자체창은 고객이 간편결제에 미리 등록한 카드나 계좌로 결제할 수 있는 서비스를 제공합니다. 해외카드 자체창은 지원하지 않습니다." }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://static.tosspayments.com/docs/window-flow.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/window-flow.png", alt: "결제창-결제흐름" }) }) }), "\n", _jsxs(Grid, { gap: 16, children: [_jsx(GridCol, { width: { sm: 6, md: 6, lg: 6 }, children: _jsx(IconCard, { height: 140, icon: "icon-github-mono", title: "샘플 프로젝트", description: "자체창 샘플 프로젝트입니다.", href: "https://github.com/tosspayments/payment-samples/tree/main/payment-direct-window" }) }), _jsx(GridCol, { width: { sm: 6, md: 6, lg: 6 }, children: _jsx(IconCard, { height: 140, icon: "icon-vanillajs-fill", title: "결제창 SDK 레퍼런스", description: "JavaScript SDK 스펙을 더 자세히 알아보세요.", href: "/reference/js-sdk" }) })] }), "\n", _jsx(Callout, { type: "info", children: _jsxs(_components.p, { children: [_jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/easypay", title: true, children: "간편결제" }) }), "는 토스페이, 네이버페이, 삼성페이, 엘페이, 카카오페이, 페이코, SSG페이를 지원합니다. 간편결제 서비스를 연동하려면 토스페이먼츠 고객센터(1544-7772, ", _jsx(LogNextLink, { passHref: true, href: "mailto:support@tosspayments.com", title: true, children: "support@tosspayments.com" }), ")로 문의해주세요."] }) }), "\n", _jsxs(_components.h2, { id: "api-키-준비하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#api-키-준비하기", children: _jsx(CopyLinkIcon, { id: "api-키-준비하기" }) }), "API 키 준비하기", _jsx(FeedbackButton, { section: "API 키 준비하기" })] }), "\n", _jsxs(_components.p, { children: ["결제창은 ", _jsx(LogNextLink, { passHref: true, href: "/reference/using-api/api-keys#api-키-종류-이해하기", title: true, children: _jsx(_components.strong, { children: "API 개별 연동 키" }) }), "로 연동하세요."] }), "\n", _jsxs(_components.p, { children: ["토스페이먼츠에 회원가입하기 전이라면, 다음 ", _jsx(_components.strong, { children: "문서 테스트 키" }), "로 연동할 수 있어요. 토스페이먼츠에 회원가입했다면, 로그인 후 다음 ", _jsx(_components.strong, { children: "내 테스트 키" }), "로 결제를 연동하고 개발자센터에서 테스트 결제내역을 확인하세요."] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-js", lang: "js", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// API 개별 테스트 연동 키" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 토스페이먼츠에 회원 가입하기 전이라면 아래 키는 문서 테스트 키입니다." }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 토스페이먼츠에 회원 가입하고 로그인한 상태라면 아래 키는 내 테스트 키입니다." }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(ClientKey, {}), "'"] }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " secretKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(SecretKey, {}), "'"] }), "\n"] })] }) }), "\n", _jsxs(_components.h2, { id: "1-먼저-sdk를-준비하세요", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#1-먼저-sdk를-준비하세요", children: _jsx(CopyLinkIcon, { id: "1-먼저-sdk를-준비하세요" }) }), "1. 먼저, SDK를 준비하세요", _jsx(FeedbackButton, { section: "1. 먼저, SDK를 준비하세요" })] }), "\n", _jsxs(TechStackScope, { frontend: "HTML", children: [_jsx(_components.p, { children: "SDK를 스크립트 태그에 추가한 뒤 클라이언트 키를 사용해 객체를 초기화합니다." }), _jsx(_components.pre, { stack: "frontend", children: _jsxs(_components.code, { className: "language-html", lang: "html", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "meta"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "charset" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "utf-8", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "결제하기", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "https://js.tosspayments.com/v1/payment", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: ["\n ", _jsx(_components.span, { className: "token keyword", children: "var" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(ClientKey, {}), "'"] }), "\n ", _jsx(_components.span, { className: "token keyword", children: "var" }), " tossPayments ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "TossPayments" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "clientKey", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 클라이언트 키로 초기화하기" }), "\n "] }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) })] }), "\n", _jsxs(TechStackScope, { frontend: "npm", children: [_jsx(_components.p, { children: "npm 패키지를 사용해 SDK를 설치합니다. 해당 패키지는 웹 환경에서 사용하세요. React Native와 같은 모바일 환경에서는 사용할 수 없습니다." }), _jsx(_components.pre, { stack: "frontend", children: _jsx(_components.code, { className: "language-bash", lang: "bash", children: _jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token function", children: "npm" }), " ", _jsx(_components.span, { className: "token function", children: "install" }), " @tosspayments/payment-sdk --save\n"] }) }) }), _jsxs(_components.p, { children: ["설치된 SDK에서 ", _jsx(_components.code, { children: "loadTossPayments()" }), " 함수를 불러온 뒤 클라이언트 키를 사용해 초기화합니다."] }), _jsx(_components.pre, { stack: "frontend", children: _jsxs(_components.code, { className: "language-js", lang: "js", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " loadTossPayments ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "'@tosspayments/payment-sdk'" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(ClientKey, {}), "'"] }), "\n"] }), _jsx(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: "\n" }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token function", children: "loadTossPayments" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "clientKey", _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "then" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "tossPayments" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ..." }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) })] }), "\n", _jsx(Callout, { type: "info", children: _jsxs(_components.p, { children: ["더 자세한 SDK 설명은 ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk", title: true, children: "결제창 SDK" }), " 페이지에서 확인할 수 있습니다."] }) }), "\n", _jsxs(_components.h2, { id: "2-결제창을-띄워보세요-", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#2-결제창을-띄워보세요-", children: _jsx(CopyLinkIcon, { id: "2-결제창을-띄워보세요-" }) }), "2. 결제창을 띄워보세요 🚀", _jsx(FeedbackButton, { section: "2. 결제창을 띄워보세요 🚀" })] }), "\n", _jsxs(_components.p, { children: ["초기화된 객체로 SDK 메서드를 사용할 수 있습니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#requestpayment카드-결제-정보", title: true, children: _jsx(_components.code, { children: "requestPayment(결제수단, 결제 정보)" }) }), "메서드로 결제창을 호출합니다."] }), "\n", _jsxs(_components.p, { children: ["첫 번째 파라미터는 ", _jsx(_components.strong, { children: "결제수단" }), "입니다. 카드사 결제창 및 간편결제창은 결제수단으로 ", _jsx(_components.code, { children: "카드" }), "를 추가하세요."] }), "\n", _jsxs(_components.p, { children: ["두 번째 파라미터는 ", _jsx(_components.strong, { children: "결제 정보" }), "입니다. 결제 금액 등 필수 파라미터를 먼저 설정하고 ", _jsx(_components.code, { children: "flowMode" }), " 파라미터를 ", _jsx(_components.code, { children: "DIRECT" }), "로 고정하세요. 자체창으로 열 카드사를 ", _jsx(_components.code, { children: "cardCompany" }), "에 ", _jsx(LogNextLink, { passHref: true, href: "/reference/codes#카드사-코드", title: true, children: "카드사 코드" }), "로 설정하세요. 간편결제는 ", _jsx(_components.code, { children: "easyPay" }), "에 ", _jsx(LogNextLink, { passHref: true, href: "/reference/codes#간편결제사-코드", title: true, children: "간편결제사 코드" }), "로 설정하세요."] }), "\n", _jsx(_components.pre, { line: "9,10", children: _jsxs(_components.code, { className: "language-js", lang: "js", children: [_jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "tossPayments\n" }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "requestPayment" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "'카드'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 결제수단" }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 결제 정보" }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "amount" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderId" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(UniqueId, { name: "orderId.easypayDirect" }), "'"] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'토스 티셔츠 외 2건'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'박토스'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "successUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:8080/success'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "failUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'http://localhost:8080/fail'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "flowMode" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'DIRECT'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "easyPay" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "'토스페이'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "catch" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: "." }), "code ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'USER_CANCEL'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 결제 고객이 결제창을 닫았을 때 에러 처리" }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: "." }), "code ", _jsx(_components.span, { className: "token operator", children: "===" }), " ", _jsx(_components.span, { className: "token string", children: "'INVALID_CARD_COMPANY'" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 유효하지 않은 카드 코드에 대한 에러 처리" }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://static.tosspayments.com/docs/%E1%84%8F%E1%85%A1%E1%84%83%E1%85%B3%E1%84%89%E1%85%A1-%E1%84%80%E1%85%A1%E1%86%AB%E1%84%91%E1%85%A7%E1%86%AB%E1%84%80%E1%85%A7%E1%86%AF%E1%84%8C%E1%85%A6%E1%84%89%E1%85%A1.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/%E1%84%8F%E1%85%A1%E1%84%83%E1%85%B3%E1%84%89%E1%85%A1-%E1%84%80%E1%85%A1%E1%86%AB%E1%84%91%E1%85%A7%E1%86%AB%E1%84%80%E1%85%A7%E1%86%AF%E1%84%8C%E1%85%A6%E1%84%89%E1%85%A1.png", alt: "카드사 간편결제 결제창 예시 이미지" }) }) }), "\n", _jsxs(_components.p, { children: ["메서드 실행에 성공하면 위와 같이 선택한 카드사 또는 간편결제사 자체창이 열립니다. 결제를 완료하려면 ", _jsx(LogNextLink, { passHref: true, href: "#3-결제-승인을-요청하세요", title: true, children: "결제 승인을 요청하세요" }), "."] }), "\n", _jsxs(_components.p, { children: ["메서드 실행에 실패하면 reject 된 에러는 Promise의 catch 블록에서 처리할 수 있습니다. 발생할 수 있는 ", _jsx(LogNextLink, { passHref: true, href: "/reference/error-codes#메서드-실행에-실패했을-때-발생할-수-있는-에러", title: true, children: "에러 코드" }), "를 살펴보세요."] }), "\n", _jsxs(Callout, { type: "warning", children: [_jsx(_components.p, { children: "카드사 결제창 또는 간편결제창을 띄우기 전에 고객에게 아래 토스페이먼츠 이용약관 동의를 받으세요." }), _jsxs(_components.p, { children: ["- 전자금융거래 이용약관: ", _jsx(ExternalLink, { href: "https://pages.tosspayments.com/terms/user", children: "https://pages.tosspayments.com/terms/user" })] }), _jsxs(_components.p, { children: ["- 개인(신용)정보 수집이용 동의: ", _jsx(ExternalLink, { href: "https://pages.tosspayments.com/terms/privacy/consent1", children: "https://pages.tosspayments.com/terms/privacy/consent1" })] }), _jsxs(_components.p, { children: ["- 개인(신용)정보 제3자 제공 동의: ", _jsx(ExternalLink, { href: "https://pages.tosspayments.com/terms/privacy/consent2", children: "https://pages.tosspayments.com/terms/privacy/consent2" })] })] }), "\n", _jsxs(_components.h3, { id: "결제-정보-파라미터", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제-정보-파라미터", children: _jsx(CopyLinkIcon, { id: "결제-정보-파라미터" }) }), "결제 정보 파라미터", _jsx(FeedbackButton, { section: "결제 정보 파라미터" })] }), "\n", _jsxs(ParameterList, { children: [_jsx(ParameterItem, { name: "amount", required: true, type: "number", children: _jsx(_components.p, { children: "결제되는 금액입니다." }) }), _jsx(ParameterItem, { name: "orderId", required: true, type: "string", children: _jsxs(_components.p, { children: ["주문번호입니다. 주문을 구분하는 ID입니다. 충분히 무작위한 값을 생성해서 각 주문마다 고유한 값을 넣어주세요. 영문 대소문자, 숫자, 특수문자 ", _jsx(_components.code, { children: "-" }), ", ", _jsx(_components.code, { children: "_" }), ", ", _jsx(_components.code, { children: "=" }), "로 이루어진 6자 이상 64자 이하의 문자열이어야 합니다."] }) }), _jsx(ParameterItem, { name: "orderName", required: true, type: "string", children: _jsxs(_components.p, { children: ["구매상품입니다. 예를 들면 ", _jsx(_components.code, { children: "생수 외 1건" }), " 같은 형식입니다. 최대 길이는 100자입니다."] }) }), _jsx(ParameterItem, { name: "successUrl", required: true, type: "string", children: _jsxs(_components.p, { children: ["결제가 성공하면 ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#리다이렉트-url로-처리하기", title: true, children: "리다이렉트되는 URL" }), "입니다. 결제 승인 처리에 필요한 값들이 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", title: true, children: "쿼리 파라미터" }) }), "로 함께 전달됩니다. 반드시 오리진을 포함해야 합니다. 예를 들면 ", _jsx(_components.code, { children: "https://www.example.com/success" }), "와 같은 형태입니다."] }) }), _jsx(ParameterItem, { name: "failUrl", required: true, type: "string", children: _jsxs(_components.p, { children: ["결제가 실패하면 ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#리다이렉트-url로-처리하기", title: true, children: "리다이렉트되는 URL" }), "입니다. 에러 코드 및 에러 메시지가 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", title: true, children: "쿼리 파라미터" }) }), "로 함께 전송됩니다. 반드시 오리진을 포함해야 합니다."] }) }), _jsxs(ParameterItem, { name: "flowMode", type: "string", children: [_jsxs(_components.p, { children: ["결제창 유형입니다. ", _jsx(_components.code, { children: "DEFAULT" }), ", ", _jsx(_components.code, { children: "DIRECT" }), " 중 하나입니다."] }), _jsxs(_components.p, { children: ["카드사 결제창 또는 간편결제창을 연동하려면 값을 ", _jsx(_components.code, { children: "DIRECT" }), "로 지정하고 ", _jsx(_components.code, { children: "cardCompany" }), " 또는 ", _jsx(_components.code, { children: "easyPay" }), " 파라미터를 설정하세요."] })] }), _jsxs(ParameterItem, { name: "easyPay", type: "string", children: [_jsxs(_components.p, { children: ["연동하려는 간편결제 서비스 코드입니다. 예를 들어, ", _jsx(_components.code, { children: "토스페이" }), " 값을 주면 바로 토스페이 결제창이 실행됩니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/codes#간편결제사-코드", title: true, children: "간편결제사 코드" }), "를 참고하세요."] }), _jsx(_components.p, { children: "* 테스트 환경에서는 페이코의 결제 및 취소가 제대로 진행되지 않을 수 있습니다." })] }), _jsxs(ParameterItem, { name: "cardCompany", type: "string", children: [_jsxs(_components.p, { children: ["카드사 코드입니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/codes#카드사-코드", title: true, children: "카드사 코드" }), "를 참고하세요. 예를 들어, ", _jsx(_components.code, { children: "현대" }), " 값을 주면 현대카드 결제창이 실행됩니다."] }), _jsxs(_components.p, { children: ["* 카드사 결제창은 국내 카드사만 지원합니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/codes#해외", title: true, children: "해외 카드사 코드" }), "는 사용할 수 없습니다."] })] }), _jsxs(ParameterItem, { name: "useAppCardOnly", type: "boolean", children: [_jsxs(_components.p, { children: ["카드사 앱카드로만 결제할지 결정합니다. 이 값을 ", _jsx(_components.code, { children: "true" }), "로 주면 카드사 결제창에서 일반결제 등 다른 결제 방식을 선택할 수 있는 단계를 건너뛰고 바로 카드사의 앱카드 결제창이 열립니다."] }), _jsxs(_components.p, { children: ["국민, 농협, 롯데, 삼성, 신한, 우리, 현대 카드에만 ", _jsx(_components.code, { children: "true" }), " 값을 사용할 수 있습니다."] })] }), _jsx(ParameterItem, { name: "appScheme", type: "string", children: _jsxs(_components.p, { children: ["페이북/ISP 앱에서 상점 앱으로 돌아올 때 사용됩니다. 상점의 앱 스킴을 지정하면 됩니다. ", _jsx(_components.code, { children: "testapp://" }), "같은 형태입니다."] }) })] }), "\n", _jsx(Callout, { type: "info", children: _jsxs(_components.p, { children: ["카드사 결제창 및 간편결제창에서 사용할 수 있는 더 많은 파라미터는 ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#requestpayment카드-결제-정보", title: true, children: "결제창 Javascript SDK" }), "에서 확인하세요."] }) }), "\n", _jsxs(_components.h2, { id: "3-결제-승인을-요청하세요", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#3-결제-승인을-요청하세요", children: _jsx(CopyLinkIcon, { id: "3-결제-승인을-요청하세요" }) }), "3. 결제 승인을 요청하세요", _jsx(FeedbackButton, { section: "3. 결제 승인을 요청하세요" })] }), "\n", _jsxs(_components.p, { children: ["결제 요청이 성공하면 ", _jsx(_components.code, { children: "successUrl" }), "로 이동합니다. URL에 포함된 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", title: true, children: "쿼리 파라미터" }) }), "를 확인하고 결제 승인을 요청하세요."] }), "\n", _jsxs(_components.p, { children: ["결제 요청이 실패하면 ", _jsx(_components.code, { children: "failUrl" }), "로 이동합니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#리다이렉트-url로-처리하기", title: true, children: "결제 실패 URL 리다이렉트" }), "를 살펴보세요."] }), "\n", _jsxs(_components.h3, { id: "리다이렉트-url-확인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#리다이렉트-url-확인하기", children: _jsx(CopyLinkIcon, { id: "리다이렉트-url-확인하기" }) }), "리다이렉트 URL 확인하기", _jsx(FeedbackButton, { section: "리다이렉트 URL 확인하기" })] }), "\n", _jsxs(_components.p, { children: ["결제 성공 리다이렉트 URL에는 ", _jsx(_components.code, { children: "paymentKey" }), ", ", _jsx(_components.code, { children: "orderId" }), ", ", _jsx(_components.code, { children: "amount" }), " 세 가지 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", title: true, children: "쿼리 파라미터" }) }), "가 들어있습니다."] }), "\n", _jsx(_components.pre, { theme: "grey", copyable: "false", feedbackable: "false", children: _jsx(_components.code, { className: "language-plain", lang: "plain", children: _jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "https://{ORIGIN}/success?paymentKey={PAYMENT_KEY}&orderId={ORDER_ID}&amount={AMOUNT}\n" }) }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "paymentKey" }), ": 결제의 키 값입니다. 결제를 식별하는 역할로, 중복되지 않는 고유한 값입니다. 결제 데이터 관리를 위해 반드시 저장해야 합니다. 결제 상태가 변해도 값이 유지됩니다. 결제 승인에 사용됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "orderId" }), ": 주문번호입니다. 주문한 결제를 식별하는 역할로, 결제를 요청할 때 가맹점에서 만들어서 ", _jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#requestpayment카드-결제-정보", title: true, children: _jsx(_components.code, { children: "requestPayment()" }) }), "에 담아 보낸 값입니다. 결제 데이터 관리를 위해 반드시 저장해야 합니다. 중복되지 않는 고유한 값을 발급해야 합니다. 결제 상태가 변해도 값이 유지됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "amount" }), ": 실제로 결제된 금액입니다."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["리다이렉트 URL 쿼리 파라미터를 이용해 ", _jsx(LogNextLink, { passHref: true, href: "/reference#결제-승인", title: true, children: "결제 승인 API" }), "를 호출할 수 있습니다."] }), "\n", _jsxs(Callout, { type: "warning", children: [_jsxs(_components.p, { children: [_jsx(LogNextLink, { passHref: true, href: "/reference/js-sdk#requestpayment카드-결제-정보", title: true, children: _jsx(_components.code, { children: "requestPayment()" }) }), " 메서드에 담아 보낸 결제 금액과 ", _jsx(_components.code, { children: "successUrl" }), "로 돌아온 ", _jsx(_components.code, { children: "amount" }), " 값이 같은지 반드시 확인해보세요. 클라이언트에서 결제 금액을 조작해 승인하는 행위를 방지할 수 있습니다."] }), _jsx(_components.p, { children: "만약 값이 다르다면 결제를 취소하고 구매자에게 알려주세요. 적립금이나 쿠폰이 적용된 금액이 맞는지도 확인해보세요." })] }), "\n", _jsxs(_components.h3, { id: "결제-승인-api-호출하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제-승인-api-호출하기", children: _jsx(CopyLinkIcon, { id: "결제-승인-api-호출하기" }) }), "결제 승인 API 호출하기", _jsx(FeedbackButton, { section: "결제 승인 API 호출하기" })] }), "\n", _jsxs(_components.p, { children: [_jsx(LogNextLink, { passHref: true, href: "/reference#결제-승인", title: true, children: "결제 승인 API" }), "를 호출합니다. 요청 본문에는 리다이렉트 URL로 받은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-paymentkey", title: true, children: _jsx(_components.code, { children: "paymentKey" }) }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-orderid", title: true, children: _jsx(_components.code, { children: "orderId" }) }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-amount", title: true, children: _jsx(_components.code, { children: "amount" }) }), "를 넣습니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/using-api/authorization", title: true, children: "Basic 인증 헤더" }), "에는 ", _jsx(LogNextLink, { passHref: true, href: "/reference/using-api/api-keys#시크릿-키", title: true, children: "시크릿 키" }), "와 콜론을 base64로 인코딩해서 넣습니다."] }), "\n", _jsx(RequestSnippet, { method: "post", path: "/v1/payments/confirm", requestBody: { paymentKey: '{{_id/paymentKey.easypayDirect}}', amount: 15000, orderId: '{{_id/orderId.easypayDirect}}' } }), "\n", _jsx(Callout, { type: "important", children: _jsxs(_components.p, { children: [_jsx(_components.code, { children: "successUrl" }), "로 리다이렉트 된 후 10분 이내에 ", _jsx(LogNextLink, { passHref: true, href: "/reference#결제-승인", title: true, children: "결제 승인 API" }), "를 호출해야 합니다."] }) }), "\n", _jsxs(_components.h2, { id: "4-결제를-성공적으로-완료하셨네요-", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#4-결제를-성공적으로-완료하셨네요-", children: _jsx(CopyLinkIcon, { id: "4-결제를-성공적으로-완료하셨네요-" }) }), "4. 결제를 성공적으로 완료하셨네요! 🎉", _jsx(FeedbackButton, { section: "4. 결제를 성공적으로 완료하셨네요! 🎉" })] }), "\n", _jsxs(_components.p, { children: ["API 호출 결과로 HTTP ", _jsx(_components.code, { children: "200 OK" }), "를 받으면 결제 승인 성공입니다. 상태 코드와 함께 ", _jsx(LogNextLink, { passHref: true, href: "/reference#payment-객체", title: true, children: "Payment 객체" }), "가 응답으로 돌아옵니다. 응답 객체에 선택한 결제수단의 필드가 있는지 확인하세요."] }), "\n", _jsxs(_components.p, { children: ["간편결제 서비스를 사용하면 선택한 결제수단에 따라 돌아오는 응답 객체가 달라집니다. ", _jsxs(_components.strong, { children: [_jsx(LogNextLink, { passHref: true, href: "/guides/learn/easypay-response", title: true, children: "간편결제 응답 확인 가이드" }), "를 참고해서 간편결제 응답 객체 처리까지 진행해주세요."] })] }), "\n", _jsx(_components.pre, { line: "24-28,45", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.easypayDirect" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.easypayDirect" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.easypayDirect" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-08-17T15:38:47+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-08-17T15:39:14+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=cno3Idq53AKHoXP%2BJnAWt70lTLYJHVytjcCu%2FhEIUd56LAMEmBlJ9FWaQinp0uZ1&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.easypayDirect" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxExemptionAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"간편결제\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsx(Accordion, { children: _jsxs(AccordionItem, { title: "응답 객체에 원하는 필드가 없어요.", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: [_jsxs(_components.p, { children: ["응답 객체의 필드는 API 버전에 따라 조금씩 달라집니다. ", _jsx(ExternalLink, { href: "https://developers.tosspayments.com/my/api-keys", children: "개발자센터" }), "에 설정된 API 버전을 확인하고, 원하는 필드가 있는 버전으로 변경해보세요."] }), _jsxs(_components.p, { children: ["API 버전 업데이트 사항은 ", _jsx(LogNextLink, { passHref: true, href: "/resources/release-note", title: true, children: "릴리즈 노트" }), "에서 확인할 수 있습니다."] })] }) }), "\n", _jsxs(_components.h2, { id: "5-간편결제-응답-확인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#5-간편결제-응답-확인하기", children: _jsx(CopyLinkIcon, { id: "5-간편결제-응답-확인하기" }) }), "5. 간편결제 응답 확인하기", _jsx(FeedbackButton, { section: "5. 간편결제 응답 확인하기" })] }), "\n", _jsxs(_components.p, { children: [_jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/easypay", title: true, children: "간편결제" }) }), "에서 결제수단을 조합해서 사용하면 ", _jsx(LogNextLink, { passHref: true, href: "/reference#payment-객체", title: true, children: "결제 응답 객체" }), "가 조금씩 달라집니다. 아래 토스페이 사용 예시를 확인해보세요."] }), "\n", _jsxs(_components.h3, { id: "간편결제-결제수단-타입", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#간편결제-결제수단-타입", children: _jsx(CopyLinkIcon, { id: "간편결제-결제수단-타입" }) }), "간편결제 결제수단 타입", _jsx(FeedbackButton, { section: "간편결제 결제수단 타입" })] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "결제수단" }), _jsx(_components.th, { children: "설명" }), _jsx(_components.th, { children: "응답 객체 금액 필드" }), _jsx(_components.th, { children: "예시" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "신용·체크 카드" }), _jsx(_components.td, { children: "고객이 간편결제 서비스에 등록한 카드" }), _jsx(_components.td, { children: _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-cardamount", title: true, children: _jsx(_components.code, { children: "card.amount" }) }) }), _jsx(_components.td, { children: "토스페이에 등록된 카드" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "충전식 결제수단" }), _jsxs(_components.td, { children: ["고객이 금액을 충전해서 사용하는 결제수단으로 간편결제 서비스에 등록한 ", _jsx(_components.strong, { children: "계좌 혹은 현금성 포인트" })] }), _jsx(_components.td, { children: _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypayamount", title: true, children: _jsx(_components.code, { children: "easyPay.amount" }) }) }), _jsx(_components.td, { children: "토스페이에 연결된 계좌, 카카오페이머니" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "적립식 결제수단*" }), _jsxs(_components.td, { children: ["고객이 간편결제사에서 제공하는 결제 서비스를 이용해서 ", _jsx(_components.strong, { children: "적립된 포인트, 쿠폰, 즉시할인" }), " 금액으로 카드나 충전식 결제수단과 조합해서 사용"] }), _jsx(_components.td, { children: _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypaydiscountamount", title: true, children: _jsx(_components.code, { children: "easyPay.discountAmount" }) }) }), _jsx(_components.td, { children: "토스포인트, 카카오페이포인트" })] })] })] }), "\n", _jsx(_components.p, { children: "* 적립식 결제수단은 카드 혹은 충전식 결제수단과 조합해서 사용할 수 있습니다." }), "\n", _jsxs(_components.h3, { id: "case-1-간편결제에-등록된-카드로-결제하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#case-1-간편결제에-등록된-카드로-결제하기", children: _jsx(CopyLinkIcon, { id: "case-1-간편결제에-등록된-카드로-결제하기" }) }), "Case 1. 간편결제에 등록된 카드로 결제하기", _jsx(FeedbackButton, { section: "Case 1. 간편결제에 등록된 카드로 결제하기" })] }), "\n", _jsxs(_components.p, { children: ["토스페이에 등록된 카드로 15,000원을 결제하면 전체 결제 금액 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-totalamount", title: true, children: _jsx(_components.code, { children: "totalAmount" }) }), "는 카드로 결제한 금액인 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-cardamount", title: true, children: _jsx(_components.code, { children: "card.amount" }) }), "와 동일합니다."] }), "\n", _jsx(_components.pre, { line: "22", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.easyPayCard" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.easyPayCard" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.easyPayCard" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"issuerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"61\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquirerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"31\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"number\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"123456******7890\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"installmentPlanMonths\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isInterestFree\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"interestPayer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approveNo\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"21974757\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useCardPoint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cardType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"신용\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"ownerType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"개인\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquireStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"READY\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "case-2-간편결제에-등록된-카드--적립식-결제수단으로-결제하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#case-2-간편결제에-등록된-카드--적립식-결제수단으로-결제하기", children: _jsx(CopyLinkIcon, { id: "case-2-간편결제에-등록된-카드--적립식-결제수단으로-결제하기" }) }), "Case 2. 간편결제에 등록된 카드 + 적립식 결제수단으로 결제하기", _jsx(FeedbackButton, { section: "Case 2. 간편결제에 등록된 카드 + 적립식 결제수단으로 결제하기" })] }), "\n", _jsx(_components.p, { children: "토스페이에 등록된 카드로 10,000원을 결제하고 토스포인트에서 5,000원을 사용해 총 15,000원을 결제합니다." }), "\n", _jsxs(_components.p, { children: ["전체 결제 금액 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-totalamount", title: true, children: _jsx(_components.code, { children: "totalAmount" }) }), "은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-cardamount", title: true, children: _jsx(_components.code, { children: "card.amount" }) }), "와 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypaydiscountamount", title: true, children: _jsx(_components.code, { children: "easyPay.discountAmount" }) }), "의 합계입니다."] }), "\n", _jsx(_components.pre, { line: "22,27", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayCardPoint.paymentKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayCardPoint.lastTransactionKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "payment.orderId" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"issuerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"61\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquirerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"31\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"number\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"123456******7890\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"installmentPlanMonths\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isInterestFree\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"interestPayer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approveNo\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"21706400\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useCardPoint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cardType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"체크\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"ownerType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"개인\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquireStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"READY\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10000" }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "case-3-충전식-결제수단으로-결제하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#case-3-충전식-결제수단으로-결제하기", children: _jsx(CopyLinkIcon, { id: "case-3-충전식-결제수단으로-결제하기" }) }), "Case 3. 충전식 결제수단으로 결제하기", _jsx(FeedbackButton, { section: "Case 3. 충전식 결제수단으로 결제하기" })] }), "\n", _jsxs(_components.p, { children: ["토스페이에 연결된 계좌로 결제하면 전체 결제 금액 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-totalamount", title: true, children: _jsx(_components.code, { children: "totalAmount" }) }), "는 계좌로 결제한 금액인 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypayamount", title: true, children: _jsx(_components.code, { children: "easyPay.amount" }) }), "와 동일합니다. 즉 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypay", title: true, children: _jsx(_components.code, { children: "easyPay" }) }), " 객체만 확인하면 됩니다."] }), "\n", _jsx(_components.pre, { line: "13", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBank.paymentKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBank.lastTransactionKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "payment.orderId" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "case-4-충전식-결제수단--적립식-결제수단으로-결제하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#case-4-충전식-결제수단--적립식-결제수단으로-결제하기", children: _jsx(CopyLinkIcon, { id: "case-4-충전식-결제수단--적립식-결제수단으로-결제하기" }) }), "Case 4. 충전식 결제수단 + 적립식 결제수단으로 결제하기", _jsx(FeedbackButton, { section: "Case 4. 충전식 결제수단 + 적립식 결제수단으로 결제하기" })] }), "\n", _jsx(_components.p, { children: "토스페이에 연결된 계좌로 15,000원을 결제하고 토스포인트에서 5,000원을 사용해 총 15,000원을 결제합니다." }), "\n", _jsxs(_components.p, { children: ["전체 결제 금액 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-totalamount", title: true, children: _jsx(_components.code, { children: "totalAmount" }) }), "는 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypayamount", title: true, children: _jsx(_components.code, { children: "easyPay.amount" }) }), "와 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypaydiscountamount", title: true, children: _jsx(_components.code, { children: "easyPay.discountAmount" }) }), "의 합계입니다."] }), "\n", _jsx(_components.pre, { line: "13-14", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBankPoint.paymentKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBankPoint.lastTransactionKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "payment.orderId" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "10000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "case-5-적립식-결제수단으로-결제하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#case-5-적립식-결제수단으로-결제하기", children: _jsx(CopyLinkIcon, { id: "case-5-적립식-결제수단으로-결제하기" }) }), "Case 5. 적립식 결제수단으로 결제하기", _jsx(FeedbackButton, { section: "Case 5. 적립식 결제수단으로 결제하기" })] }), "\n", _jsxs(_components.p, { children: ["토스포인트로 15,000원을 결제하면 전체 결제 금액 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-totalamount", title: true, children: _jsx(_components.code, { children: "totalAmount" }) }), "는 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypaydiscountamount", title: true, children: _jsx(_components.code, { children: "easyPay.discountAmount" }) }), "와 동일합니다. 즉 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-easypay", title: true, children: _jsx(_components.code, { children: "easyPay" }) }), " 객체만 확인하면 됩니다."] }), "\n", _jsx(_components.pre, { line: "14", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBankPoint.paymentKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "easyPayBankPoint.lastTransactionKey" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "payment.orderId" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "//..." }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }