"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", hr: "hr", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Accordion, AccordionItem, Button, ExternalLink, GlossaryPopover, Grid, GridCol, LogNextLink, Mermaid, SampleCodeDownloadButton, Spacing, Stack, TutorialHeader, TutorialSection, WidgetClientKey, WidgetSecretKey} = _components; if (!Accordion) _missingMdxReference("Accordion", true); if (!AccordionItem) _missingMdxReference("AccordionItem", true); if (!AccordionItem.Badge) _missingMdxReference("AccordionItem.Badge", true); if (!AccordionItem.Icon) _missingMdxReference("AccordionItem.Icon", true); if (!Button) _missingMdxReference("Button", true); if (!Button.Icon) _missingMdxReference("Button.Icon", true); if (!ExternalLink) _missingMdxReference("ExternalLink", true); if (!GlossaryPopover) _missingMdxReference("GlossaryPopover", true); if (!Grid) _missingMdxReference("Grid", true); if (!GridCol) _missingMdxReference("GridCol", true); if (!LogNextLink) _missingMdxReference("LogNextLink", true); if (!Mermaid) _missingMdxReference("Mermaid", true); if (!SampleCodeDownloadButton) _missingMdxReference("SampleCodeDownloadButton", true); if (!Spacing) _missingMdxReference("Spacing", true); if (!Stack) _missingMdxReference("Stack", false); if (!Stack.Horizontal) _missingMdxReference("Stack.Horizontal", true); if (!TutorialHeader) _missingMdxReference("TutorialHeader", true); if (!TutorialSection) _missingMdxReference("TutorialSection", true); if (!WidgetClientKey) _missingMdxReference("WidgetClientKey", true); if (!WidgetSecretKey) _missingMdxReference("WidgetSecretKey", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "결제위젯을 사용하면 모든 결제수단을 한 번에 연동할 수 있어요. 프로젝트 언어를 선택하고 빠르게 시작하세요.\n연동이 끝나면 노코드로 결제수단 설정과 디자인을 변경할 수 있어요." }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://static.tosspayments.com/docs/payment-widget/overview/payment-widget-main.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/payment-widget/overview/payment-widget-main.png", alt: "토스페이먼츠 결제위젯" }) }) }), "\n", _jsxs(Grid, { gap: 16, children: [_jsxs(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: [_jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 신용・체크 카드"] }), _jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 계좌이체(퀵계좌이체)"] })] }), _jsxs(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: [_jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 간편결제"] }), _jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 휴대폰"] })] }), _jsxs(GridCol, { width: { sm: 4, md: 4, lg: 4 }, children: [_jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 가상계좌"] }), _jsxs(_components.p, { children: [_jsx("img", { src: "https://static.toss.im/icons/png/4x/icon-square-check-blue.png", height: "20", style: { marginBottom: "-3px" } }), " 상품권"] })] })] }), "\n", _jsxs(_components.p, { children: ["아래 ", _jsx(_components.strong, { children: "문서용 테스트 키" }), " 또는 ", _jsx(_components.strong, { children: "전자결제 신청 이후에 확인 가능한 결제위젯 연동 키" }), "를 사용하세요."] }), "\n", _jsx(_Fragment, { children: _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", icon: "", children: _jsxs(_components.code, { children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: _jsx(WidgetClientKey, {}) }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: _jsx(WidgetSecretKey, {}) }) })] }) }) }), "\n", _jsxs(Stack.Horizontal, { children: [_jsx(Button, { as: "a", href: "https://developers.tosspayments.com/sandbox", type: "primary", size: "small", rightAddon: _jsx(Button.Icon, { name: "icon-arrow-right-small" }), children: _jsx(_components.p, { children: "샌드박스로 시작하기" }) }), _jsx(SampleCodeDownloadButton, { version: "v2", size: "small", rightAddon: _jsx(Button.Icon, { name: "icon-arrow-right-small" }), children: _jsx(_components.p, { children: "코드 샘플 다운로드하기" }) })] }), "\n", _jsx(Spacing, { size: 24 }), "\n", _jsx(_components.p, { children: _jsx(_components.a, { href: "https://static.tosspayments.com/docs/payment-widget/integration/payment-widget-flow2.png", target: "_blank", rel: "noreferrer noopener", className: "rehype-image-link", children: _jsx(_components.img, { src: "https://static.tosspayments.com/docs/payment-widget/integration/payment-widget-flow2.png", alt: "토스페이먼츠 결제위젯 흐름" }) }) }), "\n", _jsx(_components.hr, {}), "\n", _jsx(TutorialHeader, { step: 1, target: "client", children: _jsx(_components.p, { children: "결제위젯 렌더하기" }) }), "\n", _jsxs(TutorialSection, { title: "SDK 설치", children: [_jsx(_components.p, { children: "스크립트 태그 또는 npm 패키지로 결제위젯 SDK를 설치하세요." }), _jsx(_Fragment, { children: _jsx(_components.pre, { className: "shiki grey", style: { backgroundColor: "#f2f4f6", color: "#24292e", fontSize: "14px", lineHeight: "1.4" }, tabIndex: "0", theme: "grey", copyable: "false", feedbackable: "false", icon: "", children: _jsx(_components.code, { children: _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "