LLCCRAFT \u00b7 P-07 Checkout \u00b7 v0.7.0 SaaS<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-07 Checkout SaaS. v0.7.0. Real-time payment: Stripe Elements CC + PayPal button + Pay Now. Concierge logic removed.\"><\/p>\n<p><\/p>\n<p><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'gallery': 'oklch(0.97 0.012 90)',\n 'ink': 'oklch(0.20 0.010 28)',\n 'ink-soft': 'oklch(0.55 0.008 28)',\n 'rule': 'oklch(0.88 0.005 28)',\n },\n fontFamily: {\n serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n sans: ['\"Helvetica Regular\"', '\"Inter\"', 'system-ui', 'sans-serif'],\n },\n maxWidth: { 'wide': '1320px' },\n }\n }\n }\n<\/script><\/p>\n<p><br \/>\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script><br \/>\n<br \/>\n<script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=sb&currency=USD\"><\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ============================================================\n [TKN] TOKEN INJECTION (\u6218\u533a\u4e8c\u5168\u5c40\u5e95\u5c42\u6837\u5f0f\u7edf\u4e00)\n \u5168\u7ad9 9 \u6587\u4ef6\u5171\u4eab\u6b64\u7ec4 token \u00b7 letter-spacing + glass opacity\n ============================================================ *\/\n :root {\n \/* Letter-spacing scale (standardized) *\/\n --ls-eyebrow: 0.18em; \/* tags \/ kickers \/ micro-headers *\/\n --ls-tag: 0.18em; \/* tag pills \/ status *\/\n --ls-body-sm: 0.05em; \/* small body \/ meta *\/\n --ls-body: 0.02em; \/* body \/ display *\/\n --ls-display: -0.02em; \/* large display *\/<\/p>\n<p> \/* Lumina glass opacity scale (standardized) *\/\n --glass-bg-faint: rgba(255, 255, 255, 0.01); \/* footer *\/\n --glass-bg-prominent:rgba(255, 255, 255, 0.06); \/* cards \/ panels *\/\n --glass-blend: luminosity;\n --glass-blur-sm: blur(4px);\n --glass-blur-md: blur(20px);\n --glass-blur-lg: blur(40px);\n --glass-border-w: 1.4px;\n --glass-border-c: rgba(255, 255, 255, 0.50);\n --glass-inset-hi: inset 0 1px 1px rgba(255, 255, 255, 0.15);\n }<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (inherited, ACTIVE) ---------- *\/\n @font-face {\n font-family: \"Helvetica Regular\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot\");\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n }<\/p>\n<p> *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; }\n body {\n background: #fff;\n color: var(--color-ink, #2b2622);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, -apple-system, sans-serif;\n font-size: 16px; line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* ---------- A11Y ---------- *\/\n .skiplink {\n position: fixed; top: -100px; left: 12px; z-index: 200;\n padding: 8px 24px; background: #000; color: #fff;\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n border-radius: 2px; text-decoration: none; font-weight: 500;\n transition: top 240ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .skiplink:focus { top: 12px; }\n :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }<\/p>\n<p> @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }<\/p>\n<p> \/* ============================================================\n 1. Global Sticky Header (Phase 3.5 chassis \u00b7 no cart badge)\n ============================================================ *\/\n .global-header {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: background 320ms ease, backdrop-filter 320ms ease,\n border-color 320ms ease;\n }\n .global-header.is-scrolled-down {\n background: rgba(15, 15, 15, 0.5);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-bottom-color: rgba(255, 255, 255, 0.08);\n }\n .global-header.is-scrolled-up {\n background: transparent;\n backdrop-filter: none;\n border-bottom-color: transparent;\n }\n .global-header__inner {\n max-width: 1320px; margin: 0 auto;\n padding: 18px 24px;\n display: flex; align-items: center; justify-content: space-between;\n gap: 32px;\n }\n .global-header__brand {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n color: #fff; text-decoration: none;\n letter-spacing: var(--ls-display); flex-shrink: 0;\n }\n .global-header__actions { display: flex; align-items: center; gap: 24px; }\n .global-header__lang { position: relative; }\n .global-header__lang-btn {\n display: inline-flex; align-items: center; gap: 4px;\n background: transparent; border: none; padding: 6px 8px;\n color: #fff; cursor: pointer;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n border-radius: 4px; transition: background 200ms ease;\n }\n .global-header__lang-btn:hover { background: rgba(255, 255, 255, 0.08); }\n .global-header__lang-caret { width: 10px; height: 10px; fill: currentColor; }\n .global-header__lang-menu {\n position: absolute; top: calc(100% + 8px); right: 0;\n background: oklch(0.18 0.012 28 \/ 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 4px; padding: 4px 0;\n min-width: 100px; list-style: none; margin: 0;\n opacity: 0; visibility: hidden; transform: translateY(-4px);\n transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;\n z-index: 110;\n }\n .global-header__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n .global-header__lang-menu button {\n display: block; width: 100%; padding: 8px 16px;\n background: transparent; border: none;\n color: rgba(255, 255, 255, 0.7);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n text-align: left; cursor: pointer;\n transition: background 200ms ease, color 200ms ease;\n }\n .global-header__lang-menu button:hover,\n .global-header__lang-menu button.is-active {\n background: rgba(255, 255, 255, 0.08); color: #fff;\n }\n .global-header__social {\n display: flex; align-items: center; gap: 12px;\n list-style: none; padding: 0; margin: 0;\n }\n .global-header__social a {\n display: flex; align-items: center; justify-content: center;\n width: 28px; height: 28px;\n color: #fff; opacity: 0.7;\n text-decoration: none; transition: opacity 200ms ease;\n }\n .global-header__social a:hover { opacity: 1; }\n .global-header__social svg { width: 16px; height: 16px; fill: currentColor; }\n .global-header__icons { display: flex; align-items: center; gap: 4px; }\n .global-header__icon-btn,\n .global-header__icon-link {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 40px; height: 40px;\n background: transparent; border: none;\n color: #fff; opacity: 0.85;\n text-decoration: none; cursor: pointer; border-radius: 50%;\n transition: opacity 200ms ease, background 200ms ease;\n }\n .global-header__icon-btn:hover,\n .global-header__icon-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }\n .global-header__icon-btn svg,\n .global-header__icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }<\/p>\n<p> \/* ============================================================\n 2. Checkout layout (60\/40)\n ============================================================ *\/\n .checkout {\n display: grid;\n grid-template-columns: 60% 40%;\n min-height: 100vh;\n padding-top: 96px;\n }\n @media (max-width: 900px) {\n .checkout { grid-template-columns: 1fr; }\n }<\/p>\n<p> .checkout__form {\n background: #fff;\n padding: 64px 64px 96px;\n max-width: 720px;\n }\n @media (max-width: 768px) {\n .checkout__form { padding: 40px 24px 64px; }\n }<\/p>\n<p> .checkout__eyebrow {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n margin: 0 0 12px;\n }\n .checkout__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2rem, 3vw, 2.5rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 40px; color: var(--color-ink, #2b2622);\n letter-spacing: var(--ls-display);\n }\n .checkout__subtitle {\n font-size: 14px; color: var(--color-ink-soft, #6b625b);\n margin: 0 0 48px; letter-spacing: var(--ls-body);\n }<\/p>\n<p> \/* ----- Form sections ----- *\/\n .form-section { margin-bottom: 36px; }\n .form-section__title {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n font-weight: 500;\n margin: 0 0 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--color-rule, #e1ddd7);\n }\n .form-field { margin-bottom: 16px; }\n .form-field__label {\n display: block;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n color: var(--color-ink, #2b2622);\n margin-bottom: 6px; font-weight: 500;\n }\n .form-field__input {\n display: block; width: 100%;\n padding: 12px 14px;\n background: #fff;\n color: var(--color-ink, #2b2622);\n border: 1px solid var(--color-rule, #d8d3cd);\n border-radius: 6px;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 14px; letter-spacing: var(--ls-body);\n transition: border-color 200ms ease;\n }\n .form-field__input:focus {\n outline: none;\n border-color: oklch(0.42 0.165 27);\n box-shadow: 0 0 0 3px oklch(0.42 0.165 27 \/ 0.12);\n }\n .form-field__input::placeholder { color: var(--color-ink-soft, #6b625b); }\n .form-field--stripe {\n padding: 16px;\n background: #fafaf8;\n border: 1px solid var(--color-rule, #d8d3cd);\n border-radius: 8px;\n }\n .form-field--stripe .form-field__label { margin-bottom: 12px; }\n #stripe-card-element { min-height: 40px; }<\/p>\n<p> \/* ----- PayPal container ----- *\/\n .paypal-section {\n margin-top: 16px;\n }\n .paypal-section__or {\n text-align: center;\n font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n margin: 24px 0 16px;\n display: flex; align-items: center; gap: 12px;\n }\n .paypal-section__or::before,\n .paypal-section__or::after {\n content: ''; flex: 1; height: 1px;\n background: var(--color-rule, #d8d3cd);\n }\n #paypal-button-container { min-height: 45px; }<\/p>\n<p> \/* ----- [SaaS] Pay Now button (real submit) ----- *\/\n .pay-now {\n margin-top: 32px;\n display: block; width: 100%;\n padding: 18px 32px;\n background: oklch(0.20 0.010 28);\n color: #fff;\n border: none; border-radius: 8px;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 14px; font-weight: 600;\n letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n cursor: pointer;\n transition: background 240ms ease, transform 100ms ease;\n }\n .pay-now:hover { background: oklch(0.42 0.165 27); }\n .pay-now:active { transform: scale(0.99); }\n .pay-now:disabled { background: var(--color-rule, #d8d3cd); cursor: not-allowed; }<\/p>\n<p> .trust-line {\n margin-top: 16px;\n text-align: center;\n font-size: 12px; color: var(--color-ink-soft, #6b625b);\n letter-spacing: var(--ls-body-sm);\n }<\/p>\n<p> \/* ============================================================\n 3. Order Summary (right column, Lumina glass)\n ============================================================ *\/\n .checkout__summary {\n position: relative;\n background: #0a0a0a;\n padding: 64px 48px 96px;\n color: #fff;\n overflow: hidden;\n }\n .checkout__summary::before {\n content: '';\n position: absolute; inset: 0;\n background-image: url('https:\/\/picsum.photos\/seed\/celadon-dark\/1200\/1800.jpg');\n background-size: cover; background-position: center;\n opacity: 0.15;\n pointer-events: none;\n }\n .checkout__summary-inner { position: relative; z-index: 1; }<\/p>\n<p> .order-summary {\n background: var(--glass-bg-prominent);\n background-blend-mode: var(--glass-blend);\n backdrop-filter: var(--glass-blur-md) saturate(140%);\n -webkit-backdrop-filter: var(--glass-blur-md) saturate(140%);\n border: none; border-radius: 12px;\n box-shadow: var(--glass-inset-hi),\n 0 16px 48px rgba(0, 0, 0, 0.35);\n padding: 32px 28px;\n color: #fff;\n position: relative;\n overflow: hidden;\n }\n .order-summary::before {\n content: ''; position: absolute; inset: 0;\n border-radius: inherit; padding: var(--glass-border-w);\n background: linear-gradient(180deg,\n rgba(255,255,255,0.50) 0%,\n rgba(255,255,255,0.18) 20%,\n rgba(255,255,255,0) 40%,\n rgba(255,255,255,0) 60%,\n rgba(255,255,255,0.18) 80%,\n rgba(255,255,255,0.50) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude;\n pointer-events: none;\n }\n .order-summary__inner { position: relative; z-index: 1; }<\/p>\n<p> .order-summary__eyebrow {\n font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n margin: 0 0 8px;\n }\n .order-summary__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 24px; font-weight: 500;\n margin: 0 0 24px; color: #fff;\n letter-spacing: var(--ls-display);\n }\n .order-summary__divider {\n height: 1px; background: rgba(255, 255, 255, 0.15);\n border: none; margin: 20px 0;\n }\n .order-summary__item {\n display: grid; grid-template-columns: 56px 1fr auto;\n gap: 12px; align-items: start;\n margin-bottom: 16px;\n }\n .order-summary__item:last-of-type { margin-bottom: 0; }\n .order-summary__item-img {\n width: 56px; height: 56px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 4px; overflow: hidden;\n }\n .order-summary__item-img img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .order-summary__item-title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 15px; font-weight: 500;\n margin: 0 0 4px; color: #fff;\n letter-spacing: var(--ls-display);\n line-height: 1.3;\n }\n .order-summary__item-meta {\n font-size: 11px; color: rgba(255, 255, 255, 0.6);\n margin: 0; letter-spacing: var(--ls-body-sm);\n }\n .order-summary__item-price {\n font-size: 14px; font-weight: 500;\n color: #fff; margin: 0; letter-spacing: var(--ls-body);\n }\n .order-summary__row {\n display: flex; justify-content: space-between; align-items: baseline;\n margin: 12px 0;\n }\n .order-summary__row--total {\n margin-top: 16px; padding-top: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.15);\n }\n .order-summary__row-label {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: rgba(255, 255, 255, 0.7);\n }\n .order-summary__row-value {\n font-size: 14px; color: #fff; letter-spacing: var(--ls-body);\n }\n .order-summary__row--total .order-summary__row-value {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 28px; font-weight: 500;\n }<\/p>\n<p> \/* ============================================================\n 4. Lumina Footer (14-line CSS verbatim, inherited)\n ============================================================ *\/\n .checkout-footer {\n padding: 32px 24px;\n text-align: center;\n background: oklch(0.97 0.012 90);\n border-top: 1px solid oklch(0.88 0.005 28);\n }\n .checkout-footer p {\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 11px; letter-spacing: var(--ls-body-sm);\n color: var(--color-ink-soft, #6b625b);\n margin: 0;\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><\/p>\n<header class=\"global-header\" data-state=\"top\" id=\"global-header\">\n<div class=\"global-header__inner\">\n <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\n<div class=\"global-header__lang\">\n <button class=\"global-header__lang-btn\" id=\"lang-btn\" type=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"lang-menu\"><br \/>\n <span data-current-lang>EN<\/span><br \/>\n <svg class=\"global-header__lang-caret\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<ul class=\"global-header__lang-menu\" id=\"lang-menu\" role=\"menu\" aria-label=\"Language\">\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"en\" class=\"is-active\">EN<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"zh\">\u4e2d\u6587<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"fr\">FR<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button><\/li>\n<\/ul><\/div>\n<ul class=\"global-header__social\" aria-label=\"Social\">\n<li><a href=\"#\" aria-label=\"Instagram\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"8\" cy=\"8\" r=\"2.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"11.6\" cy=\"4.4\" r=\"0.7\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"WeChat\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"6\" cy=\"7\" rx=\"5\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <ellipse cx=\"11\" cy=\"10\" rx=\"3.5\" ry=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"4.7\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"7.3\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"10.4\" cy=\"9.5\" r=\"0.35\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"Weibo\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"8\" cy=\"8.5\" rx=\"6\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"6\" cy=\"9\" r=\"0.4\" fill=\"currentColor\"\/>\n <circle cx=\"9\" cy=\"8\" r=\"0.4\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<\/ul>\n<div class=\"global-header__icons\">\n <button class=\"global-header__icon-btn\" id=\"search-btn\" type=\"button\" aria-label=\"Search\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M12 12l4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <a href=\"p05-auth.html\" class=\"global-header__icon-link\" aria-label=\"Account\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"6.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M3 16c0-3 3-5 6-5s6 2 6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/a><br \/>\n <button class=\"global-header__icon-btn\" id=\"cart-btn\" type=\"button\" aria-label=\"Cart\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M3 5h2l1.5 8h7l1.5-6H6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <circle cx=\"7.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <circle cx=\"12.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><main id=\"main\"><\/p>\n<section class=\"checkout\" aria-label=\"Checkout\">\n<p> <\/p>\n<div class=\"checkout__form\">\n<p class=\"checkout__eyebrow\">Secure checkout<\/p>\n<h1 class=\"checkout__title\">Complete your acquisition<\/h1>\n<p class=\"checkout__subtitle\">Pay securely with credit card or PayPal. Real-time processing.<\/p>\n<form id=\"checkout-form\" novalidate>\n<p> <\/p>\n<div class=\"form-section\">\n<h2 class=\"form-section__title\">Contact<\/h2>\n<div class=\"form-field\">\n <label class=\"form-field__label\" for=\"email\">Email<\/label><br \/>\n <input class=\"form-field__input\" type=\"email\" id=\"email\" name=\"email\"\n placeholder=\"you@example.com\" autocomplete=\"email\" required>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"form-section\">\n<h2 class=\"form-section__title\">Billing details<\/h2>\n<div class=\"form-field\">\n <label class=\"form-field__label\" for=\"cc-name\">Cardholder name<\/label><br \/>\n <input class=\"form-field__input\" type=\"text\" id=\"cc-name\" name=\"cc_name\"\n placeholder=\"Lorem Ipsum\" autocomplete=\"cc-name\" required>\n <\/div>\n<p> <\/p>\n<div class=\"form-field form-field--stripe\">\n <label class=\"form-field__label\" for=\"stripe-card-element\">Card information<\/label><\/p>\n<div id=\"stripe-card-element\"><\/div>\n<p style=\"font-size: 11px; color: var(--color-ink-soft); margin: 8px 0 0; letter-spacing: var(--ls-body-sm);\">\n Secured by Stripe \u00b7 256-bit TLS \u00b7 PCI-DSS compliant\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"paypal-section\">\n<div class=\"paypal-section__or\">or<\/div>\n<div id=\"paypal-button-container\"><\/div>\n<\/p><\/div>\n<p> <br \/>\n <button class=\"pay-now\" type=\"submit\" id=\"pay-now-btn\"><br \/>\n Pay now \u00b7 USD 1,200<br \/>\n <\/button><\/p>\n<p class=\"trust-line\">\n By placing this order you agree to LLCCRAFT’s Terms of Service and Privacy Policy.\n <\/p>\n<\/p><\/form>\n<\/p><\/div>\n<p> <\/p>\n<aside class=\"checkout__summary\" aria-label=\"Order summary\">\n<div class=\"checkout__summary-inner\">\n<div class=\"order-summary\">\n<div class=\"order-summary__inner\">\n<p class=\"order-summary__eyebrow\">Order Summary<\/p>\n<h2 class=\"order-summary__title\">Your acquisition<\/h2>\n<article class=\"order-summary__item\">\n<div class=\"order-summary__item-img\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/200\/200?random=20\" alt=\"\">\n <\/div>\n<div>\n<p class=\"order-summary__item-title\">Sky-blue Mei vase<\/p>\n<p class=\"order-summary__item-meta\">Size M \u00b7 Moon-white glaze<\/p>\n<\/p><\/div>\n<p class=\"order-summary__item-price\">$1,200<\/p>\n<\/article>\n<article class=\"order-summary__item\">\n<div class=\"order-summary__item-img\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/200\/200?random=66\" alt=\"\">\n <\/div>\n<div>\n<p class=\"order-summary__item-title\">Hand-thrown celadon cup<\/p>\n<p class=\"order-summary__item-meta\">Longquan celadon \u00b7 Qty 2<\/p>\n<\/p><\/div>\n<p class=\"order-summary__item-price\">$840<\/p>\n<\/article>\n<hr class=\"order-summary__divider\" \/>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Subtotal<\/span><br \/>\n <span class=\"order-summary__row-value\">$2,040<\/span>\n <\/div>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Shipping<\/span><br \/>\n <span class=\"order-summary__row-value\">Calculated next<\/span>\n <\/div>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Duties & taxes<\/span><br \/>\n <span class=\"order-summary__row-value\">Calculated next<\/span>\n <\/div>\n<div class=\"order-summary__row order-summary__row--total\">\n <span class=\"order-summary__row-label\">Total<\/span><br \/>\n <span class=\"order-summary__row-value\">$2,040<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/aside>\n<\/section>\n<p><\/main><\/p>\n<footer class=\"checkout-footer\">\n<p>© 2026 LLCCRAFT · <a href=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; border-bottom: 1px solid oklch(0.20 0.010 28);\">Return to home<\/a><\/p>\n<\/footer>\n<p><br \/>\n<script>\n(function () {\n \/* ---------- 1. Global Sticky Header (Phase 3.5 chassis) ---------- *\/\n const header = document.getElementById('global-header');\n if (header) {\n let lastY = 0;\n const onScroll = () => {\n const y = window.scrollY;\n const dir = y > lastY ? 'down' : 'up';\n lastY = y;\n if (y < 80) {\n header.dataset.state = 'top';\n header.classList.remove('is-scrolled-down', 'is-scrolled-up');\n } else {\n header.dataset.state = dir;\n header.classList.toggle('is-scrolled-down', dir === 'down');\n header.classList.toggle('is-scrolled-up', dir === 'up');\n }\n };\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n }\n\n \/* ---------- 2. Lang dropdown ---------- *\/\n const langBtn = document.getElementById('lang-btn');\n const langMenu = document.getElementById('lang-menu');\n if (langBtn && langMenu) {\n const toggle = (open) => {\n const isOpen = open ?? !langMenu.classList.contains('is-open');\n langMenu.classList.toggle('is-open', isOpen);\n langBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n };\n langBtn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });\n langMenu.addEventListener('click', (e) => {\n const item = e.target.closest('[data-lang]');\n if (item) {\n langMenu.querySelectorAll('button').forEach((b) => b.classList.remove('is-active'));\n item.classList.add('is-active');\n const cur = langBtn.querySelector('[data-current-lang]');\n if (cur) cur.textContent = item.textContent;\n toggle(false);\n }\n });\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.global-header__lang')) toggle(false);\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && langMenu.classList.contains('is-open')) {\n toggle(false);\n langBtn.focus();\n }\n });\n }<\/p>\n<p> \/* ---------- 3. Cart icon click (placeholder) ---------- *\/\n const cartBtn = document.getElementById('cart-btn');\n if (cartBtn) {\n cartBtn.addEventListener('click', () => {\n console.log('Cart click \u2014 drawer trigger (P-02 integration point)');\n });\n }<\/p>\n<p> \/* ---------- 4. [SaaS] STRIPE ELEMENTS (real) ----------\n Replace 'pk_test_XXX' with your live publishable key in production. *\/\n if (typeof Stripe !== 'undefined') {\n const stripe = Stripe('pk_test_REPLACE_WITH_YOUR_PUBLISHABLE_KEY');\n const elements = stripe.elements();\n const card = elements.create('card', {\n style: {\n base: {\n fontFamily: '\"Helvetica Regular\", \"Inter\", system-ui, sans-serif',\n fontSize: '15px',\n color: '#2b2622',\n '::placeholder': { color: '#6b625b' },\n },\n invalid: { color: '#a8323f' },\n },\n });\n const cardMount = document.getElementById('stripe-card-element');\n if (cardMount) card.mount('#stripe-card-element');\n window.__stripeCard = card;\n window.__stripe = stripe;\n } else {\n console.warn('[Stripe.js] not loaded \u2014 check network.');\n }<\/p>\n<p> \/* ---------- 5. [SaaS] PAYPAL SDK (real) ----------\n Replace 'sb' sandbox client-id with your live client-id in production. *\/\n if (typeof paypal !== 'undefined') {\n paypal.Buttons({\n style: { layout: 'horizontal', color: 'black', shape: 'pill', label: 'paypal' },\n createOrder: function (data, actions) {\n return actions.order.create({\n purchase_units: [{\n amount: { value: '2040.00', currency_code: 'USD' },\n description: 'LLCCRAFT acquisition',\n }],\n });\n },\n onApprove: function (data, actions) {\n return actions.order.capture().then(function (details) {\n alert('PayPal payment captured \u00b7 order ' + details.id);\n });\n },\n onError: function (err) { console.error('[PayPal]', err); },\n }).render('#paypal-button-container');\n } else {\n console.warn('[PayPal SDK] not loaded \u2014 check network.');\n }<\/p>\n<p> \/* ---------- 6. [SaaS] Pay Now submit (Stripe path) ----------\n POST \/api\/orders with paymentMethodId from Stripe.createPaymentMethod *\/\n const form = document.getElementById('checkout-form');\n const payNowBtn = document.getElementById('pay-now-btn');\n if (form && payNowBtn) {\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n payNowBtn.disabled = true;\n payNowBtn.textContent = 'Processing\u2026';<\/p>\n<p> if (!window.__stripe || !window.__stripeCard) {\n alert('Stripe.js not initialized \u2014 check console.');\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n return;\n }<\/p>\n<p> try {\n const { paymentMethod, error } = await window.__stripe.createPaymentMethod({\n type: 'card',\n card: window.__stripeCard,\n billing_details: {\n name: form['cc_name'].value,\n email: form['email'].value,\n },\n });\n if (error) {\n alert('Stripe error: ' + error.message);\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n return;\n }<\/p>\n<p> \/\/ skeleton : POST \/api\/orders with paymentMethodId\n const res = await fetch('\/api\/orders', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ paymentMethodId: paymentMethod.id, email: form['email'].value }),\n });\n if (res.ok) {\n payNowBtn.textContent = 'Paid \u00b7 order confirmed';\n } else {\n throw new Error('Order API failed');\n }\n } catch (err) {\n console.error('[Pay Now]', err);\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n }\n });\n }\n})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-07 Checkout \u00b7 v0.7.0 SaaS Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Secure checkout Complete your acquisition Pay securely with credit card or PayPal. Real-time processing. Contact Email Billing details Cardholder name Card information Secured by Stripe \u00b7 256-bit TLS \u00b7 PCI-DSS compliant or Pay now \u00b7 USD 1,200 By […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17,"date":"2026-07-08T01:57:02","date_gmt":"2026-07-08T08:57:02","guid":{"rendered":"https:\/\/llccraft.com\/?page_id=17"},"modified":"2026-07-08T01:57:02","modified_gmt":"2026-07-08T08:57:02","slug":"checkout-2","status":"publish","type":"page","link":"https:\/\/llccraft.com\/?page_id=17","title":{"rendered":"Direct Acquisition \u00b7 \u76f4\u63a5\u63a5\u6d3d"},"content":{"rendered":"

\n
\n
\n
\n
\nLLCCRAFT \u00b7 P-07 Checkout \u00b7 v0.7.0 SaaS<\/title><br \/>\n<meta name=\"description\" content=\"LLCCRAFT P-07 Checkout SaaS. v0.7.0. Real-time payment: Stripe Elements CC + PayPal button + Pay Now. Concierge logic removed.\"><\/p>\n<p><\/p>\n<p><br \/>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script><br \/>\n<script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'gallery': 'oklch(0.97 0.012 90)',\n 'ink': 'oklch(0.20 0.010 28)',\n 'ink-soft': 'oklch(0.55 0.008 28)',\n 'rule': 'oklch(0.88 0.005 28)',\n },\n fontFamily: {\n serif: ['\"Cormorant Garamond\"', 'Georgia', 'serif'],\n sans: ['\"Helvetica Regular\"', '\"Inter\"', 'system-ui', 'sans-serif'],\n },\n maxWidth: { 'wide': '1320px' },\n }\n }\n }\n<\/script><\/p>\n<p><br \/>\n<script src=\"https:\/\/js.stripe.com\/v3\/\"><\/script><br \/>\n<br \/>\n<script src=\"https:\/\/www.paypal.com\/sdk\/js?client-id=sb&currency=USD\"><\/script><\/p>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n \/* ============================================================\n [TKN] TOKEN INJECTION (\u6218\u533a\u4e8c\u5168\u5c40\u5e95\u5c42\u6837\u5f0f\u7edf\u4e00)\n \u5168\u7ad9 9 \u6587\u4ef6\u5171\u4eab\u6b64\u7ec4 token \u00b7 letter-spacing + glass opacity\n ============================================================ *\/\n :root {\n \/* Letter-spacing scale (standardized) *\/\n --ls-eyebrow: 0.18em; \/* tags \/ kickers \/ micro-headers *\/\n --ls-tag: 0.18em; \/* tag pills \/ status *\/\n --ls-body-sm: 0.05em; \/* small body \/ meta *\/\n --ls-body: 0.02em; \/* body \/ display *\/\n --ls-display: -0.02em; \/* large display *\/<\/p>\n<p> \/* Lumina glass opacity scale (standardized) *\/\n --glass-bg-faint: rgba(255, 255, 255, 0.01); \/* footer *\/\n --glass-bg-prominent:rgba(255, 255, 255, 0.06); \/* cards \/ panels *\/\n --glass-blend: luminosity;\n --glass-blur-sm: blur(4px);\n --glass-blur-md: blur(20px);\n --glass-blur-lg: blur(40px);\n --glass-border-w: 1.4px;\n --glass-border-c: rgba(255, 255, 255, 0.50);\n --glass-inset-hi: inset 0 1px 1px rgba(255, 255, 255, 0.15);\n }<\/p>\n<p> \/* ---------- F1 : Helvetica Regular @font-face (inherited, ACTIVE) ---------- *\/\n @font-face {\n font-family: \"Helvetica Regular\";\n font-style: normal;\n font-weight: 400;\n font-display: swap;\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot\");\n src: url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.eot?#iefix\")format(\"embedded-opentype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff2\")format(\"woff2\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.woff\")format(\"woff\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.ttf\")format(\"truetype\"),\n url(\"https:\/\/db.onlinewebfonts.com\/t\/a64ff11d2c24584c767f6257e880dc65.svg#Helvetica Regular\")format(\"svg\");\n }<\/p>\n<p> *, *::before, *::after { box-sizing: border-box; }\n html, body { margin: 0; padding: 0; }\n body {\n background: #fff;\n color: var(--color-ink, #2b2622);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, -apple-system, sans-serif;\n font-size: 16px; line-height: 1.5;\n -webkit-font-smoothing: antialiased;\n }<\/p>\n<p> \/* ---------- A11Y ---------- *\/\n .skiplink {\n position: fixed; top: -100px; left: 12px; z-index: 200;\n padding: 8px 24px; background: #000; color: #fff;\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n border-radius: 2px; text-decoration: none; font-weight: 500;\n transition: top 240ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .skiplink:focus { top: 12px; }\n :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }<\/p>\n<p> @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }<\/p>\n<p> \/* ============================================================\n 1. Global Sticky Header (Phase 3.5 chassis \u00b7 no cart badge)\n ============================================================ *\/\n .global-header {\n position: fixed; top: 0; left: 0; right: 0;\n z-index: 100;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: background 320ms ease, backdrop-filter 320ms ease,\n border-color 320ms ease;\n }\n .global-header.is-scrolled-down {\n background: rgba(15, 15, 15, 0.5);\n backdrop-filter: blur(20px) saturate(140%);\n -webkit-backdrop-filter: blur(20px) saturate(140%);\n border-bottom-color: rgba(255, 255, 255, 0.08);\n }\n .global-header.is-scrolled-up {\n background: transparent;\n backdrop-filter: none;\n border-bottom-color: transparent;\n }\n .global-header__inner {\n max-width: 1320px; margin: 0 auto;\n padding: 18px 24px;\n display: flex; align-items: center; justify-content: space-between;\n gap: 32px;\n }\n .global-header__brand {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 22px; font-weight: 500;\n color: #fff; text-decoration: none;\n letter-spacing: var(--ls-display); flex-shrink: 0;\n }\n .global-header__actions { display: flex; align-items: center; gap: 24px; }\n .global-header__lang { position: relative; }\n .global-header__lang-btn {\n display: inline-flex; align-items: center; gap: 4px;\n background: transparent; border: none; padding: 6px 8px;\n color: #fff; cursor: pointer;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n border-radius: 4px; transition: background 200ms ease;\n }\n .global-header__lang-btn:hover { background: rgba(255, 255, 255, 0.08); }\n .global-header__lang-caret { width: 10px; height: 10px; fill: currentColor; }\n .global-header__lang-menu {\n position: absolute; top: calc(100% + 8px); right: 0;\n background: oklch(0.18 0.012 28 \/ 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(255, 255, 255, 0.08);\n border-radius: 4px; padding: 4px 0;\n min-width: 100px; list-style: none; margin: 0;\n opacity: 0; visibility: hidden; transform: translateY(-4px);\n transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;\n z-index: 110;\n }\n .global-header__lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }\n .global-header__lang-menu button {\n display: block; width: 100%; padding: 8px 16px;\n background: transparent; border: none;\n color: rgba(255, 255, 255, 0.7);\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n text-align: left; cursor: pointer;\n transition: background 200ms ease, color 200ms ease;\n }\n .global-header__lang-menu button:hover,\n .global-header__lang-menu button.is-active {\n background: rgba(255, 255, 255, 0.08); color: #fff;\n }\n .global-header__social {\n display: flex; align-items: center; gap: 12px;\n list-style: none; padding: 0; margin: 0;\n }\n .global-header__social a {\n display: flex; align-items: center; justify-content: center;\n width: 28px; height: 28px;\n color: #fff; opacity: 0.7;\n text-decoration: none; transition: opacity 200ms ease;\n }\n .global-header__social a:hover { opacity: 1; }\n .global-header__social svg { width: 16px; height: 16px; fill: currentColor; }\n .global-header__icons { display: flex; align-items: center; gap: 4px; }\n .global-header__icon-btn,\n .global-header__icon-link {\n position: relative;\n display: flex; align-items: center; justify-content: center;\n width: 40px; height: 40px;\n background: transparent; border: none;\n color: #fff; opacity: 0.85;\n text-decoration: none; cursor: pointer; border-radius: 50%;\n transition: opacity 200ms ease, background 200ms ease;\n }\n .global-header__icon-btn:hover,\n .global-header__icon-link:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }\n .global-header__icon-btn svg,\n .global-header__icon-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }<\/p>\n<p> \/* ============================================================\n 2. Checkout layout (60\/40)\n ============================================================ *\/\n .checkout {\n display: grid;\n grid-template-columns: 60% 40%;\n min-height: 100vh;\n padding-top: 96px;\n }\n @media (max-width: 900px) {\n .checkout { grid-template-columns: 1fr; }\n }<\/p>\n<p> .checkout__form {\n background: #fff;\n padding: 64px 64px 96px;\n max-width: 720px;\n }\n @media (max-width: 768px) {\n .checkout__form { padding: 40px 24px 64px; }\n }<\/p>\n<p> .checkout__eyebrow {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n margin: 0 0 12px;\n }\n .checkout__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: clamp(2rem, 3vw, 2.5rem);\n font-weight: 500; line-height: 1.1;\n margin: 0 0 40px; color: var(--color-ink, #2b2622);\n letter-spacing: var(--ls-display);\n }\n .checkout__subtitle {\n font-size: 14px; color: var(--color-ink-soft, #6b625b);\n margin: 0 0 48px; letter-spacing: var(--ls-body);\n }<\/p>\n<p> \/* ----- Form sections ----- *\/\n .form-section { margin-bottom: 36px; }\n .form-section__title {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n font-weight: 500;\n margin: 0 0 16px;\n padding-bottom: 8px;\n border-bottom: 1px solid var(--color-rule, #e1ddd7);\n }\n .form-field { margin-bottom: 16px; }\n .form-field__label {\n display: block;\n font-size: 12px; letter-spacing: var(--ls-body-sm);\n color: var(--color-ink, #2b2622);\n margin-bottom: 6px; font-weight: 500;\n }\n .form-field__input {\n display: block; width: 100%;\n padding: 12px 14px;\n background: #fff;\n color: var(--color-ink, #2b2622);\n border: 1px solid var(--color-rule, #d8d3cd);\n border-radius: 6px;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 14px; letter-spacing: var(--ls-body);\n transition: border-color 200ms ease;\n }\n .form-field__input:focus {\n outline: none;\n border-color: oklch(0.42 0.165 27);\n box-shadow: 0 0 0 3px oklch(0.42 0.165 27 \/ 0.12);\n }\n .form-field__input::placeholder { color: var(--color-ink-soft, #6b625b); }\n .form-field--stripe {\n padding: 16px;\n background: #fafaf8;\n border: 1px solid var(--color-rule, #d8d3cd);\n border-radius: 8px;\n }\n .form-field--stripe .form-field__label { margin-bottom: 12px; }\n #stripe-card-element { min-height: 40px; }<\/p>\n<p> \/* ----- PayPal container ----- *\/\n .paypal-section {\n margin-top: 16px;\n }\n .paypal-section__or {\n text-align: center;\n font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: var(--color-ink-soft, #6b625b);\n margin: 24px 0 16px;\n display: flex; align-items: center; gap: 12px;\n }\n .paypal-section__or::before,\n .paypal-section__or::after {\n content: ''; flex: 1; height: 1px;\n background: var(--color-rule, #d8d3cd);\n }\n #paypal-button-container { min-height: 45px; }<\/p>\n<p> \/* ----- [SaaS] Pay Now button (real submit) ----- *\/\n .pay-now {\n margin-top: 32px;\n display: block; width: 100%;\n padding: 18px 32px;\n background: oklch(0.20 0.010 28);\n color: #fff;\n border: none; border-radius: 8px;\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 14px; font-weight: 600;\n letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n cursor: pointer;\n transition: background 240ms ease, transform 100ms ease;\n }\n .pay-now:hover { background: oklch(0.42 0.165 27); }\n .pay-now:active { transform: scale(0.99); }\n .pay-now:disabled { background: var(--color-rule, #d8d3cd); cursor: not-allowed; }<\/p>\n<p> .trust-line {\n margin-top: 16px;\n text-align: center;\n font-size: 12px; color: var(--color-ink-soft, #6b625b);\n letter-spacing: var(--ls-body-sm);\n }<\/p>\n<p> \/* ============================================================\n 3. Order Summary (right column, Lumina glass)\n ============================================================ *\/\n .checkout__summary {\n position: relative;\n background: #0a0a0a;\n padding: 64px 48px 96px;\n color: #fff;\n overflow: hidden;\n }\n .checkout__summary::before {\n content: '';\n position: absolute; inset: 0;\n background-image: url('https:\/\/picsum.photos\/seed\/celadon-dark\/1200\/1800.jpg');\n background-size: cover; background-position: center;\n opacity: 0.15;\n pointer-events: none;\n }\n .checkout__summary-inner { position: relative; z-index: 1; }<\/p>\n<p> .order-summary {\n background: var(--glass-bg-prominent);\n background-blend-mode: var(--glass-blend);\n backdrop-filter: var(--glass-blur-md) saturate(140%);\n -webkit-backdrop-filter: var(--glass-blur-md) saturate(140%);\n border: none; border-radius: 12px;\n box-shadow: var(--glass-inset-hi),\n 0 16px 48px rgba(0, 0, 0, 0.35);\n padding: 32px 28px;\n color: #fff;\n position: relative;\n overflow: hidden;\n }\n .order-summary::before {\n content: ''; position: absolute; inset: 0;\n border-radius: inherit; padding: var(--glass-border-w);\n background: linear-gradient(180deg,\n rgba(255,255,255,0.50) 0%,\n rgba(255,255,255,0.18) 20%,\n rgba(255,255,255,0) 40%,\n rgba(255,255,255,0) 60%,\n rgba(255,255,255,0.18) 80%,\n rgba(255,255,255,0.50) 100%);\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor; mask-composite: exclude;\n pointer-events: none;\n }\n .order-summary__inner { position: relative; z-index: 1; }<\/p>\n<p> .order-summary__eyebrow {\n font-size: 11px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: rgba(255, 255, 255, 0.6);\n margin: 0 0 8px;\n }\n .order-summary__title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 24px; font-weight: 500;\n margin: 0 0 24px; color: #fff;\n letter-spacing: var(--ls-display);\n }\n .order-summary__divider {\n height: 1px; background: rgba(255, 255, 255, 0.15);\n border: none; margin: 20px 0;\n }\n .order-summary__item {\n display: grid; grid-template-columns: 56px 1fr auto;\n gap: 12px; align-items: start;\n margin-bottom: 16px;\n }\n .order-summary__item:last-of-type { margin-bottom: 0; }\n .order-summary__item-img {\n width: 56px; height: 56px;\n background: rgba(255, 255, 255, 0.1);\n border-radius: 4px; overflow: hidden;\n }\n .order-summary__item-img img {\n width: 100%; height: 100%; object-fit: cover; display: block;\n }\n .order-summary__item-title {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 15px; font-weight: 500;\n margin: 0 0 4px; color: #fff;\n letter-spacing: var(--ls-display);\n line-height: 1.3;\n }\n .order-summary__item-meta {\n font-size: 11px; color: rgba(255, 255, 255, 0.6);\n margin: 0; letter-spacing: var(--ls-body-sm);\n }\n .order-summary__item-price {\n font-size: 14px; font-weight: 500;\n color: #fff; margin: 0; letter-spacing: var(--ls-body);\n }\n .order-summary__row {\n display: flex; justify-content: space-between; align-items: baseline;\n margin: 12px 0;\n }\n .order-summary__row--total {\n margin-top: 16px; padding-top: 16px;\n border-top: 1px solid rgba(255, 255, 255, 0.15);\n }\n .order-summary__row-label {\n font-size: 12px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase;\n color: rgba(255, 255, 255, 0.7);\n }\n .order-summary__row-value {\n font-size: 14px; color: #fff; letter-spacing: var(--ls-body);\n }\n .order-summary__row--total .order-summary__row-value {\n font-family: 'Cormorant Garamond', Georgia, serif;\n font-size: 28px; font-weight: 500;\n }<\/p>\n<p> \/* ============================================================\n 4. Lumina Footer (14-line CSS verbatim, inherited)\n ============================================================ *\/\n .checkout-footer {\n padding: 32px 24px;\n text-align: center;\n background: oklch(0.97 0.012 90);\n border-top: 1px solid oklch(0.88 0.005 28);\n }\n .checkout-footer p {\n font-family: \"Helvetica Regular\", \"Inter\", system-ui, sans-serif;\n font-size: 11px; letter-spacing: var(--ls-body-sm);\n color: var(--color-ink-soft, #6b625b);\n margin: 0;\n }\n<\/style>\n<p><\/head><br \/>\n<body><\/p>\n<p><a href=\"#main\" class=\"skiplink\">Skip to main content<\/a><\/p>\n<p><\/p>\n<header class=\"global-header\" data-state=\"top\" id=\"global-header\">\n<div class=\"global-header__inner\">\n <a href=\"p01-home.html\" class=\"global-header__brand\">LLCCRAFT<\/a><\/p>\n<div class=\"global-header__actions\">\n<div class=\"global-header__lang\">\n <button class=\"global-header__lang-btn\" id=\"lang-btn\" type=\"button\"\n aria-haspopup=\"true\" aria-expanded=\"false\" aria-controls=\"lang-menu\"><br \/>\n <span data-current-lang>EN<\/span><br \/>\n <svg class=\"global-header__lang-caret\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n <path d=\"M2 4l3 3 3-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><\/p>\n<ul class=\"global-header__lang-menu\" id=\"lang-menu\" role=\"menu\" aria-label=\"Language\">\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"en\" class=\"is-active\">EN<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"zh\">\u4e2d\u6587<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"fr\">FR<\/button><\/li>\n<li role=\"none\"><button role=\"menuitem\" data-lang=\"ja\">\u65e5\u672c\u8a9e<\/button><\/li>\n<\/ul><\/div>\n<ul class=\"global-header__social\" aria-label=\"Social\">\n<li><a href=\"#\" aria-label=\"Instagram\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <rect x=\"2\" y=\"2\" width=\"12\" height=\"12\" rx=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"8\" cy=\"8\" r=\"2.6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"11.6\" cy=\"4.4\" r=\"0.7\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"WeChat\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"6\" cy=\"7\" rx=\"5\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <ellipse cx=\"11\" cy=\"10\" rx=\"3.5\" ry=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"4.7\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"7.3\" cy=\"6\" r=\"0.45\" fill=\"currentColor\"\/>\n <circle cx=\"10.4\" cy=\"9.5\" r=\"0.35\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<li><a href=\"#\" aria-label=\"Weibo\"><br \/>\n <svg viewBox=\"0 0 16 16\" aria-hidden=\"true\">\n <ellipse cx=\"8\" cy=\"8.5\" rx=\"6\" ry=\"4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"\/>\n <circle cx=\"6\" cy=\"9\" r=\"0.4\" fill=\"currentColor\"\/>\n <circle cx=\"9\" cy=\"8\" r=\"0.4\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/a><\/li>\n<\/ul>\n<div class=\"global-header__icons\">\n <button class=\"global-header__icon-btn\" id=\"search-btn\" type=\"button\" aria-label=\"Search\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"8\" cy=\"8\" r=\"5.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M12 12l4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/button><br \/>\n <a href=\"p05-auth.html\" class=\"global-header__icon-link\" aria-label=\"Account\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <circle cx=\"9\" cy=\"6.5\" r=\"3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/>\n <path d=\"M3 16c0-3 3-5 6-5s6 2 6 5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/>\n <\/svg><br \/>\n <\/a><br \/>\n <button class=\"global-header__icon-btn\" id=\"cart-btn\" type=\"button\" aria-label=\"Cart\"><br \/>\n <svg viewBox=\"0 0 18 18\" aria-hidden=\"true\">\n <path d=\"M3 5h2l1.5 8h7l1.5-6H6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\/>\n <circle cx=\"7.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <circle cx=\"12.5\" cy=\"15.5\" r=\"1\" fill=\"currentColor\"\/>\n <\/svg><br \/>\n <\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/header>\n<p><main id=\"main\"><\/p>\n<section class=\"checkout\" aria-label=\"Checkout\">\n<p> <\/p>\n<div class=\"checkout__form\">\n<p class=\"checkout__eyebrow\">Secure checkout<\/p>\n<h1 class=\"checkout__title\">Complete your acquisition<\/h1>\n<p class=\"checkout__subtitle\">Pay securely with credit card or PayPal. Real-time processing.<\/p>\n<form id=\"checkout-form\" novalidate>\n<p> <\/p>\n<div class=\"form-section\">\n<h2 class=\"form-section__title\">Contact<\/h2>\n<div class=\"form-field\">\n <label class=\"form-field__label\" for=\"email\">Email<\/label><br \/>\n <input class=\"form-field__input\" type=\"email\" id=\"email\" name=\"email\"\n placeholder=\"you@example.com\" autocomplete=\"email\" required>\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"form-section\">\n<h2 class=\"form-section__title\">Billing details<\/h2>\n<div class=\"form-field\">\n <label class=\"form-field__label\" for=\"cc-name\">Cardholder name<\/label><br \/>\n <input class=\"form-field__input\" type=\"text\" id=\"cc-name\" name=\"cc_name\"\n placeholder=\"Lorem Ipsum\" autocomplete=\"cc-name\" required>\n <\/div>\n<p> <\/p>\n<div class=\"form-field form-field--stripe\">\n <label class=\"form-field__label\" for=\"stripe-card-element\">Card information<\/label><\/p>\n<div id=\"stripe-card-element\"><\/div>\n<p style=\"font-size: 11px; color: var(--color-ink-soft); margin: 8px 0 0; letter-spacing: var(--ls-body-sm);\">\n Secured by Stripe \u00b7 256-bit TLS \u00b7 PCI-DSS compliant\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"paypal-section\">\n<div class=\"paypal-section__or\">or<\/div>\n<div id=\"paypal-button-container\"><\/div>\n<\/p><\/div>\n<p> <br \/>\n <button class=\"pay-now\" type=\"submit\" id=\"pay-now-btn\"><br \/>\n Pay now \u00b7 USD 1,200<br \/>\n <\/button><\/p>\n<p class=\"trust-line\">\n By placing this order you agree to LLCCRAFT’s Terms of Service and Privacy Policy.\n <\/p>\n<\/p><\/form>\n<\/p><\/div>\n<p> <\/p>\n<aside class=\"checkout__summary\" aria-label=\"Order summary\">\n<div class=\"checkout__summary-inner\">\n<div class=\"order-summary\">\n<div class=\"order-summary__inner\">\n<p class=\"order-summary__eyebrow\">Order Summary<\/p>\n<h2 class=\"order-summary__title\">Your acquisition<\/h2>\n<article class=\"order-summary__item\">\n<div class=\"order-summary__item-img\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/200\/200?random=20\" alt=\"\">\n <\/div>\n<div>\n<p class=\"order-summary__item-title\">Sky-blue Mei vase<\/p>\n<p class=\"order-summary__item-meta\">Size M \u00b7 Moon-white glaze<\/p>\n<\/p><\/div>\n<p class=\"order-summary__item-price\">$1,200<\/p>\n<\/article>\n<article class=\"order-summary__item\">\n<div class=\"order-summary__item-img\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/200\/200?random=66\" alt=\"\">\n <\/div>\n<div>\n<p class=\"order-summary__item-title\">Hand-thrown celadon cup<\/p>\n<p class=\"order-summary__item-meta\">Longquan celadon \u00b7 Qty 2<\/p>\n<\/p><\/div>\n<p class=\"order-summary__item-price\">$840<\/p>\n<\/article>\n<hr class=\"order-summary__divider\" \/>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Subtotal<\/span><br \/>\n <span class=\"order-summary__row-value\">$2,040<\/span>\n <\/div>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Shipping<\/span><br \/>\n <span class=\"order-summary__row-value\">Calculated next<\/span>\n <\/div>\n<div class=\"order-summary__row\">\n <span class=\"order-summary__row-label\">Duties & taxes<\/span><br \/>\n <span class=\"order-summary__row-value\">Calculated next<\/span>\n <\/div>\n<div class=\"order-summary__row order-summary__row--total\">\n <span class=\"order-summary__row-label\">Total<\/span><br \/>\n <span class=\"order-summary__row-value\">$2,040<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/aside>\n<\/section>\n<p><\/main><\/p>\n<footer class=\"checkout-footer\">\n<p>© 2026 LLCCRAFT · <a href=\"p01-home.html\" style=\"color: oklch(0.20 0.010 28); text-decoration: none; border-bottom: 1px solid oklch(0.20 0.010 28);\">Return to home<\/a><\/p>\n<\/footer>\n<p><br \/>\n<script>\n(function () {\n \/* ---------- 1. Global Sticky Header (Phase 3.5 chassis) ---------- *\/\n const header = document.getElementById('global-header');\n if (header) {\n let lastY = 0;\n const onScroll = () => {\n const y = window.scrollY;\n const dir = y > lastY ? 'down' : 'up';\n lastY = y;\n if (y < 80) {\n header.dataset.state = 'top';\n header.classList.remove('is-scrolled-down', 'is-scrolled-up');\n } else {\n header.dataset.state = dir;\n header.classList.toggle('is-scrolled-down', dir === 'down');\n header.classList.toggle('is-scrolled-up', dir === 'up');\n }\n };\n window.addEventListener('scroll', onScroll, { passive: true });\n onScroll();\n }\n\n \/* ---------- 2. Lang dropdown ---------- *\/\n const langBtn = document.getElementById('lang-btn');\n const langMenu = document.getElementById('lang-menu');\n if (langBtn && langMenu) {\n const toggle = (open) => {\n const isOpen = open ?? !langMenu.classList.contains('is-open');\n langMenu.classList.toggle('is-open', isOpen);\n langBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n };\n langBtn.addEventListener('click', (e) => { e.stopPropagation(); toggle(); });\n langMenu.addEventListener('click', (e) => {\n const item = e.target.closest('[data-lang]');\n if (item) {\n langMenu.querySelectorAll('button').forEach((b) => b.classList.remove('is-active'));\n item.classList.add('is-active');\n const cur = langBtn.querySelector('[data-current-lang]');\n if (cur) cur.textContent = item.textContent;\n toggle(false);\n }\n });\n document.addEventListener('click', (e) => {\n if (!e.target.closest('.global-header__lang')) toggle(false);\n });\n document.addEventListener('keydown', (e) => {\n if (e.key === 'Escape' && langMenu.classList.contains('is-open')) {\n toggle(false);\n langBtn.focus();\n }\n });\n }<\/p>\n<p> \/* ---------- 3. Cart icon click (placeholder) ---------- *\/\n const cartBtn = document.getElementById('cart-btn');\n if (cartBtn) {\n cartBtn.addEventListener('click', () => {\n console.log('Cart click \u2014 drawer trigger (P-02 integration point)');\n });\n }<\/p>\n<p> \/* ---------- 4. [SaaS] STRIPE ELEMENTS (real) ----------\n Replace 'pk_test_XXX' with your live publishable key in production. *\/\n if (typeof Stripe !== 'undefined') {\n const stripe = Stripe('pk_test_REPLACE_WITH_YOUR_PUBLISHABLE_KEY');\n const elements = stripe.elements();\n const card = elements.create('card', {\n style: {\n base: {\n fontFamily: '\"Helvetica Regular\", \"Inter\", system-ui, sans-serif',\n fontSize: '15px',\n color: '#2b2622',\n '::placeholder': { color: '#6b625b' },\n },\n invalid: { color: '#a8323f' },\n },\n });\n const cardMount = document.getElementById('stripe-card-element');\n if (cardMount) card.mount('#stripe-card-element');\n window.__stripeCard = card;\n window.__stripe = stripe;\n } else {\n console.warn('[Stripe.js] not loaded \u2014 check network.');\n }<\/p>\n<p> \/* ---------- 5. [SaaS] PAYPAL SDK (real) ----------\n Replace 'sb' sandbox client-id with your live client-id in production. *\/\n if (typeof paypal !== 'undefined') {\n paypal.Buttons({\n style: { layout: 'horizontal', color: 'black', shape: 'pill', label: 'paypal' },\n createOrder: function (data, actions) {\n return actions.order.create({\n purchase_units: [{\n amount: { value: '2040.00', currency_code: 'USD' },\n description: 'LLCCRAFT acquisition',\n }],\n });\n },\n onApprove: function (data, actions) {\n return actions.order.capture().then(function (details) {\n alert('PayPal payment captured \u00b7 order ' + details.id);\n });\n },\n onError: function (err) { console.error('[PayPal]', err); },\n }).render('#paypal-button-container');\n } else {\n console.warn('[PayPal SDK] not loaded \u2014 check network.');\n }<\/p>\n<p> \/* ---------- 6. [SaaS] Pay Now submit (Stripe path) ----------\n POST \/api\/orders with paymentMethodId from Stripe.createPaymentMethod *\/\n const form = document.getElementById('checkout-form');\n const payNowBtn = document.getElementById('pay-now-btn');\n if (form && payNowBtn) {\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n payNowBtn.disabled = true;\n payNowBtn.textContent = 'Processing\u2026';<\/p>\n<p> if (!window.__stripe || !window.__stripeCard) {\n alert('Stripe.js not initialized \u2014 check console.');\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n return;\n }<\/p>\n<p> try {\n const { paymentMethod, error } = await window.__stripe.createPaymentMethod({\n type: 'card',\n card: window.__stripeCard,\n billing_details: {\n name: form['cc_name'].value,\n email: form['email'].value,\n },\n });\n if (error) {\n alert('Stripe error: ' + error.message);\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n return;\n }<\/p>\n<p> \/\/ skeleton : POST \/api\/orders with paymentMethodId\n const res = await fetch('\/api\/orders', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json' },\n body: JSON.stringify({ paymentMethodId: paymentMethod.id, email: form['email'].value }),\n });\n if (res.ok) {\n payNowBtn.textContent = 'Paid \u00b7 order confirmed';\n } else {\n throw new Error('Order API failed');\n }\n } catch (err) {\n console.error('[Pay Now]', err);\n payNowBtn.disabled = false;\n payNowBtn.textContent = 'Pay now \u00b7 USD 2,040';\n }\n });\n }\n})();\n<\/script><\/p>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>LLCCRAFT \u00b7 P-07 Checkout \u00b7 v0.7.0 SaaS Skip to main content LLCCRAFT EN EN \u4e2d\u6587 FR \u65e5\u672c\u8a9e Secure checkout Complete your acquisition Pay securely with credit card or PayPal. Real-time processing. Contact Email Billing details Cardholder name Card information Secured by Stripe \u00b7 256-bit TLS \u00b7 PCI-DSS compliant or Pay now \u00b7 USD 1,200 By […]<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17"}],"version-history":[{"count":0,"href":"https:\/\/llccraft.com\/index.php?rest_route=\/wp\/v2\/pages\/17\/revisions"}],"wp:attachment":[{"href":"https:\/\/llccraft.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}