"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {AIChatButton, Accordion, AccordionItem, Callout, CopyLinkIcon, ExternalLink, GlossaryPopover, Grid, GridCol, IconCard, LogNextLink, RequestSnippet, TechStackProvider, TechStackScope, UniqueId, WidgetClientKey, WidgetSecretKey} = _components; if (!AIChatButton) _missingMdxReference("AIChatButton", true); if (!Accordion) _missingMdxReference("Accordion", true); if (!AccordionItem) _missingMdxReference("AccordionItem", true); if (!AccordionItem.Icon) _missingMdxReference("AccordionItem.Icon", true); if (!Callout) _missingMdxReference("Callout", true); if (!CopyLinkIcon) _missingMdxReference("CopyLinkIcon", true); if (!ExternalLink) _missingMdxReference("ExternalLink", 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 (!RequestSnippet) _missingMdxReference("RequestSnippet", true); if (!TechStackProvider) _missingMdxReference("TechStackProvider", true); if (!TechStackScope) _missingMdxReference("TechStackScope", true); if (!UniqueId) _missingMdxReference("UniqueId", true); if (!WidgetClientKey) _missingMdxReference("WidgetClientKey", true); if (!WidgetSecretKey) _missingMdxReference("WidgetSecretKey", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "결제-연동하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제-연동하기", children: _jsx(CopyLinkIcon, { id: "결제-연동하기" }) }), "결제 연동하기"] }), "\n", _jsx(Callout, { type: "warning", children: _jsxs(_components.p, { children: ["결제위젯 SDK v1은 더 이상 업데이트되지 않습니다. ", _jsx(LogNextLink, { passHref: true, href: "/guides/v2/payment-widget/integration", children: "토스페이먼츠 SDK v2" }), " 연동을 추천합니다."] }) }), "\n", _jsxs(_components.p, { children: ["✅ 신용・체크 카드, 가상계좌, 계좌이체, 휴대폰, 상품권 결제를 웹 페이지에 한 번에 연동할 수 있어요. 계좌이체 결제는 간편한 ", _jsx(LogNextLink, { passHref: true, href: "/guides/payment-widget/integration-quick", children: "퀵계좌결제" }), "를 활성화해서 사용해 보세요."] }), "\n", _jsx(_components.p, { children: "✅ 결제위젯 SDK를 사용해서 내 상점의 주문서 페이지에 최적의 주문서 UI를 만들 수 있어요." }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://static.tosspayments.com/docs/payment-widget/integration/%E1%84%80%E1%85%A7%E1%86%AF%E1%84%8C%E1%85%A6%E1%84%8B%E1%85%B1%E1%84%8C%E1%85%A6%E1%86%BA_%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/payment-widget/integration/%E1%84%80%E1%85%A7%E1%86%AF%E1%84%8C%E1%85%A6%E1%84%8B%E1%85%B1%E1%84%8C%E1%85%A6%E1%86%BA_%E1%84%85%E1%85%A6%E1%86%AB%E1%84%83%E1%85%A5%E1%84%85%E1%85%B5%E1%86%BC.png", alt: "결제위젯 렌더링" }) }) }), "\n", _jsxs(Grid, { gap: 16, children: [_jsx(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: _jsx(IconCard, { height: 140, icon: "icon-it", title: "코딩 없이 시작하기", description: "브라우저에서 테스트 연동 시작하기", href: "https://developers.tosspayments.com/sandbox" }) }), _jsx(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: _jsx(IconCard, { height: 140, icon: "icon-github-mono", title: "샘플 프로젝트", description: "다양한 언어의 샘플 프로젝트 확인하기", href: "https://github.com/tosspayments/tosspayments-sample-v1/tree/main/payment-widget/" }) }), _jsx(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: _jsx(IconCard, { height: 140, icon: "icon-check-setting", title: "어드민 체험하기", description: "결제위젯 커스터마이징하기", href: "https://consumer.tosspayments.com/ex/payment-widget" }) })] }), "\n", _jsxs(_components.h2, { id: "결제위젯-연동-키-준비하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제위젯-연동-키-준비하기", children: _jsx(CopyLinkIcon, { id: "결제위젯-연동-키-준비하기" }) }), "결제위젯 연동 키 준비하기", _jsx(AIChatButton, { section: "결제위젯 연동 키 준비하기" })] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "결제위젯 연동 테스트 키" }), "를 준비하세요. 토스페이먼츠 계약, 회원가입 없이 아래 테스트 키로 바로 시작할 수 있어요."] }), "\n", _jsxs(_components.p, { children: ["결제 UI 커스터마이징 기능은 ", _jsx(ExternalLink, { href: "https://consumer.tosspayments.com/ex/payment-widget", children: "어드민 체험하기" }), "에서 살펴보세요. 계약 이후에는 ", _jsx(LogNextLink, { passHref: true, href: "/guides/payment-widget/admin", children: "결제위젯 어드민" }), "에서 직접 결제 UI를 바꿀 수 있어요."] }), "\n", _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 토스페이먼츠 회원가입하기 전이라면, 아래 문서용 테스트 키를 사용하세요. 문서용 테스트 키는 _docs_가 포함되어 있어요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 토스페이먼츠에 회원가입했다면, 개발자센터에서 내 테스트 상점 키를 확인하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 로그인한 상태라면, 문서에 있는 클라이언트 키, 시크릿 키가 내 테스트 키로 바뀌어요." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " clientKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(WidgetClientKey, {}) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " secretKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(WidgetSecretKey, {}) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }), "\n", _jsxs(Callout, { type: "info", children: [_jsxs(_components.p, { children: ["토스페이먼츠와 계약을 완료했다면 ", _jsx(_components.strong, { children: "상점 테스트 키" }), "로 결제위젯을 연동하고 상점관리자에서 커스터마이징을 해보세요. 상점 테스트 키는 '", _jsx(ExternalLink, { href: "https://app.tosspayments.com/", children: "상점관리자" }), " > 매출 · 정산 관리 > 내 상점 이름 > 개발 정보'에서 확인하세요."] }), _jsxs(_components.p, { children: ["계약 문의는 토스페이먼츠 고객센터(1544-7772, ", _jsx(LogNextLink, { passHref: true, href: "mailto:support@tosspayments.com", children: "support@tosspayments.com" }), ")로 해주세요."] })] }), "\n", _jsxs(_components.h2, { id: "1-결제위젯-그리기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#1-결제위젯-그리기", children: _jsx(CopyLinkIcon, { id: "1-결제위젯-그리기" }) }), "1. 결제위젯 그리기", _jsx(AIChatButton, { section: "1. 결제위젯 그리기" })] }), "\n", _jsx(_components.p, { children: "아래 예제 코드는 주문서 페이지에 결제위젯, 이용약관 UI를 그립니다. 결제하기 버튼을 눌러서 결제창을 띄워보세요." }), "\n", _jsxs(_components.p, { children: ["이 예제에서는 신용카드로 결제해 볼게요. ", _jsx(_components.strong, { children: "실제로 결제되지 않으니 안심하세요." })] }), "\n", _jsxs(TechStackProvider, { frontendStacks: ["HTML", "React", "Next.js"], children: [_jsx(TechStackScope, { frontend: "HTML", children: _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", stack: "frontend", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "head" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "meta" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " charset" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "utf-8" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "script" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " src" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://js.tosspayments.com/v1/payment-widget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "body" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "payment-method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "input" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "checkbox" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "coupon-box" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "label" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " for" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "coupon-box" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " 5,000원 쿠폰 적용 " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "button" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "payment-button" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "결제하기" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "script" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " clientKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(WidgetClientKey, {}) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 내 상점에서 구매자를 구분하기 위해 발급한 고유 ID" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " coupon " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " document" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "coupon-box" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " button " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " document" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "payment-button" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제위젯 초기화 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " PaymentWidget" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(clientKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey) " }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 회원 결제" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 비회원 결제" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderpaymentmethods선택자-결제-금액-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodWidget " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#payment-method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " value" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 50000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 렌더링하고 싶은 결제 UI의 variantKey" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/guides/payment-widget/admin#새로운-결제-ui-추가하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DEFAULT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 이용약관 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderagreement선택자-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderAgreement" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "AGREEMENT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 기본 이용약관 UI 렌더링" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 금액 업데이트 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 새로운 결제 금액을 넣어주세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#updateamount결제-금액" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " coupon" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "addEventListener" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "change" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#00A661" }, children: " function" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "coupon" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "checked" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "updateAmount" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "amount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " -" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 5000" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " else" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "updateAmount" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "amount" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#requestpayment결제-정보" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " button" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "addEventListener" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "click" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#00A661" }, children: " function" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "requestPayment" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " successUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " +" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/success" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " failUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " +" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/fail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerEmail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "customer123@gmail.com" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "김토스" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerMobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "01012341234" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }) }), _jsxs(TechStackScope, { frontend: "React", children: [_jsxs(_components.p, { children: [_jsx(ExternalLink, { href: "https://www.npmjs.com/package/@tosspayments/payment-widget-sdk", children: "npm 패키지" }), "를 사용해 결제위젯 SDK를 설치합니다. 해당 패키지는 웹 환경에서 사용하세요. React Native와 같은 모바일 환경에서는 사용할 수 없습니다.\n설치된 SDK에서 결제위젯 메서드를 호출하세요."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", stack: "frontend", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: "npm" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: " install" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: " @tosspayments/payment-widget-sdk" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "Checkout.tsx", stack: "frontend", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useState" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "react" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " loadPaymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " ANONYMOUS" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "@tosspayments/payment-widget-sdk" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " clientKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(WidgetClientKey, {}) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " function" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " CheckoutPage" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " |" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " null" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "ReturnType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "[" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "]" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " >" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " |" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null>" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " [" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " setPrice" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "]" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " useState" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: "50000" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "async" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제위젯 초기화 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " loadPaymentWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "clientKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 회원 결제" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderpaymentmethods선택자-결제-금액-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#payment-widget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " value" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 렌더링하고 싶은 결제 UI의 variantKey" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/guides/payment-widget/admin#새로운-결제-ui-추가하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DEFAULT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 이용약관 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderagreement선택자-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderAgreement" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "AGREEMENT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 기본 이용약관 UI 렌더링" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " )" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ")() " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }), _jsx(_components.span, { style: { color: "#F07178" }, children: " []) " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ==" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 금액 업데이트 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 새로운 결제 금액을 넣어주세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#updateamount결제-금액" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "updateAmount" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }), _jsx(_components.span, { style: { color: "#F07178" }, children: " [" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "]) " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "h1" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "주문서" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "span" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">{" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "toLocaleString" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "원" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "label" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "input" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "checkbox" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " onChange" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={(" }), _jsx(_components.span, { style: { color: "#EEFFFF", fontStyle: "italic" }, children: "event" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ")" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " setPrice" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "event" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "target" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "checked" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ?" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " -" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 5000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " :" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " +" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 5000" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " 5,000원 할인 쿠폰 적용" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "payment-widget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "async" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " try" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#requestpayment결제-정보" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "?." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "requestPayment" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "김토스" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerEmail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "customer123@gmail.com" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerMobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "01012341234" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " successUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " `${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/success" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " failUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " `${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/fail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 에러 처리하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " console" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " >" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " 결제하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsxs(TechStackScope, { frontend: "Next.js", children: [_jsxs(_components.p, { children: [_jsx(ExternalLink, { href: "https://www.npmjs.com/package/@tosspayments/payment-widget-sdk", children: "npm 패키지" }), "를 사용해 결제위젯 SDK를 설치합니다. 해당 패키지는 웹 환경에서 사용하세요. React Native와 같은 모바일 환경에서는 사용할 수 없습니다.\n설치된 SDK에서 결제위젯 메서드를 호출하세요."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", stack: "frontend", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: "npm" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: " install" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: " @tosspayments/payment-widget-sdk" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "Checkout.tsx", stack: "frontend", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useState" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "react" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " loadPaymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " ANONYMOUS" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "@tosspayments/payment-widget-sdk" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "import" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useAsync" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " from" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "react-use" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " clientKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(WidgetClientKey, {}) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: "export" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " default" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " function" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " Home" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " |" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " null" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " useRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "ReturnType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "<" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " PaymentWidgetInstance" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "[" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "]" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " >" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " |" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null>" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " [" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " setPrice" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "]" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " useState" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: "50000" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " useAsync" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "async" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제위젯 초기화 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " loadPaymentWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "clientKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " customerKey" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 회원 결제" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 결제 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderpaymentmethods선택자-결제-금액-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#payment-widget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " value" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 렌더링하고 싶은 결제 UI의 variantKey" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/guides/payment-widget/admin#새로운-결제-ui-추가하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DEFAULT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 이용약관 UI 렌더링 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#renderagreement선택자-옵션" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderAgreement" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "#agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " variantKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "AGREEMENT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 기본 이용약관 UI 렌더링" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " )" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }), _jsx(_components.span, { style: { color: "#F07178" }, children: " []) " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " if" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ==" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ 금액 업데이트 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 새로운 결제 금액을 넣어주세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#updateamount결제-금액" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "updateAmount" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }), _jsx(_components.span, { style: { color: "#F07178" }, children: " [" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "]) " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " return" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "main" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " style" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " display" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "flex" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " flexDirection" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "column" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " alignItems" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "center" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " >" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "h1" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "주문서" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "span" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">{" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "toLocaleString" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "()" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "원" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "label" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "input" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "checkbox" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " onChange" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={(" }), _jsx(_components.span, { style: { color: "#EEFFFF", fontStyle: "italic" }, children: "event" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ")" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " setPrice" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "event" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "target" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "checked" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ?" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " -" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 5000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " :" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " price" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " +" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 5000" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " />" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " 5,000원 할인 쿠폰 적용" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "payment-widget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " style" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={{" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " width" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "100%" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }} />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "div" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " id" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "agreement" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#C792EA" }, children: " style" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={{" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " width" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "100%" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }} />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " <" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#C792EA" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "={" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "async" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " ()" }), _jsx(_components.span, { style: { color: "#00A661" }, children: " =>" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: " const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " =" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidgetRef" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "current" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " try" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // https://docs.tosspayments.com/sdk/widget-js#requestpayment결제-정보" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " await" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "?." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "requestPayment" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "김토스" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerEmail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "customer123@gmail.com" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " customerMobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "01012341234" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " successUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " `${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/success" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: " failUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " `${" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "window" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "location" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "origin" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "/fail" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "`" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }), _jsx(_components.span, { style: { color: "#89DDFF", fontStyle: "italic" }, children: " catch" }), _jsx(_components.span, { style: { color: "#F07178" }, children: " (" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: " // 에러 처리하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: " console" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: "(" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "error" }), _jsx(_components.span, { style: { color: "#F07178" }, children: ") " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " >" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " 결제하기" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#F07178" }, children: " ) " }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] })] }), "\n", _jsxs(_components.h3, { id: "트러블슈팅", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#트러블슈팅", children: _jsx(CopyLinkIcon, { id: "트러블슈팅" }) }), "트러블슈팅", _jsx(AIChatButton, { section: "트러블슈팅" })] }), "\n", _jsxs(Accordion, { children: [_jsx(AccordionItem, { title: "계속 로딩 중인 화면에서 변화가 없어요.", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: ["아직 결제 요청 중이에요. 이어서 ", _jsx(_components.code, { children: "successUrl" }), ", ", _jsx(_components.code, { children: "failUrl" }), "에 설정한 페이지에서 ", _jsx(LogNextLink, { passHref: true, href: "#2-결제-요청-결과-확인하기", children: "요청 결과를 확인" }), "한 뒤, ", _jsx(LogNextLink, { passHref: true, href: "#3-결제-승인하기", children: "결제 승인 API 호출" }), "까지 해야 결제가 완료돼요. iframe을 사용하고 있다면 요청 결과 페이지(", _jsx(_components.code, { children: "successUrl" }), ", ", _jsx(_components.code, { children: "failUrl" }), ")로 이동할 수가 없어요."] }) }), _jsxs(AccordionItem, { title: "결제위젯에 보이는 결제 금액을 바꾸는 기능을 구현하고 싶어요.", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: [_jsxs(_components.p, { children: ["결제 금액이 바뀐다면 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#updateamount결제-금액", children: _jsx(_components.code, { children: "updateAmount()" }) }), "를 사용해서 결제위젯을 업데이트하세요."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#00A661" }, children: "const" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentMethodsWidget " }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "=" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: " paymentWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "renderPaymentMethods" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "()" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#546E7A", fontStyle: "italic" }, children: "// 새로운 결제 금액을 넣어주세요." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#EEFFFF" }, children: "paymentMethodsWidget" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "." }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "updateAmount" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: "(" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: "5000" }), _jsx(_components.span, { style: { color: "#EEFFFF" }, children: ") " })] }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsx(AccordionItem, { title: "customerKey는 뭔가요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: [_jsx(_components.code, { children: "customerKey" }), "는 내 상점의 회원 구매자를 구분하기 위해 발급한 고유 ID입니다. 다른 사용자가 이 값을 알게 되면 악의적으로 사용할 수 있어 자동 증가하는 숫자는 안전하지 않습니다. ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/uuid", children: "UUID" }) }), "와 같이 충분히 무작위적인 고유 값으로 생성해주세요. 또, 구매자에게 할당된 ", _jsx(_components.code, { children: "customerKey는" }), " 변경 없이 항상 같은 값을 사용해주세요."] }) }), _jsx(AccordionItem, { title: "UNAUTHORIZED_KEY 에러는 왜 발생하나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsx(_components.p, { children: "토스페이먼츠에서 발급하지 않은 클라이언트 키 혹은 시크릿 키를 사용했을 때 발생합니다. 개발자센터에 들어가서 키값을 다시 확인하고 시크릿 키 인증을 올바르게 했는지 확인해주세요." }) }), _jsx(AccordionItem, { title: "NOT_REGISTERED_PAYMENT_WIDGET 에러는 왜 발생하나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsx(_components.p, { children: "결제위젯을 생성하지 않은 클라이언트 키로 연동을 시도하면 발생합니다. 상점관리자에서 결제위젯 UI를 추가하세요." }) })] }), "\n", _jsxs(_components.h2, { id: "2-테스트-결제-후-페이지-이동-확인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#2-테스트-결제-후-페이지-이동-확인하기", children: _jsx(CopyLinkIcon, { id: "2-테스트-결제-후-페이지-이동-확인하기" }) }), "2. 테스트 결제 후 페이지 이동 확인하기", _jsx(AIChatButton, { section: "2. 테스트 결제 후 페이지 이동 확인하기" })] }), "\n", _jsxs(_components.p, { children: ["결제창을 띄워 테스트 결제를 하면, 페이지가 이동해요. 이동한 페이지에서 결제 요청 결과를 확인할 수 있어요.\n", _jsx(_components.a, { href: "https://static.tosspayments.com/docs/blog/redirect-flow.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/blog/redirect-flow.png", alt: "리다이렉트 흐름을 설명하는 이미지" }) })] }), "\n", _jsx(Accordion, { children: _jsx(AccordionItem, { title: "왜 페이지 이동을 하나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://static.tosspayments.com/docs/learn/payment-flow.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/learn/payment-flow.png", alt: "결제 요청 과정 이미지" }) }), "\n이렇게 인증과 승인 사이에 리다이렉트(페이지 이동) 과정이 있습니다.\n", _jsxs(_components.strong, { children: ["두 단계로 나누어져 있는 결제 요청 과정에서 첫 번째 단계인 인증 결과를 받아 다음 단계로 넘어가기 위해 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#리다이렉트-url로-처리하기", children: "리다이렉트 URL 확인과 처리" }), "가 필요합니다."] }), " 토스페이먼츠에서 인증 결과를 URL의 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", children: "쿼리 파라미터" }) }), "에 담아 리다이렉트하면, 상점에서는 리다이렉트 URL을 받아 결제 승인을 처리할 수 있게 됩니다.\n인증에 성공했다면 성공 리다이렉트 URL(", _jsx(_components.code, { children: "successUrl" }), ")에 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", children: "쿼리 파라미터" }) }), "로 담긴 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#성공-응답", children: "결제 정보" }), "를 이용해 승인 API를 호출합니다. 인증에 실패했다면 이동한 실패 리다이렉트 URL(", _jsx(_components.code, { children: "failUrl" }), ")에 쿼리 파라미터로 담긴 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#실패-응답", children: "에러 정보" }), "를 보며 디버깅합니다.\n더 자세한 내용은 ", _jsx(LogNextLink, { passHref: true, href: "/guides/learn/redirect", children: "리다이렉트 처리하기" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/guides/learn/payment-flow", children: "결제 흐름 이해하기" }), "에서 확인해보세요."] }) }) }), "\n", _jsxs(_components.p, { children: ["결과로 돌아온 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", children: "쿼리 파라미터" }) }), "로 다음 단계인 결제 승인을 요청합니다.\n테스트 결제 요청이 성공하면 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#requestpayment결제-정보", children: _jsx(_components.code, { children: "requestPayment()" }) }), "의 파라미터로 설정했던 (", _jsx(_components.code, { children: "successUrl" }), ")을 통해 결제 성공 페이지로 이동해요. 성공 리다이렉트 URL을 나타내는 ", _jsx(_components.code, { children: "success" }), " 뒤에 네 가지 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", children: "쿼리 파라미터" }) }), "가 들어있습니다."] }), "\n", _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "https://{ORIGIN}/success?paymentType={PAYMENT_TYPE}&orderId={ORDER_ID}&paymentKey={PAYMENT_KEY}&amount={AMOUNT}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "paymentType" }), ": 결제 유형입니다. ", _jsx(_components.code, { children: "NORMAL" }), ", ", _jsx(_components.code, { children: "BRANDPAY" }), ", ", _jsx(_components.code, { children: "KEYIN" }), " 중 하나입니다. 브랜드페이, 키인 결제를 사용할 때만 확인하면 되는 파라미터입니다. 지금과 같은 경우에는 항상 ", _jsx(_components.code, { children: "NORMAL" }), "이 돌아옵니다.", "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "NORMAL" }), ": 일반 결제입니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "BRANDPAY" }), ": ", _jsx(LogNextLink, { passHref: true, href: "/guides/payment-widget/integration-brandpay", children: "브랜드페이 결제" }), "입니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "KEYIN" }), ": 키인 결제입니다."] }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "orderId" }), ": 주문번호입니다. 결제 요청에서 내 상점이 직접 생성한 영문 대소문자, 숫자, 특수문자 ", _jsx(_components.code, { children: "-" }), ", ", _jsx(_components.code, { children: "_" }), "로 이루어진 6자 이상 64자 이하의 문자열입니다. 각 주문을 식별하는 역할로, 결제 데이터 관리를 위해 반드시 저장해야 합니다. 결제 상태가 변해도 ", _jsx(_components.code, { children: "orderId" }), "는 유지됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "paymentKey" }), ": 결제의 키값입니다. 결제를 식별하는 역할로, 중복되지 않는 고유한 값입니다. 결제 데이터 관리를 위해 반드시 저장해야 합니다. 결제 상태가 변해도 값이 유지됩니다. 결제 승인에 사용됩니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "amount" }), ": 결제할 금액입니다."] }), "\n"] }), "\n", _jsx(Callout, { type: "warning", children: _jsxs(_components.p, { children: [_jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#renderpaymentmethods선택자-결제-금액-옵션", children: _jsx(_components.code, { children: "renderPaymentMethods()" }) }), " 메서드에 담아 보낸 결제 금액과 ", _jsx(_components.code, { children: "successUrl" }), "로 돌아온 ", _jsx(_components.code, { children: "amount" }), " 값이 같은지 반드시 확인해보세요. 클라이언트에서 결제 금액을 조작해 승인하는 행위를 방지할 수 있습니다.\n만약 값이 다르다면 결제를 취소하고 구매자에게 알려주세요. 적립금이나 쿠폰이 적용된 금액이 맞는지도 확인해보세요."] }) }), "\n", _jsxs(_components.h3, { id: "결제-요청이-실패했을-때", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제-요청이-실패했을-때", children: _jsx(CopyLinkIcon, { id: "결제-요청이-실패했을-때" }) }), "결제 요청이 실패했을 때", _jsx(AIChatButton, { section: "결제 요청이 실패했을 때" })] }), "\n", _jsxs(_components.p, { children: ["결제 요청이 실패하면 설정했던 결제 실패 페이지(", _jsx(_components.code, { children: "failUrl" }), ")로 이동합니다. ", _jsx(LogNextLink, { passHref: true, href: "/sdk/v2/error-codes", children: "에러 목록" }), "을 확인하세요."] }), "\n", _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "https://{ORIGIN}/fail?code={ERROR_CODE}&message={ERROR_MESSAGE}&orderId={ORDER_ID}" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }), "\n", _jsxs(_components.h2, { id: "3-결제-승인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#3-결제-승인하기", children: _jsx(CopyLinkIcon, { id: "3-결제-승인하기" }) }), "3. 결제 승인하기", _jsx(AIChatButton, { section: "3. 결제 승인하기" })] }), "\n", _jsxs(_components.p, { children: [_jsx(LogNextLink, { passHref: true, href: "/reference#결제-승인", children: "결제 승인 API" }), "를 호출해서 마지막 단계를 완료합니다.\n먼저 ", _jsx(LogNextLink, { passHref: true, href: "/reference/using-api/authorization", children: "API 인증" }), "을 위해 아래와 같이 인증 헤더 값을 만듭니다.\n시크릿 키 뒤에 ", _jsx(_components.code, { children: ":" }), "을 추가하고 base64로 인코딩합니다. ", _jsxs(_components.strong, { children: [_jsx(_components.code, { children: ":" }), "을 빠트리지 않도록 주의하세요."] })] }), "\n", _jsx(Accordion, { children: _jsxs(AccordionItem, { title: "왜 `:`가 필요한가요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: [_jsx(_components.p, { children: "토스페이먼츠에서는 기본적으로 Basic 인증 방식을 사용하기 때문이에요. Basic 인증은 인증 정보로 사용자 ID, 비밀번호를 사용해요. 다음과 같이 base64로 인코딩한 “사용자ID:비밀번호” 문자열을 Basic과 함께 인증 헤더에 입력하는 방식이죠." }), _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "Authorization: Basic base64({USERNAME}:{PASSWORD})" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }), _jsxs(_components.p, { children: ["토스페이먼츠는 시크릿 키를 사용자 ID, 즉 ", _jsx(_components.code, { children: "{USERNAME}" }), "으로 사용하고, 비밀번호는 따로 넣지 않는 방식이에요. 그래서 마지막에 ", _jsx(_components.code, { children: ":" }), "만 남게 됩니다. 더 자세한 내용은 토스페이먼츠 콘텐츠 ", _jsx(LogNextLink, { passHref: true, href: "/blog/everything-about-basic-bearer-auth", children: "Basic 인증과 Bearer 인증의 모든 것" }), "에서 확인해보세요."] })] }) }), "\n", _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#6F42C1" }, children: "base64(" }), _jsxs(_components.span, { style: { color: "#6F42C1" }, children: ["'", _jsx(WidgetSecretKey, {}), ":'"] }), _jsx(_components.span, { style: { color: "#24292E" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#6F42C1" }, children: " ─────────────────┬───────────────────" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " ┬" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#6F42C1" }, children: " secretKey" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " :" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#6F42C1" }, children: " 결제위젯" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " 연동" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " 키" }), _jsx(_components.span, { style: { color: "#D73A49" }, children: " >" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " 시크릿" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " 키" }), _jsx(_components.span, { style: { color: "#032F62" }, children: " 콜론" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }), "\n", _jsx(_components.p, { children: "아래 명령어를 터미널에서 실행하면 인코딩된 값을 얻을 수 있습니다." }), "\n", _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", children: _jsxs(_components.code, { children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#4593FC" }, children: "echo" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: " -n" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " '" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: [_jsx(WidgetSecretKey, {}), ":"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "'" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " |" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: " base64" })] }), "\n", _jsx(_components.span, { className: "line" })] }) }), "\n", _jsx(_components.p, { children: "인코딩된 값을 Basic 인증 헤더에 넣고 요청 본문도 추가하세요." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["헤더에 ", _jsx(_components.code, { children: "Authorization" }), "을 추가하고 ", _jsx(_components.code, { children: "Basic {인코딩된 값}" }), "을 넣어주세요. 아래 예제 코드를 참고하세요."] }), "\n", _jsxs(_components.li, { children: ["요청 본문으로는 앞 단계에서 리다이렉트 URL로 받은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-paymentkey", children: _jsx(_components.code, { children: "paymentKey" }) }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-orderid", children: _jsx(_components.code, { children: "orderId" }) }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference#v1paymentsconfirmpost-amount", children: _jsx(_components.code, { children: "amount" }) }), "를 넣어주세요.\n", _jsxs(_components.strong, { children: ["아래 예제 코드에는 내 테스트 결제의 ", _jsx(_components.code, { children: "paymentKey" }), " 값을 넣어 실행해주세요."] })] }), "\n"] }), "\n", _jsx(RequestSnippet, { method: "post", path: "/v1/payments/confirm", headers: { Authorization: 'Basic dGVzdF9nc2tfZG9jc19PYVB6OEw1S2RtUVhrelJ6M3k0N0JNdzY6' }, requestBody: { paymentKey: '{PAYMENT_KEY}', amount: 50000, orderId: '{{_id/orderId.widget}}' } }), "\n", _jsx(Accordion, { children: _jsx(AccordionItem, { title: "결제 승인 후 성공 페이지로 이동하지 않고 `NOT_FOUND_PAYMENT_SESSION` 에러가 발생해요.", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: ["성공 페이지로 리다이렉트 된 후 10분 이내에 ", _jsx(LogNextLink, { passHref: true, href: "/reference#결제-승인", children: "결제 승인 API" }), "를 호출하지 않았거나, 결제창을 iframe 안에서 호출했기 때문입니다. 브라우저의 보안 정책에 따라 성공 페이지로 이동이 차단될 수 있으니 iframe은 사용하지 말아주세요."] }) }) }), "\n", _jsxs(_components.h2, { id: "4-결제-완료-후-응답-확인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#4-결제-완료-후-응답-확인하기", children: _jsx(CopyLinkIcon, { id: "4-결제-완료-후-응답-확인하기" }) }), "4. 결제 완료 후 응답 확인하기", _jsx(AIChatButton, { section: "4. 결제 완료 후 응답 확인하기" })] }), "\n", _jsxs(_components.p, { children: ["결제 승인에 성공하면 HTTP ", _jsx(_components.code, { children: "200 OK" }), "와 ", _jsx(LogNextLink, { passHref: true, href: "/reference#payment-객체", children: "Payment 객체" }), "를 받습니다."] }), "\n", _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DONE" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "issuerCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "61" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "acquirerCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "31" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "number" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "12345678****789*" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "installmentPlanMonths" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "isInterestFree" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "interestPayer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "approveNo" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "00000000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "useCardPoint" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "cardType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "신용" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "ownerType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "개인" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "acquireStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "READY" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "amount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.widget" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "카드" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) }), "\n", _jsxs(_components.h3, { id: "결제수단별-응답", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제수단별-응답", children: _jsx(CopyLinkIcon, { id: "결제수단별-응답" }) }), "결제수단별 응답", _jsx(AIChatButton, { section: "결제수단별 응답" })] }), "\n", _jsxs(Accordion, { children: [_jsxs(AccordionItem, { title: "퀵계좌이체/계좌이체로 결제했어요.", badge: "예시", children: [_jsxs(_components.p, { children: ["퀵계좌결제와 계좌이체는 ", _jsx(_components.code, { children: "transfer" }), " 필드에 결제 정보가 담겨있습니다. ", _jsx(_components.code, { children: "transfer" }), " 필드에 담겨있는 ", _jsx(_components.code, { children: "bankCode" }), "는 이체 은행 코드입니다. 더 자세한 응답 필드 설명은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-transfer", children: "API 문서" }), "를 참고하세요."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.quick" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "WAITING_FOR_DEPOSIT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "bankCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "92" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "settlementStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "INCOMPLETED" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "소득공제" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "receiptKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "G45eDbZnodP9BRQmyarY5wX5oAPGwLrJ07KzLNkE6AOMwXYW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "issueNumber" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "158269135" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "receiptUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/receipts/cash-receipt/pS28vbVw01GMDz2m9Dstz/tvivarepublica?ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "amount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 70000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "계좌이체" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsxs(AccordionItem, { title: "간편결제로 결제했어요.", badge: "예시", children: [_jsxs(_components.p, { children: [_jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/easypay", children: "간편결제" }) }), "는 선택한 결제수단에 따라 돌아오는 응답 객체가 달라집니다. 아래 응답 객체는 토스페이에 등록된 카드로 결제했을 때 돌아오는 응답 객체입니다. ", _jsx(_components.code, { children: "card" }), " 객체와 ", _jsx(_components.code, { children: "easyPay" }), " 객체가 함께 들어있습니다. ", _jsx(_components.code, { children: "card" }), " 객체에는 결제에 사용한 카드 정보가 들어있고, ", _jsx(_components.code, { children: "easyPay" }), " 객체에는 결제에 사용한 간편결제 정보가 들어있습니다."] }), _jsxs(_components.p, { children: [_jsx(_components.code, { children: "easyPay" }), "의 ", _jsx(_components.code, { children: "amount" }), "는 간편결제 서비스에 등록된 계좌 혹은 현금성 포인트로 결제한 금액, ", _jsx(_components.code, { children: "easyPay" }), "의 ", _jsx(_components.code, { children: "discountAmount" }), "는 간편결제 서비스에서 제공하는 포인트나 쿠폰 등으로 결제한 금액입니다. 따라서 전액 카드로 결제했다면 ", _jsx(_components.code, { children: "amount" }), "와 ", _jsx(_components.code, { children: "discountAmount" }), "는 0입니다."] }), _jsxs(_components.p, { children: ["더 자세한 내용은 ", _jsxs(_components.strong, { children: [_jsx(LogNextLink, { passHref: true, href: "/guides/learn/easypay-response", children: "간편결제 응답 처리" }), "를 참고하세요."] })] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DONE" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "issuerCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "61" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "acquirerCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "31" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "number" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "12345678****789*" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "installmentPlanMonths" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "isInterestFree" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "interestPayer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "approveNo" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "00000000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "useCardPoint" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "cardType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "신용" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "ownerType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "개인" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "acquireStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "READY" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "amount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "provider" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스페이" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "amount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "discountAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.widget" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "간편결제" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsxs(AccordionItem, { title: "가상계좌 결제를 요청했어요.", badge: "예시", children: [_jsxs(_components.p, { children: ["가상계좌 결제 요청 결과는 ", _jsx(_components.code, { children: "virtualAccount" }), " 필드에 담겨있습니다. ", _jsx(_components.code, { children: "virtualAccount" }), " 필드에 담겨있는 ", _jsx(_components.code, { children: "accountNumber" }), "는 발급된 가상계좌 번호이고, ", _jsx(_components.code, { children: "dueDate" }), "는 입금 기한입니다. ", _jsx(_components.code, { children: "expired" }), "는 입금 기한이 지났는지 여부입니다. 더 자세한 응답 필드 설명은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-virtualaccount", children: "API 문서" }), "를 참고하세요.\n테스트 환경에서 발급된 가상계좌는 계좌번호 앞에 'X'가 붙습니다. 테스트 환경에서 발급된 계좌로 직접 입금할 수 없지만, 개발자센터의 ", _jsx(ExternalLink, { href: "https://developers.tosspayments.com/my/payment-logs", children: "테스트 결제내역 메뉴" }), "에서 입금처리를 할 수 있습니다."] }), _jsxs(_components.p, { children: ["결제위젯 어드민에서 구매자의 환불 계좌 정보를 입력 기능을 활성화했다면 ", _jsx(LogNextLink, { passHref: true, href: "/guides/cancel-payment#case-2-결제위젯-환불-계좌-확인하기", children: "환불 계좌 정보를 확인하세요" }), "."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.quick" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "WAITING_FOR_DEPOSIT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "accountNumber" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "X6516204518243" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "accountType" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "일반" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "bankCode" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "20" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "customerName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "김토스" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "dueDate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2023-11-03T10:23:08+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "expired" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "settlementStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "INCOMPLETED" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "refundStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NONE" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "refundReceiveAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "가상계좌" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsxs(AccordionItem, { title: "상품권으로 결제했어요.", badge: "예시", children: [_jsxs(_components.p, { children: ["상품권 결제는 ", _jsx(_components.code, { children: "giftCertificate" }), " 필드에 결제 정보가 담겨있습니다. ", _jsx(_components.code, { children: "giftCertificate" }), " 필드에 담겨있는 ", _jsx(_components.code, { children: "approveNo" }), "는 결제 승인 번호입니다. 더 자세한 응답 필드 설명은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-giftcertificate", children: "API 문서" }), "를 참고하세요."] }), _jsxs(_components.p, { children: [_jsx(_components.code, { children: "method" }), "에는 '문화상품권', '도서문화상품권', '게임문화상품권' 중 선택한 상품권 결제수단이 들어옵니다."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.quick" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DONE" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "approveNo" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "0231026202237jQNi4" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "settlementStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "INCOMPLETED" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "문화상품권" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] }), _jsxs(AccordionItem, { title: "휴대폰으로 결제했어요.", badge: "예시", children: [_jsxs(_components.p, { children: [_jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/mobile-payment", children: "휴대폰 결제" }) }), "는 ", _jsx(_components.code, { children: "mobilePhone" }), " 필드에 결제 정보가 담겨있습니다. ", _jsx(_components.code, { children: "mobilePhone" }), " 필드에 담겨있는 ", _jsx(_components.code, { children: "customerMobilePhone" }), "은 구매자의 휴대폰 번호입니다. 더 자세한 응답 필드 설명은 ", _jsx(LogNextLink, { passHref: true, href: "/reference#paymentdetaildto-mobilephone", children: "API 문서" }), "를 참고하세요."] }), _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", title: "응답", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "tosspayments" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "version" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-11-16" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "paymentKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "paymentKey.quick" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "status" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "DONE" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "lastTransactionKey" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "lastTransactionKey.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderId" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: _jsx(UniqueId, { name: "orderId.widget" }) }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "orderName" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "토스 티셔츠 외 2건" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "requestedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:09+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "approvedAt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "2022-06-08T15:40:49+09:00" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "useEscrow" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cultureExpense" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " false," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "card" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "virtualAccount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "transfer" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "mobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "customerMobilePhone" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "01012345678" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "settlementStatus" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "INCOMPLETED" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "receiptUrl" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://pgweb.tosspayments.com:9091/MpFlowCtrl?eventDiv1=search&eventDiv2=getWirelessReceipt&trxid=tviva202310262024459lq95&SYSTEM=NEW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line highlighted", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "giftCertificate" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cashReceipts" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "discount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "cancels" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "secret" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "type" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NORMAL" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "easyPay" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "country" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KR" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "failure" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "isPartialCancelable" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " true," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "receipt" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "checkout" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#4593FC" }, children: "url" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsxs(_components.span, { style: { color: "#FFB74D" }, children: ["https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout"] }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "currency" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "KRW" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "totalAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "balanceAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 15000" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "suppliedAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 13636" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "vat" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 1364" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "taxFreeAmount" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#F78C6C" }, children: " 0" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line highlighted", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "metadata" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " null," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "method" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "휴대폰" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) })] })] }), "\n", _jsxs(_components.h3, { id: "확인할-내용", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#확인할-내용", children: _jsx(CopyLinkIcon, { id: "확인할-내용" }) }), "확인할 내용", _jsx(AIChatButton, { section: "확인할 내용" })] }), "\n", _jsxs(_components.p, { children: ["✔️ ", _jsx(_components.strong, { children: "응답 객체에 선택한 결제수단 필드가 있는지 확인하세요." }), " 만약 원하는 필드가 없다면 API 버전을 확인해보세요. 응답 객체의 필드는 API 버전에 따라 조금씩 달라집니다. ", _jsx(ExternalLink, { href: "https://developers.tosspayments.com/my/api-keys", children: "개발자센터" }), "에 설정된 API 버전을 확인하고, 원하는 필드가 있는 버전으로 변경해보세요. API 버전 업데이트 사항은 ", _jsx(LogNextLink, { passHref: true, href: "/resources/release-note", children: "릴리즈 노트" }), "에서 확인할 수 있습니다."] }), "\n", _jsxs(_components.p, { children: ["✔️ ", _jsxs(_components.strong, { children: ["응답 객체의 ", _jsx(_components.code, { children: "method" }), "가 선택한 결제수단이 맞는지 확인하세요."] })] }), "\n", _jsxs(_components.h3, { id: "결제-승인에-실패했다면", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제-승인에-실패했다면", children: _jsx(CopyLinkIcon, { id: "결제-승인에-실패했다면" }) }), "결제 승인에 실패했다면", _jsx(AIChatButton, { section: "결제 승인에 실패했다면" })] }), "\n", _jsx(_components.p, { children: "결제 승인 요청이 정상적으로 처리되지 않으면 응답으로 HTTP 상태 코드와 함께 아래와 같은 에러 객체가 돌아옵니다." }), "\n", _jsx(_components.pre, { className: "shiki dark", style: { backgroundColor: "#122440", color: "#EEFFFF", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "{" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "code" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "NOT_FOUND_PAYMENT" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#00A661" }, children: "message" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: ":" }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: " \"" }), _jsx(_components.span, { style: { color: "#FFB74D" }, children: "존재하지 않는 결제 입니다." }), _jsx(_components.span, { style: { color: "#89DDFF" }, children: "\"" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#89DDFF" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" })] }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "code" }), ": 에러 타입을 보여주는 에러 코드입니다."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "message" }), ": 에러 메시지입니다. 에러 발생 이유를 알려줍니다.\nAPI 별 에러 코드와 메시지는 ", _jsx(LogNextLink, { passHref: true, href: "/reference/error-codes#코어-api-별-에러", children: "에러 코드" }), " 페이지에서 살펴보세요."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "faq", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#faq", children: _jsx(CopyLinkIcon, { id: "faq" }) }), "FAQ", _jsx(AIChatButton, { section: "FAQ" })] }), "\n", _jsxs(Accordion, { children: [_jsx(AccordionItem, { title: "결제위젯 SDK는 어떤 플랫폼을 지원하나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: ["결제위젯 SDK는 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js", children: "Web" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-android", children: "Native Android" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-ios", children: "Native iOS" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-rn", children: "React Native" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-flutter", children: "Flutter" }), "를 지원하고 있어요."] }) }), _jsx(AccordionItem, { title: "결제창을 띄우기 전에 구매자가 선택한 결제수단을 알 수 있나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsxs(_components.p, { children: ["네. ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#getselectedpaymentmethod", children: _jsx(_components.code, { children: "getSelectedPaymentMethod()" }) }), "를 호출해서 구매자가 선택한 결제수단을 확인할 수 있습니다."] }) }), _jsxs(AccordionItem, { title: "결제 UI 렌더링이 완료되었을 때 이벤트를 받을 수 있나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: [_jsxs(_components.p, { children: ["네. ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#on이벤트-콜백", children: _jsx(_components.code, { children: "ready" }) }), " 이벤트로 결제 UI 렌더링 완료 이벤트를 받을 수 있습니다."] }), _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "const paymentMethodWidget = paymentWidget.renderPaymentMethods(" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: " \"#payment-method\"," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: " { value: 50000 }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: " { variantKey: \"DEFAULT\" }" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: ");" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "paymentMethods.on('ready', () => {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: " // 결제 버튼 활성화" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "})" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) })] }), _jsxs(AccordionItem, { title: "결제 요청할 때 커스텀 파라미터를 보내고 승인 응답에 포함할 수 있나요?", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: [_jsx(_components.p, { children: "아니요. 커스텀 파라미터를 보내거나 결제 승인 응답에 커스텀 파라미터를 포함시키는 기능은 지원되지 않습니다." }), _jsxs(_components.p, { children: ["대신 다음과 같은 방법을 사용할 수 있습니다. 첫 번째 방법은 결제 성공 후 이동하는 ", _jsx(_components.code, { children: "successUrl" }), "로 받는 방법입니다. 적은 양의 데이터라면 ", _jsx(_components.code, { children: "successUrl" }), "의 ", _jsx(GlossaryPopover, { children: _jsx(LogNextLink, { passHref: true, href: "/resources/glossary/query-param", children: "쿼리 파라미터" }) }), "로 추가해서 확인할 수 있습니다. 만약 전달하고자 하는 데이터가 많거나 결제 완료 전에 데이터를 처리해야 한다면, ", _jsx(LogNextLink, { passHref: true, href: "/guides/learn/payment-flow#결제-요청-전에-결제할-데이터-저장하기", children: "결제 요청을 하기 전에 데이터베이스에 저장" }), "하세요. 예를 들면 ", _jsx(_components.code, { children: "orderId" }), " 등과 데이터를 매핑해서 데이터베이스에 저장하는 방식입니다. 또는 세션이나 쿠키를 활용하거나 ", _jsx(LogNextLink, { passHref: true, href: "/sdk/widget-js#promise로-처리하기", children: "Promise를 사용해서" }), " 객체로 데이터를 받을 수 있습니다. 다만 Promise 방식은 모바일에서 사용할 수 없으니 유의하세요."] })] }), _jsx(AccordionItem, { title: "결제위젯에 간편결제 설정을 했는데 애플페이만 노출이 되지 않아요.", badge: _jsx(AccordionItem.Icon, { name: "icon-q-mono" }), children: _jsx(_components.p, { children: "애플페이는 iPhone 및 Mac Safari 에서만 노출돼요. 어드민 페이지에서는 예상 이미지를 확인할 수 있습니다." }) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...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."); }