← ARTSABERS

ARTSABERS — Checkout Build Brief

BBAS16 Build Brief ARTSABERS

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.

  1. 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.
  2. 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”.
  3. 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:

  1. Same-day UK dispatch — “Orders placed before 2pm UK Mon–Fri dispatch the same day.”
  2. Duties + taxes paid by us — “We cover all import duties + local taxes. No surprise charges at delivery, wherever you are.”
  3. 30-day money-back guarantee — “Not what you expected? Return within 30 days for a full refund.”
  4. UK-based customer service — “Real people, real answers. 24-hour response, 7 days a week.”
  5. 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