Purpose
ARTSABERS Checkout page. Consumes the Form component spec (MAS52) + the split-shipping delivery model from MAS57 (Shipment Cart). Continues the CRO principles locked on MAS57 — universal metaphor, coupon visible, trust promoted, no BNPL callout, neutral polycarbonate blade rendering, cart persistence, “Good to know” reassurance card.
Single-page checkout with sections stacked in the left column. Sticky right column carries the Order Summary + Good to know cards as a unit (per MAS57’s `.cart-main__right` sticky treatment). Final CTA “Place Order” lives in the sticky Order Summary so it’s always accessible.
Direction
Kyber Hull — apply the direction from SAS1. Reuse the CSS gradient + panel-joint hairline background pattern from MAS51/MAS57. Fieldset border pattern from MAS52 for content-groups. Form primitives verbatim from MAS52 (labels above inputs, ember focus glow, forge-red errors, primary + secondary CTAs). Real ARTSABERS product photography in the order summary. Zero border-radius sitewide.
Metaphor discipline (LOCKED — same as MAS57)
- Page title: Secure Checkout (universal, trust-signalling)
- Shipment groups (in Order Summary): Shipment 1 of 2 / Shipment 2 of 2 — no “Assembly Bay” / “Workshop Bay”
- Final CTA: Place Order →
- Retained brand voice via shipment ledes: “Ships direct from our workshop”
Sections (top to bottom)
1. Compact page header
- ~200-260px. Panel-joint background matching MAS57.
- Breadcrumb:
Home / Cart / Checkout — Checkout is the current page in ember.
- Title in ember accent: Secure Checkout.
- Sub-line body: 3 items · 2 shipments · $832.47 — item count, shipment count, and running total for reassurance.
- Trust chip strip: 24-hour UK dispatch · 30-day money-back · 1-year duelling warranty · 2,400+ five-star reviews.
2. Main checkout — two-column split
Left column: form sections stacked as bordered content-groups (MAS52 fieldset pattern). Each section is a bordered card with legend heading on the top border, generous internal padding, matching the pattern from the cart’s shipment groups.
3. Section: Express payment (top of left column)
- NOT wrapped in a fieldset — sits at top as a distinct compact row before the form begins.
- Small eyebrow: Fastest checkout.
- Three express payment buttons in a horizontal row: Apple Pay (black button) · Google Pay (dark button) · Shop Pay (purple button). Each ~120x48px with the platform’s native brand mark.
- Below the buttons, a horizontal divider with inline text: — or continue with contact + payment below —.
- Note: NO Klarna in the express row. NO BNPL. Not “coming soon” — omitted entirely.
4. Section: Contact information
Bordered content-group (MAS52 fieldset).
- Legend: Contact information.
- Muted sub-line body under legend: “For order confirmation, delivery updates, and post-purchase support.”
- Full-width: Email address — text input, required, help text “Order confirmation and dispatch alerts sent here.”
- Full-width: Phone — text input, required, help text “For dispatch courier updates only.”
- Small subtle “Sign in for faster checkout →” link right-aligned at the bottom of this section, with a body sub “Guest checkout is default — account creation is optional after order.”
5. Section: Delivery address
Bordered content-group. Legend: Delivery address. Muted sub-line: “One address per order. Both shipments arrive here.”
- Two-column: First name / Last name — text inputs, required
- Full-width: Country/Region — searchable select with flag icons, PRE-SELECTED as United Kingdom (default).
- Full-width: Address line 1 — text input, required
- Full-width: Address line 2 — text input, marked OPTIONAL.
- Three-column: Town/City — Postcode — County (or State if US). All required.
- Full-width: Order notes — textarea (~3 rows), marked OPTIONAL, help text “Delivery instructions, buzzer codes, safe places to leave, etc.”
6. Section: Delivery method per shipment
Bordered content-group. Legend: Delivery method. Muted sub-line: “Choose delivery speed for each shipment.”
Two sub-groups within (one per shipment), each with the 3-box delivery radio pattern from MAS57:
Shipment 1 of 2 · Arriving 12–14 August · Ships direct from our workshop after final assembly + hand-testing. (heading + one-line lede in Kyber Hull display type, ember hairline separator)
- 3-radio box group: Standard (selected, FREE) · Express (+$14.99) · Weekend (+$19.99).
Shipment 2 of 2 · Arriving 25 August – 2 September · Assembly begins on payment. Ships direct from our workshop.
- 3-radio box group: Standard (selected, FREE) · Express (+$14.99) · Weekend (+$19.99).
7. Section: Payment method
Bordered content-group. Legend: Payment. Muted sub-line: “Encrypted end-to-end. Card details never touch our servers.”
- Payment method row: radio-tiles — Credit / Debit card (selected, showing Visa · Mastercard · Amex logos inline) · PayPal · Apple Pay. Only ONE method shown expanded (Credit card, per selection).
- Card fields (shown because Credit card is selected):
- Full-width: Card number — text input, required, help text “16 digits from the front of your card”. Small Visa/MC/Amex chip icons inline right of the input signal accepted networks.
- Two-column: Expiry (MM / YY) — Security code (CVC) — both required, help text on CVC: “3 or 4 digits on the back.”
- Full-width: Name on card — text input, required.
- Billing address checkbox: Billing address same as delivery — CHECKED by default. If unchecked, an expanded billing address form appears below. For the mockup, render the CHECKED state (compact).
8. Final CTA + placement
The primary “Place Order →” CTA lives in the sticky Order Summary in the right column, always accessible. NO duplicate CTA at the bottom of the left column — one primary action point only, always visible on scroll.
9. Small legal / consent block (below payment section)
- Muted body copy: “By placing your order, you agree to our Terms of Service and Privacy Policy. We’ll email your order confirmation and dispatch updates to the address above.”
- Optional checkbox (unchecked): “Subscribe to occasional updates about new hilts, community events, and duelling grade drops.”
Right column — sticky Order Summary + Good to know (both cards)
MATCH the sticky treatment from MAS57 exactly. Wrap both cards inside .cart-main__right and put position: sticky; top: 24px; align-self: start; on the container. Both cards scroll together as a unit; when the container’s top edge reaches viewport top, the whole right column sticks. Info card sits directly below Order Summary; sticky behaviour is on the wrapping column, not on individual cards.
Order Summary card — enriched for checkout
Bordered content-group (MAS52 fieldset). Legend: Order Summary. Enriched with per-line-item detail so the customer can verify at commit-time.
Line items block: compact WC composite parent + child rows. Same shape as cart but scaled down for the summary column. Real ARTSABERS product photography.
- PARENT: Carbon Strike Lightsaber — Xenopixel V3 · 60×60 thumbnail · qty ×1 · $459.99 · image
https://artsabers.com/wp-content/uploads/sites/10/2026/01/Carbon_Strike_1-768x768.jpg. CHILD: 36×36 neutral polycarbonate blade slot (chrome-warm silhouette, no colour tint — matching MAS57’s neutral treatment) · component text “Blade — 36″ · Neopixel” · NO qty, NO price, NO actions.
- PARENT: Starkiller SE Lightsaber — Proffie 2.2 · thumbnail · ×1 · $299.99 · image
https://artsabers.com/wp-content/uploads/sites/10/2025/12/Starkiller1_SE_1-768x768.jpg. CHILD: neutral blade slot · “Blade — 32″ · Neopixel”.
- PARENT: Mace Windu SE Duelling Lightsaber — S-RGB · thumbnail · ×1 · $164.99 · image
https://artsabers.com/wp-content/uploads/sites/10/2025/12/Mace_Windu_SE_1-768x768.jpg. CHILD: neutral blade slot · “Blade — 32″ · Baselit”.
Free gift item (pinned inline as a mini-row after paid items): ember-hairline framed compact row with 36×36 image, small GIFT pill, “Silver Lightsaber Coupler · Ships with Shipment 1”, muted “Free” label right-aligned. Image URL https://nerdworks.uk/wp-content/uploads/2025/08/Silver-coupler-2-1-768x768.jpg.
Hairline separator.
Cost table:
- Subtotal · $924.97
- Shipment 1 shipping · FREE
- Shipment 2 shipping · FREE
- Discount (SAVE10) · -$92.50
- Tax · $0.00 (or “shown at checkout” if not calculable) — for the mockup show “Included at checkout” as the label since ARTSABERS covers duties
Hairline separator.
Estimated total row (largest ember): $832.47.
Loyalty earn line (small): +240 points on this order.
Hairline separator.
Loyalty redemption teaser (same block as MAS57): “LOYALTY POINTS · COMING SOON” tag + “2,400 points available · $24 value” + “Redeem toward your next order once live.”
Hairline separator.
Coupon field VISIBLE: labelled “Discount code” input + inline Apply secondary button + applied chip “SAVE10 · -$92.50 · Remove”. Same shape as MAS57.
Hairline separator.
Trust row directly above CTA — three chips: SSL Secure Checkout · Free Returns 30-day money-back · 1-year warranty Duelling grade covered. Same shape as MAS57.
Primary CTA — full-width, ember gradient: Place Order →.
Small line below CTA: By placing your order you agree to our Terms + Privacy Policy. (Ember Terms + Privacy Policy links).
Payment method icons row: Visa · Mastercard · Amex · Apple Pay · Google Pay · Shop Pay. Compact, subdued. NO Klarna. NO BNPL callout.
Good to know card — same as MAS57 verbatim
Bordered content-group directly below Order Summary. Legend: Good to know. Five items with ember icon chips + bold uppercase titles + one-line bodies. Copy VERBATIM from MAS57:
- Same-day UK dispatch — “Orders placed before 2pm UK Mon–Fri dispatch the same day.”
- Duties + taxes paid by us — “We cover all import duties + local taxes. No surprise charges at delivery, wherever you are.”
- 30-day money-back guarantee — “Not what you expected? Return within 30 days for a full refund.”
- UK-based customer service — “Real people, real answers. 24-hour response, 7 days a week.”
- 6 currencies at checkout — “Prices shown in your local currency. GBP · USD · EUR · CAD · AUD · NZD.”
Post-checkout reinforcement band
Same as MAS51/MAS57: plain carbon + ember hairline top + dot-separated brand line “Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews”.
Site footer
Same as MAS51/MAS57.
Form primitive spec (VERBATIM from MAS52)
Every form input, checkbox, radio, select, textarea in the left column uses the Form component patterns established in MAS52:
- Labels ABOVE inputs, uppercase display font, letter-spaced, chrome-warm colour
- Required asterisk in ember, small superscript after label
- OPTIONAL tag in muted uppercase display after label for non-required fields
- Input background:
--bg-input (dark hull-panel-lift)
- Focus: ember hairline glow border + subtle ember box-shadow (NOT blue browser default)
- Error state:
--forge-red: #E63929 hairline border + inline error text
- Help text: small muted body font, below input
- Zero border-radius on all inputs, buttons, radios, checkboxes
- Country picker: searchable select with flag emoji inline
- Delivery radio boxes: 3-column grid, ember-selected treatment identical to MAS57
- Payment radio tiles: horizontal row with logo + label per tile, ember-selected treatment
- Textarea: same border treatment as text inputs, resizable
- Checkbox: ember tick, chrome-warm label alongside
Reuse from prior mockups
- Compact page header + trust chip strip — MAS51/MAS57
- Panel-joint hairline background — MAS51/MAS57
- Fieldset border content-group + legend on top border — MAS52
- Form primitives (labels, inputs, textarea, select, checkbox, radio, primary CTA, secondary link) — MAS52 verbatim
- WC composite parent+child row grammar — MAS57
- Neutral polycarbonate blade slot — MAS57 (no colour tint, chrome-warm silhouette)
- Delivery 3-box radio group — MAS57 verbatim
- Coupon visible field with applied chip — MAS57
- Trust row above CTA — MAS57 (SSL + Free Returns + Warranty)
- Sticky right column with Order Summary + Good to know — MAS57
- Loyalty coming-soon teaser — MAS57
- Good to know info card — MAS57 verbatim (same 5 items, same copy)
- Post-cart reinforcement band + site footer — MAS51/MAS57
What this template deliberately does NOT include
- NO progress indicator / step counter — single-page layout, no numbered steps
- NO BNPL / Klarna anywhere — omitted entirely (not “coming soon”)
- NO cross-sell strip — cart owns cross-sells; checkout is commit-mode
- NO free gift picker on checkout — pre-selected on cart, displayed as pinned inline item in Order Summary
- NO expanded gift-wrap textarea — feature moves to a “gift options” section in a future iteration
- NO duplicate CTA at bottom of left column — one primary action lives in the sticky Order Summary
- NO “Assembly Bay” or “Workshop Bay” language — universal “Shipment N of M” throughout
Placeholder customer data for the mockup
Contact + delivery form fields should be shown with plausible placeholder or example values so the pattern reads:
- Email: filled state —
alex@example.com
- Phone: filled state —
+44 20 7946 0958
- First name:
Alex
- Last name:
Doe
- Country: United Kingdom (selected)
- Address line 1:
42 Rebel Yard
- Address line 2: empty (OPTIONAL demonstrated)
- Town/City:
London
- Postcode:
SW1A 2AA
- County:
Greater London
- Order notes: empty (OPTIONAL demonstrated, help text visible)
- Card fields: partial numbers shown to demonstrate — e.g. “•••• •••• •••• 4242” style masking or empty with placeholder
- Card expiry / CVC / Name on card: empty with placeholder text
- Billing address same as delivery: CHECKED
Neutral placeholder names, not Star Wars easter eggs. This is the checkout mockup — reads as generic realistic customer, not fandom.
Copy locks (verbatim)
- Page title: Secure Checkout
- Sub-line: 3 items · 2 shipments · $832.47
- Trust chip strip: 24-hour UK dispatch · 30-day money-back · 1-year duelling warranty · 2,400+ five-star reviews
- Express payment eyebrow: Fastest checkout
- Express payment divider text: — or continue with contact + payment below —
- Contact section legend: Contact information · sub “For order confirmation, delivery updates, and post-purchase support.”
- Contact email help: “Order confirmation and dispatch alerts sent here.”
- Contact phone help: “For dispatch courier updates only.”
- Guest checkout note: “Guest checkout is default — account creation is optional after order.” + “Sign in for faster checkout →”
- Delivery address legend: Delivery address · sub “One address per order. Both shipments arrive here.”
- Order notes help: “Delivery instructions, buzzer codes, safe places to leave, etc.”
- Delivery method legend: Delivery method · sub “Choose delivery speed for each shipment.”
- Payment legend: Payment · sub “Encrypted end-to-end. Card details never touch our servers.”
- Card number help: “16 digits from the front of your card.”
- CVC help: “3 or 4 digits on the back.”
- Billing address checkbox: Billing address same as delivery
- Legal consent: “By placing your order, you agree to our Terms of Service and Privacy Policy. We’ll email your order confirmation and dispatch updates to the address above.”
- Marketing opt-in: “Subscribe to occasional updates about new hilts, community events, and duelling grade drops.”
- Primary CTA: Place Order →
- Trust row (in sticky summary): Secure checkout · Free returns · Duelling grade covered
- Good to know card legend + 5 items: VERBATIM from MAS57
- Post-checkout reinforcement: Every hilt hand-tested in-house · Global 7–10 day delivery · 2,400+ five-star reviews
Kyber Hull styling notes
- Ember accent on: primary CTA, focus glows on inputs, selected radio dots + tiles, prices, “FREE” labels, hairline dividers, required asterisks
- Forge-red (#E63929 — from MAS52) reserved for error states (invalid card, etc.) — do not render errors in the primary mockup, but keep the pattern available
- Zero border-radius everywhere
- Neutral polycarbonate blade slot: chrome-warm silhouette on carbon ground, NO colour tinting
- Panel-joint hairline background pattern under everything