/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ h1: "h1", a: "a", p: "p", img: "img", h2: "h2", strong: "strong", pre: "pre", code: "code", div: "div", span: "span", h3: "h3", ul: "ul", li: "li" }, _provideComponents(), props.components), {CopyLinkIcon, LogNextLink, Grid, GridCol, IconCard, FeedbackButton, ExternalLink, WidgetClientKey, WidgetSecretKey, Callout, TechStackProvider, TechStackScope, UniqueId, Accordion, AccordionItem, GlossaryPopover, RequestSnippet} = _components; 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 (!FeedbackButton) _missingMdxReference("FeedbackButton", true); if (!GlossaryPopover) _missingMdxReference("GlossaryPopover", true); if (!Grid) _missingMdxReference("Grid", true); if (!GridCol) _missingMdxReference("GridCol", true); if (!IconCard) _missingMdxReference("IconCard", true); if (!LogNextLink) _missingMdxReference("LogNextLink", true); if (!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", _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/payment-widget-sample/" }) }), _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(FeedbackButton, { 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, { children: _jsxs(_components.code, { className: "language-js", lang: "js", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 토스페이먼츠 회원가입하기 전이라면, 아래 문서용 테스트 키를 사용하세요. 문서용 테스트 키는 _docs_가 포함되어 있어요." }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 토스페이먼츠에 회원가입했다면, 개발자센터에서 내 테스트 상점 키를 확인하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 로그인한 상태라면, 문서에 있는 클라이언트 키, 시크릿 키가 내 테스트 키로 바뀌어요." }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(WidgetClientKey, {}), "'"] }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " secretKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(WidgetSecretKey, {}), "'"] }), "\n"] })] }) }), "\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(FeedbackButton, { 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, { stack: "frontend", children: _jsxs(_components.code, { className: "language-html", lang: "html", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "meta"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "charset" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "utf-8", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "https://js.tosspayments.com/v1/payment-widget", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "payment-method", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "agreement", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "checkbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "coupon-box", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "label"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "for" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "coupon-box", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), " 5,000원 쿠폰 적용 ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "button"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "payment-button", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "결제하기", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "script"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token script", children: _jsxs(_components.span, { className: "token language-javascript", children: ["\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(WidgetClientKey, {}), "\""] }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " customerKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }), "\""] }), " ", _jsx(_components.span, { className: "token comment", children: "// 내 상점에서 고객을 구분하기 위해 발급한 고객의 고유 ID" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " coupon ", _jsx(_components.span, { className: "token operator", children: "=" }), " document", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"coupon-box\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " button ", _jsx(_components.span, { className: "token operator", children: "=" }), " document", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "getElementById" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"payment-button\"" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제위젯 초기화 ------" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "PaymentWidget" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "clientKey", _jsx(_components.span, { className: "token punctuation", children: "," }), " customerKey", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 회원 결제" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// const paymentWidget = PaymentWidget(clientKey, PaymentWidget.ANONYMOUS) // 비회원 결제" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제 UI 렌더링 ------" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderPaymentMethods" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token string", children: "\"#payment-method\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "50000" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 렌더링하고 싶은 결제 UI의 variantKey" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 결제 수단 및 스타일이 다른 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DEFAULT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// ------ 이용약관 UI 렌더링 ------" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션" }), "\n paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderAgreement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n ", _jsx(_components.span, { className: "token string", children: "'#agreement'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"AGREEMENT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token comment", children: "// 기본 이용약관 UI 렌더링" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// ------ 금액 업데이트 ------" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 새로운 결제 금액을 넣어주세요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액" }), "\n coupon", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"change\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "coupon", _jsx(_components.span, { className: "token punctuation", children: "." }), "checked", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n paymentMethodWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "updateAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "amount ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "else" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n paymentMethodWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "updateAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "amount", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }), "\n ", _jsx(_components.span, { className: "token comment", children: "// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }), "\n ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보" }), "\n button", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "addEventListener" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token string", children: "\"click\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "requestPayment" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "orderId" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "orderName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "successUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token string", children: "\"/success\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "failUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token string", children: "\"/fail\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "customerEmail" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"customer123@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "customerName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"김토스\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "customerMobilePhone" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"01012341234\"" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n "] }) }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }) }), _jsxs(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, { stack: "frontend", children: _jsx(_components.code, { className: "language-bash", lang: "bash", children: _jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token function", children: "npm" }), " ", _jsx(_components.span, { className: "token function", children: "install" }), " @tosspayments/payment-widget-sdk\n"] }) }) }), _jsx(_components.pre, { title: "Checkout.tsx", stack: "frontend", children: _jsxs(_components.code, { className: "language-jsx", lang: "jsx", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useEffect", _jsx(_components.span, { className: "token punctuation", children: "," }), " useRef", _jsx(_components.span, { className: "token punctuation", children: "," }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), " \n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" PaymentWidgetInstance", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" loadPaymentWidget", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token constant", children: "ANONYMOUS" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"@tosspayments/payment-widget-sdk\"" }), " \n"] }), _jsx(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: "\n" }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(WidgetClientKey, {}), "\""] }), " \n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " customerKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }), "\""] }), " \n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "CheckoutPage" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidgetRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " useRef", _jsx(_components.span, { className: "token operator", children: "<" }), "PaymentWidgetInstance ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidgetRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " useRef", _jsx(_components.span, { className: "token operator", children: "<" }), "ReturnType", _jsx(_components.span, { className: "token operator", children: "<" }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" PaymentWidgetInstance", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"renderPaymentMethods\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "price", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPrice", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "50000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제위젯 초기화 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "loadPaymentWidget" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "clientKey", _jsx(_components.span, { className: "token punctuation", children: "," }), " customerKey", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 회원 결제" }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제" }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제 UI 렌더링 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션" }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderPaymentMethods" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token string", children: "\"#payment-widget\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " price ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 렌더링하고 싶은 결제 UI의 variantKey" }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui" }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DEFAULT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 이용약관 UI 렌더링 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션" }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderAgreement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token string", children: "'#agreement'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"AGREEMENT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token comment", children: "// 기본 이용약관 UI 렌더링" }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" paymentWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget \n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" paymentMethodsWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentMethodsWidget \n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentMethodsWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current \n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "==" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " \n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 금액 업데이트 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 새로운 결제 금액을 넣어주세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "52", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액" }), "\n"] }), _jsxs(_components.div, { "data-line": "53", className: "highlight-line", "data-highlighted": "false", children: [" paymentMethodsWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "updateAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsx(_components.div, { "data-line": "54", className: "highlight-line", "data-highlighted": "false", children: " price\n" }), _jsxs(_components.div, { "data-line": "55", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "56", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "price", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "57", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "58", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "59", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "주문서" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "60", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "price", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "원" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "61", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "62", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "label"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "63", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "checkbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "event" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "setPrice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), "target", _jsx(_components.span, { className: "token punctuation", children: "." }), "checked ", _jsx(_components.span, { className: "token operator", children: "?" }), " price ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " price ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "64", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " 5,000원 할인 쿠폰 적용" }), "\n"] }), _jsxs(_components.div, { "data-line": "65", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "66", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "67", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "payment-widget", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "68", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "agreement", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "69", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "71", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current \n"] }), _jsxs(_components.div, { "data-line": "72", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "73", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "74", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "75", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보" }), "\n"] }), _jsxs(_components.div, { "data-line": "76", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " paymentWidget", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "requestPayment" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "77", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderId" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "78", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "79", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"김토스\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "80", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerEmail" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"customer123@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "81", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerMobilePhone" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"01012341234\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "82", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "successUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "/success" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "83", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "failUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "/fail" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "84", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "85", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "86", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 에러 처리하기" }), "\n"] }), _jsxs(_components.div, { "data-line": "87", className: "highlight-line", "data-highlighted": "false", children: [" console", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "88", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "89", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "90", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " >" }), "\n"] }), _jsxs(_components.div, { "data-line": "91", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " 결제하기" }), "\n"] }), _jsxs(_components.div, { "data-line": "92", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "93", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "94", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "95", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }), _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, { stack: "frontend", children: _jsx(_components.code, { className: "language-bash", lang: "bash", children: _jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token function", children: "npm" }), " ", _jsx(_components.span, { className: "token function", children: "install" }), " @tosspayments/payment-widget-sdk\n"] }) }) }), _jsx(_components.pre, { title: "Checkout.tsx", stack: "frontend", children: _jsxs(_components.code, { className: "language-jsx", lang: "jsx", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useEffect", _jsx(_components.span, { className: "token punctuation", children: "," }), " useRef", _jsx(_components.span, { className: "token punctuation", children: "," }), " useState ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react\"" }), " \n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" PaymentWidgetInstance", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" loadPaymentWidget", _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token constant", children: "ANONYMOUS" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"@tosspayments/payment-widget-sdk\"" }), " \n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "import" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " useAsync ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "from" }), " ", _jsx(_components.span, { className: "token string", children: "\"react-use\"" }), " \n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " clientKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(WidgetClientKey, {}), "\""] }), " \n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " customerKey ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "customerKey.payWidgetSdk" }), "\""] }), " \n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "export" }), " ", _jsx(_components.span, { className: "token keyword", children: "default" }), " ", _jsx(_components.span, { className: "token keyword", children: "function" }), " ", _jsx(_components.span, { className: "token function", children: "Home" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidgetRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " useRef", _jsx(_components.span, { className: "token operator", children: "<" }), "PaymentWidgetInstance ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidgetRef ", _jsx(_components.span, { className: "token operator", children: "=" }), " useRef", _jsx(_components.span, { className: "token operator", children: "<" }), "ReturnType", _jsx(_components.span, { className: "token operator", children: "<" }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" PaymentWidgetInstance", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token string", children: "\"renderPaymentMethods\"" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token operator", children: ">" }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token operator", children: ">" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "price", _jsx(_components.span, { className: "token punctuation", children: "," }), " setPrice", _jsx(_components.span, { className: "token punctuation", children: "]" }), " ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token function", children: "useState" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "50000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token function", children: "useAsync" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token keyword", children: "async" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제위젯 초기화 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 비회원 결제에는 customerKey 대신 ANONYMOUS를 사용하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " ", _jsx(_components.span, { className: "token keyword", children: "await" }), " ", _jsx(_components.span, { className: "token function", children: "loadPaymentWidget" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "clientKey", _jsx(_components.span, { className: "token punctuation", children: "," }), " customerKey", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token comment", children: "// 회원 결제" }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// const paymentWidget = await loadPaymentWidget(clientKey, ANONYMOUS) // 비회원 결제" }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 결제 UI 렌더링 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 결제 UI를 렌더링할 위치를 지정합니다. `#payment-method`와 같은 CSS 선택자와 결제 금액 객체를 추가하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// DOM이 생성된 이후에 렌더링 메서드를 호출하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderpaymentmethods선택자-결제-금액-옵션" }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderPaymentMethods" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token string", children: "\"#payment-widget\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "value" }), _jsx(_components.span, { className: "token operator", children: ":" }), " price ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 렌더링하고 싶은 결제 UI의 variantKey" }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 아래 variantKey는 문서용 테스트키와 연동되어 있습니다. 멀티 UI를 직접 만들고 싶다면 계약이 필요해요." }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/guides/payment-widget/admin#멀티-결제-ui" }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DEFAULT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 이용약관 UI 렌더링 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 이용약관 UI를 렌더링할 위치를 지정합니다. `#agreement`와 같은 CSS 선택자를 추가하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#renderagreement선택자-옵션" }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderAgreement" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token string", children: "'#agreement'" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "variantKey" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"AGREEMENT\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token comment", children: "// 기본 이용약관 UI 렌더링" }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" paymentWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget \n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" paymentMethodsWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentMethodsWidget \n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token function", children: "useEffect" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentMethodsWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current \n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "if" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "==" }), " ", _jsx(_components.span, { className: "token keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " \n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ 금액 업데이트 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 새로운 결제 금액을 넣어주세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#updateamount결제-금액" }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [" paymentMethodsWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "updateAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsx(_components.div, { "data-line": "52", className: "highlight-line", "data-highlighted": "false", children: " price\n" }), _jsxs(_components.div, { "data-line": "53", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "54", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), " ", _jsx(_components.span, { className: "token punctuation", children: "[" }), "price", _jsx(_components.span, { className: "token punctuation", children: "]" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "55", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "return" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "\n"] }), _jsxs(_components.div, { "data-line": "56", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "main"] }), "\n ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "display" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"flex\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "flexDirection" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"column\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token literal-property property", children: "alignItems" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"center\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "57", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text", children: "주문서" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "58", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "span"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "price", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "toLocaleString" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "원" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "59", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "60", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "label"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "61", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "input"] }), "\n ", _jsx(_components.span, { className: "token attr-name", children: "type" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "checkbox", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), "\n ", _jsx(_components.span, { className: "token attr-name", children: "onChange" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token parameter", children: "event" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token operator", children: "=>" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n ", _jsx(_components.span, { className: "token function", children: "setPrice" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "event", _jsx(_components.span, { className: "token punctuation", children: "." }), "target", _jsx(_components.span, { className: "token punctuation", children: "." }), "checked ", _jsx(_components.span, { className: "token operator", children: "?" }), " price ", _jsx(_components.span, { className: "token operator", children: "-" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), " ", _jsx(_components.span, { className: "token operator", children: ":" }), " price ", _jsx(_components.span, { className: "token operator", children: "+" }), " ", _jsx(_components.span, { className: "token number", children: "5000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), "\n ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "62", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " 5,000원 할인 쿠폰 적용" }), "\n"] }), _jsxs(_components.div, { "data-line": "63", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "64", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "65", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "payment-widget", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "width" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"100%\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "66", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "div"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "id" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "\"" }), "agreement", _jsx(_components.span, { className: "token punctuation", children: "\"" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "style" }), _jsxs(_components.span, { className: "token script language-javascript", children: [_jsx(_components.span, { className: "token script-punctuation punctuation", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), " ", _jsx(_components.span, { className: "token literal-property property", children: "width" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"100%\"" }), " ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" })] }), " ", _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "67", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "69", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "const" }), " paymentWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidgetRef", _jsx(_components.span, { className: "token punctuation", children: "." }), "current \n"] }), _jsxs(_components.div, { "data-line": "70", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "try" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "71", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// ------ '결제하기' 버튼 누르면 결제창 띄우기 ------" }), "\n"] }), _jsxs(_components.div, { "data-line": "72", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 더 많은 결제 정보 파라미터는 결제위젯 SDK에서 확인하세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "73", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// https://docs.tosspayments.com/reference/widget-sdk#requestpayment결제-정보" }), "\n"] }), _jsxs(_components.div, { "data-line": "74", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token keyword", children: "await" }), " paymentWidget", _jsx(_components.span, { className: "token operator", children: "?." }), _jsx(_components.span, { className: "token function", children: "requestPayment" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "75", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderId" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "76", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "orderName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "77", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerName" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"김토스\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "78", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerEmail" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"customer123@gmail.com\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "79", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "customerMobilePhone" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"01012341234\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "80", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "successUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "/success" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "81", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token literal-property property", children: "failUrl" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token template-string", children: [_jsx(_components.span, { className: "token template-punctuation string", children: "`" }), _jsxs(_components.span, { className: "token interpolation", children: [_jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "${" }), "window", _jsx(_components.span, { className: "token punctuation", children: "." }), "location", _jsx(_components.span, { className: "token punctuation", children: "." }), "origin", _jsx(_components.span, { className: "token interpolation-punctuation punctuation", children: "}" })] }), _jsx(_components.span, { className: "token string", children: "/fail" }), _jsx(_components.span, { className: "token template-punctuation string", children: "`" })] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "82", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "83", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), " ", _jsx(_components.span, { className: "token keyword", children: "catch" }), " ", _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "84", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token comment", children: "// 에러 처리하기" }), "\n"] }), _jsxs(_components.div, { "data-line": "85", className: "highlight-line", "data-highlighted": "false", children: [" console", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "error" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), "error", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "86", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] }), _jsxs(_components.div, { "data-line": "87", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "88", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " >" }), "\n"] }), _jsxs(_components.div, { "data-line": "89", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " 결제하기" }), "\n"] }), _jsxs(_components.div, { "data-line": "90", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), _jsx(_components.span, { className: "token plain-text" }), "\n"] }), _jsxs(_components.div, { "data-line": "91", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token plain-text", children: " " }), _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.div, { "data-line": "92", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] }), _jsxs(_components.div, { "data-line": "93", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] })] }), "\n", _jsxs(_components.h3, { id: "트러블슈팅", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#트러블슈팅", children: _jsx(CopyLinkIcon, { id: "트러블슈팅" }) }), "트러블슈팅", _jsx(FeedbackButton, { 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: "/reference/widget-sdk#updateamount결제-금액", children: _jsx(_components.code, { children: "updateAmount()" }) }), "를 사용해서 결제위젯을 업데이트하세요."] }), _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-js", lang: "js", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token keyword", children: "const" }), " paymentMethodsWidget ", _jsx(_components.span, { className: "token operator", children: "=" }), " paymentWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "renderPaymentMethods" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token comment", children: "// 새로운 결제 금액을 넣어주세요." }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: ["paymentMethodsWidget", _jsx(_components.span, { className: "token punctuation", children: "." }), _jsx(_components.span, { className: "token function", children: "updateAmount" }), _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsx(_components.span, { className: "token number", children: "5000" }), _jsx(_components.span, { className: "token punctuation", children: ")" }), " \n"] })] }) })] }), _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(_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(FeedbackButton, { section: "2. 테스트 결제 후 페이지 이동 확인하기" })] }), "\n", _jsxs(_components.p, { children: ["결제창을 띄워 테스트 결제를 하면, 페이지가 이동해요. 이동한 페이지에서 결제 요청 결과를 확인할 수 있어요.\n", _jsx(_components.a, { href: "https://static.tosspayments.com/docs/redirect-flow.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/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/contents/request-flow.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/contents/request-flow.png", alt: "결제 요청 과정 이미지" }) }), "\n이렇게 인증과 승인 사이에 리다이렉트(페이지 이동) 과정이 있습니다.\n", _jsxs(_components.strong, { children: ["두 단계로 나누어져 있는 결제 요청 과정에서 첫 번째 단계인 인증 결과를 받아 다음 단계로 넘어가기 위해 ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-sdk#리다이렉트-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: "/reference/widget-sdk#성공-응답", children: "결제 정보" }), "를 이용해 승인 API를 호출합니다. 인증에 실패했다면 이동한 실패 리다이렉트 URL(", _jsx(_components.code, { children: "failUrl" }), ")에 쿼리 파라미터로 담긴 ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-sdk#실패-응답", 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: "쿼리 파라미터" }) }), "로 다음 단계인 결제 승인을 요청합니다. 끝까지 다 연동했다면 결제 고객 입장에서는 페이지 이동과 다음 단계인 ", _jsx(LogNextLink, { passHref: true, href: "#3-결제-승인하기", children: "결제 승인 API 호출" }), "이 순식간에 이뤄져서 인지하기 어려워요.\n테스트 결제 요청이 성공하면 ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-sdk#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, { theme: "grey", copyable: "false", children: _jsx(_components.code, { className: "language-plain", lang: "plain", children: _jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "https://{ORIGIN}/success?paymentType={PAYMENT_TYPE}&orderId={ORDER_ID}&paymentKey={PAYMENT_KEY}&amount={AMOUNT}\n" }) }) }), "\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(LogNextLink, { passHref: true, href: "/reference/widget-sdk#requestpayment결제-정보", children: _jsx(_components.code, { children: "requestPayment()" }) }), "에 담아 보낸 값입니다. 결제 데이터 관리를 위해 반드시 저장해야 합니다. 중복되지 않는 고유한 값을 발급해야 합니다. 결제 상태가 변해도 값이 유지됩니다."] }), "\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: "/reference/widget-sdk#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(FeedbackButton, { section: "결제 요청이 실패했을 때" })] }), "\n", _jsxs(_components.p, { children: ["결제 요청이 실패하면 설정했던 결제 실패 페이지(", _jsx(_components.code, { children: "failUrl" }), ")로 이동합니다. ", _jsx(LogNextLink, { passHref: true, href: "/reference/error-codes#결제공통-sdk-에러", children: "에러 목록" }), "을 확인하세요."] }), "\n", _jsx(_components.pre, { theme: "grey", copyable: "false", children: _jsx(_components.code, { className: "language-plain", lang: "plain", children: _jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "https://{ORIGIN}/fail?code={ERROR_CODE}&message={ERROR_MESSAGE}&orderId={ORDER_ID}\n" }) }) }), "\n", _jsxs(_components.h2, { id: "3-결제-승인하기", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#3-결제-승인하기", children: _jsx(CopyLinkIcon, { id: "3-결제-승인하기" }) }), "3. 결제 승인하기", _jsx(FeedbackButton, { section: "3. 결제 승인하기" })] }), "\n", _jsxs(_components.p, { children: [_jsx(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, { theme: "grey", copyable: "false", children: _jsx(_components.code, { className: "language-plain", lang: "plain", children: _jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "Authorization: Basic base64({USERNAME}:{PASSWORD})\n" }) }) }), _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, { theme: "grey", copyable: "false", children: _jsxs(_components.code, { className: "language-bash", lang: "bash", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: ["base64", _jsx(_components.span, { className: "token punctuation", children: "(" }), _jsxs(_components.span, { className: "token string", children: ["'", _jsx(WidgetSecretKey, {}), ":'"] }), _jsx(_components.span, { className: "token punctuation", children: ")" }), "\n"] }), _jsx(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: " ─────────────────┬─────────────────── ┬\n" }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" secretKey ", _jsx(_components.span, { className: "token builtin class-name", children: ":" }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" 결제위젯 연동 키 ", _jsx(_components.span, { className: "token operator", children: ">" }), " 시크릿 키 콜론\n"] })] }) }), "\n", _jsx(_components.p, { children: "아래 명령어를 터미널에서 실행하면 인코딩된 값을 얻을 수 있습니다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", lang: "bash", children: _jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token builtin class-name", children: "echo" }), " -n ", _jsxs(_components.span, { className: "token string", children: ["'", _jsx(WidgetSecretKey, {}), ":'"] }), " ", _jsx(_components.span, { className: "token operator", children: "|" }), " base64\n"] }) }) }), "\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", _jsx(RequestSnippet, { method: "post", path: "/v1/payments/confirm", headers: { Authorization: 'Basic dGVzdF9nc2tfZG9jc19PYVB6OEw1S2RtUVhrelJ6M3k0N0JNdzY6' }, requestBody: { paymentKey: '{PAYMENT_KEY}', amount: 50000, orderId: '{{_id/orderId.widget}}' } }), "\n"] }), "\n"] }), "\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(FeedbackButton, { 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, { line: "13-26,53", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"issuerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"61\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquirerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"31\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"number\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"12345678****789*\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"installmentPlanMonths\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isInterestFree\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"interestPayer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approveNo\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"00000000\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useCardPoint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cardType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"신용\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"ownerType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"개인\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquireStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"READY\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.widget" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "52", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "53", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"카드\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "54", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "결제수단별-응답", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#결제수단별-응답", children: _jsx(CopyLinkIcon, { id: "결제수단별-응답" }) }), "결제수단별 응답", _jsx(FeedbackButton, { 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, { line: "15-18,21-28,50", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.quick" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"WAITING_FOR_DEPOSIT\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"bankCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"92\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"settlementStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"INCOMPLETED\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"소득공제\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receiptKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"G45eDbZnodP9BRQmyarY5wX5oAPGwLrJ07KzLNkE6AOMwXYW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"issueNumber\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"158269135\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receiptUrl\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/receipts/cash-receipt/pS28vbVw01GMDz2m9Dstz/tvivarepublica?ref=PX\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "70000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"계좌이체\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }), _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, { line: "13-26,37-41,57", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"issuerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"61\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquirerCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"31\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"number\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"12345678****789*\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"installmentPlanMonths\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isInterestFree\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"interestPayer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approveNo\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"00000000\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useCardPoint\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cardType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"신용\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"ownerType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"개인\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"acquireStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"READY\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"provider\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스페이\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"amount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discountAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.widget" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "52", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "53", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "54", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "55", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "56", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "57", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"간편결제\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "58", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }), _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, { line: "14-24,50", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.quick" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"WAITING_FOR_DEPOSIT\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"accountNumber\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"X6516204518243\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"accountType\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"일반\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"bankCode\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"20\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"customerName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"김토스\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"dueDate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2023-11-03T10:23:08+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"expired\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"settlementStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"INCOMPLETED\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"refundStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"refundReceiveAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "46", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "47", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "48", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "49", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "50", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"가상계좌\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "51", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }), _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, { line: "17-20,43", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.quick" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approveNo\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"0231026202237jQNi4\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"settlementStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"INCOMPLETED\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"문화상품권\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] }), _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, { line: "16-20,44", title: "응답", children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"tosspayments\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"version\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-11-16\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"paymentKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "paymentKey.quick" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"status\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"DONE\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"lastTransactionKey\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "lastTransactionKey.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderId\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"", _jsx(UniqueId, { name: "orderId.widget" }), "\""] }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"orderName\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"토스 티셔츠 외 2건\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"requestedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:09+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "10", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"approvedAt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"2022-06-08T15:40:49+09:00\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "11", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"useEscrow\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "12", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cultureExpense\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "false" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "13", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"card\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "14", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"virtualAccount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "15", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"transfer\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "16", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"mobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "17", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"customerMobilePhone\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"01012345678\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "18", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"settlementStatus\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"INCOMPLETED\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "19", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receiptUrl\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://pgweb.tosspayments.com:9091/MpFlowCtrl?eventDiv1=search&eventDiv2=getWirelessReceipt&trxid=tviva202310262024459lq95&SYSTEM=NEW\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "20", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "21", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"giftCertificate\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "22", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "23", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cashReceipts\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "24", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"discount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "25", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"cancels\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "26", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"secret\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "27", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"type\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NORMAL\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "28", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"easyPay\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "29", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"country\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KR\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "30", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"failure\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token null keyword", children: "null" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "31", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"isPartialCancelable\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token boolean", children: "true" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "32", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"receipt\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "33", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"https://dashboard.tosspayments.com/sales-slip?transactionId=KAgfjGxIqVVXDxOiSW1wUnRWBS1dszn3DKcuhpm7mQlKP0iOdgPCKmwEdYglIHX&ref=PX\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "34", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "35", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"checkout\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "36", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"url\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsxs(_components.span, { className: "token string", children: ["\"https://api.tosspayments.com/v1/payments/", _jsx(UniqueId, { name: "paymentKey.quick" }), "/checkout\""] }), "\n"] }), _jsxs(_components.div, { "data-line": "37", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token punctuation", children: "}" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "38", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"currency\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"KRW\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "39", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"totalAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "40", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"balanceAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "15000" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "41", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"suppliedAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "13636" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "42", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"vat\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "1364" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "43", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"taxFreeAmount\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token number", children: "0" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "44", className: "highlight-line", "data-highlighted": "true", children: [" ", _jsx(_components.span, { className: "token property", children: "\"method\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"휴대폰\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "45", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) })] })] }), "\n", _jsxs(_components.h3, { id: "확인할-내용", children: [_jsx(_components.a, { className: "rehype-autolink", href: "#확인할-내용", children: _jsx(CopyLinkIcon, { id: "확인할-내용" }) }), "확인할 내용", _jsx(FeedbackButton, { 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(FeedbackButton, { section: "결제 승인에 실패했다면" })] }), "\n", _jsx(_components.p, { children: "결제 승인 요청이 정상적으로 처리되지 않으면 응답으로 HTTP 상태 코드와 함께 아래와 같은 에러 객체가 돌아옵니다." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "language-json", lang: "json", children: [_jsxs(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "{" }), "\n"] }), _jsxs(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"code\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"NOT_FOUND_PAYMENT\"" }), _jsx(_components.span, { className: "token punctuation", children: "," }), "\n"] }), _jsxs(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: [" ", _jsx(_components.span, { className: "token property", children: "\"message\"" }), _jsx(_components.span, { className: "token operator", children: ":" }), " ", _jsx(_components.span, { className: "token string", children: "\"존재하지 않는 결제 입니다.\"" }), "\n"] }), _jsxs(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: [_jsx(_components.span, { className: "token punctuation", children: "}" }), "\n"] })] }) }), "\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(FeedbackButton, { 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: "/reference/widget-sdk", children: "Web" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-android", children: "Native Android" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-ios", children: "Native iOS" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference/widget-rn", children: "React Native" }), ", ", _jsx(LogNextLink, { passHref: true, href: "/reference/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: "/reference/widget-sdk#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: "/reference/widget-sdk#on이벤트-콜백", children: _jsx(_components.code, { children: "ready" }) }), " 이벤트로 결제 UI 렌더링 완료 이벤트를 받을 수 있습니다."] }), _jsx(_components.pre, { theme: "grey", copyable: "false", children: _jsxs(_components.code, { className: "language-plain", lang: "plain", children: [_jsx(_components.div, { "data-line": "1", className: "highlight-line", "data-highlighted": "false", children: "const paymentMethodWidget = paymentWidget.renderPaymentMethods(\n" }), _jsx(_components.div, { "data-line": "2", className: "highlight-line", "data-highlighted": "false", children: " \"#payment-method\",\n" }), _jsx(_components.div, { "data-line": "3", className: "highlight-line", "data-highlighted": "false", children: " { value: 50000 },\n" }), _jsx(_components.div, { "data-line": "4", className: "highlight-line", "data-highlighted": "false", children: " { variantKey: \"DEFAULT\" }\n" }), _jsx(_components.div, { "data-line": "5", className: "highlight-line", "data-highlighted": "false", children: ");\n" }), _jsx(_components.div, { "data-line": "6", className: "highlight-line", "data-highlighted": "false", children: "\n" }), _jsx(_components.div, { "data-line": "7", className: "highlight-line", "data-highlighted": "false", children: "paymentMethods.on('ready', () => {\n" }), _jsx(_components.div, { "data-line": "8", className: "highlight-line", "data-highlighted": "false", children: " // 결제 버튼 활성화\n" }), _jsx(_components.div, { "data-line": "9", className: "highlight-line", "data-highlighted": "false", children: "})\n" })] }) })] }), _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: "/reference/widget-sdk#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} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }