Checkout Flow

This is the entire template — edit it live in the editor, or paste it into any .wiremark file.

wiremarkUI
  header H "Checkout"

  page CART "Cart" {
    H

    section "Your cart" {
      table "Items" {
        columns "Product", "Qty", "Price", "Total"
        row "Widget Pro", "2", "$49.00", "$98.00"
        row "Add-on Pack", "1", "$19.00", "$19.00"
      }
      card "Order Summary" {
        text "Subtotal: $117.00"
        text "Shipping: $8.00"
        text "Tax: $10.53"
        button "Proceed to checkout" primary
      }
    }
  }

  page CHECKOUT "Checkout" {
    H

    split {
      section "Shipping & Payment" {
        form "Shipping address" {
          input "Full name"
          input "Address line 1"
          input "City"
          select "Country"
          input "Postal code"
        }
        form "Payment" {
          input "Card number"
          input "Expiry date"
          input "CVV"
        }
        button "Place order" primary
      }
      card "Order Summary" {
        text "Widget Pro × 2  $98.00"
        text "Add-on Pack × 1  $19.00"
        text "Shipping  $8.00"
        text "Total  $127.53"
      }
    }
  }

  CART --> CHECKOUT