Simplify checkout flow and payment options

- Combine shipping and contact info into single step
- Remove BTC Onchain and Cashu payment options (Lightning only for now)
- Add collapsible section for optional contact info (email, npub, address)
- Keep shipping address visible when required for physical delivery
- Keep message to merchant visible by default
- Add TODO comment for future payment method expansion

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/modules/market/views/CheckoutPage.vue

@@ -108,15 +108,17 @@
         </CardContent>
       </Card>
 
-      <!-- Shipping Information -->
+      <!-- Shipping & Contact Information -->
-      <Card v-if="!orderConfirmed">
+      <Card>
         <CardHeader>
-          <CardTitle>Shipping Information</CardTitle>
+          <CardTitle>Shipping & Contact</CardTitle>
-          <CardDescription>Select your shipping zone</CardDescription>
+          <CardDescription>Select shipping and provide your contact details</CardDescription>
         </CardHeader>
-        <CardContent>
+        <CardContent class="space-y-6">
           <!-- Shipping Zones -->
-          <div v-if="availableShippingZones.length > 0" class="space-y-3">
+          <div v-if="availableShippingZones.length > 0">
+            <Label class="mb-3 block">Shipping Zone</Label>
+            <div class="space-y-3">
               <div
                 v-for="zone in availableShippingZones"
                 :key="zone.id"
@@ -150,76 +152,29 @@
                 </div>
               </div>
             </div>
+          </div>
 
-          <div v-else class="text-center py-6">
+          <div v-else class="text-center py-4 bg-muted/50 rounded-lg">
             <p class="text-muted-foreground">This merchant hasn't configured shipping zones yet.</p>
             <p class="text-sm text-muted-foreground">Please contact the merchant for shipping information.</p>
           </div>
 
-          <!-- Confirm Order Button -->
+          <!-- Separator -->
-          <div class="mt-6">
+          <div class="border-t border-border" />
-            <Button 
-              @click="confirmOrder"
-              :disabled="availableShippingZones.length > 0 && !selectedShippingZone"
-              class="w-full"
-              size="lg"
-            >
-              Confirm Order
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
 
-      <!-- Contact & Payment Information -->
+          <!-- Shipping Address (shown when required for physical delivery) -->
-      <Card v-if="orderConfirmed">
+          <div v-if="requiresShippingAddress">
-        <CardHeader>
+            <Label for="address">Shipping Address *</Label>
-          <CardTitle>Contact & Payment Information</CardTitle>
-          <CardDescription>Provide your details for order processing</CardDescription>
-        </CardHeader>
-        <CardContent class="space-y-6">
-          <!-- Contact Form -->
-          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <div>
-              <Label for="email">Email (optional)</Label>
-              <Input 
-                id="email"
-                v-model="contactData.email"
-                type="email"
-                placeholder="your@email.com"
-              />
-              <p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
-            </div>
-            
-            <div>
-              <Label for="npub">Alternative Npub (optional)</Label>
-              <Input 
-                id="npub"
-                v-model="contactData.npub"
-                placeholder="npub..."
-              />
-              <p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
-            </div>
-          </div>
-
-          <div>
-            <Label for="address">
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false ? 'Shipping Address' : 'Contact Address (optional)' }}
-            </Label>
             <Textarea
               id="address"
               v-model="contactData.address"
-              :placeholder="selectedShippingZone?.requiresPhysicalShipping !== false 
+              placeholder="Full shipping address..."
-                ? 'Full shipping address...' 
-                : 'Contact address (optional)...'"
               rows="3"
             />
-            <p class="text-xs text-muted-foreground mt-1">
+            <p class="text-xs text-muted-foreground mt-1">Required for physical delivery</p>
-              {{ selectedShippingZone?.requiresPhysicalShipping !== false 
-                ? 'Required for physical delivery' 
-                : 'Optional for digital items or pickup' }}
-            </p>
           </div>
 
+          <!-- Message to Merchant (visible) -->
           <div>
             <Label for="message">Message to Merchant (optional)</Label>
             <Textarea
@@ -230,40 +185,72 @@
             />
           </div>
 
-          <!-- Payment Method Selection -->
+          <!-- Optional Contact Info (collapsible) -->
+          <Collapsible v-model:open="showOptionalContact">
+            <CollapsibleTrigger class="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer w-full">
+              <ChevronDown
+                class="w-4 h-4 transition-transform"
+                :class="{ 'rotate-180': showOptionalContact }"
+              />
+              <span>Additional contact info (optional)</span>
+            </CollapsibleTrigger>
+            <CollapsibleContent class="pt-4 space-y-4">
+              <!-- Contact Address (optional for digital/pickup) -->
+              <div v-if="!requiresShippingAddress">
+                <Label for="address">Contact Address</Label>
+                <Textarea
+                  id="address"
+                  v-model="contactData.address"
+                  placeholder="Contact address (optional)..."
+                  rows="3"
+                />
+                <p class="text-xs text-muted-foreground mt-1">Optional for digital items or pickup</p>
+              </div>
+
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
-            <Label>Payment Method</Label>
+                  <Label for="email">Email</Label>
-            <div class="flex gap-3 mt-2">
+                  <Input
-              <div 
+                    id="email"
-                v-for="method in paymentMethods"
+                    v-model="contactData.email"
-                :key="method.value"
+                    type="email"
-                @click="paymentMethod = method.value"
+                    placeholder="your@email.com"
-                :class="[
+                  />
-                  'p-3 border rounded-lg cursor-pointer text-center flex-1 transition-colors',
+                  <p class="text-xs text-muted-foreground mt-1">Merchant may not use email</p>
-                  paymentMethod === method.value 
+                </div>
-                    ? 'border-primary bg-primary/10' 
+
-                    : 'border-border hover:border-primary/50'
+                <div>
-                ]"
+                  <Label for="npub">Alternative Npub</Label>
-              >
+                  <Input
-                <p class="font-medium">{{ method.label }}</p>
+                    id="npub"
+                    v-model="contactData.npub"
+                    placeholder="npub..."
+                  />
+                  <p class="text-xs text-muted-foreground mt-1">Different Npub for communication</p>
                 </div>
               </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          <!-- Payment Method (Lightning only for now) -->
+          <div class="flex items-center gap-2 text-sm text-muted-foreground">
+            <span>⚡</span>
+            <span>Payment via Lightning Network</span>
           </div>
 
           <!-- Place Order Button -->
           <div class="pt-4 border-t border-border">
             <Button
               @click="placeOrder"
-              :disabled="isPlacingOrder || (selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address)"
+              :disabled="isPlacingOrder || !canPlaceOrder"
               class="w-full"
               size="lg"
             >
               <span v-if="isPlacingOrder" class="animate-spin mr-2">⚡</span>
               Place Order - {{ formatPrice(orderTotal, checkoutCart.currency) }}
             </Button>
-            <p v-if="selectedShippingZone?.requiresPhysicalShipping !== false && !contactData.address" 
+            <p v-if="!canPlaceOrder" class="text-xs text-destructive mt-2 text-center">
-               class="text-xs text-destructive mt-2 text-center">
+              {{ orderValidationMessage }}
-              Shipping address is required for physical delivery
             </p>
           </div>
         </CardContent>
@@ -293,8 +280,14 @@ import { Label } from '@/components/ui/label'
 import ProgressiveImage from '@/components/ui/image/ProgressiveImage.vue'
 import {
   Package,
-  CheckCircle
+  CheckCircle,
+  ChevronDown
 } from 'lucide-vue-next'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible'
 
 const route = useRoute()
 const marketStore = useMarketStore()
@@ -303,11 +296,10 @@ const authService = injectService(SERVICE_TOKENS.AUTH_SERVICE) as any
 // State
 const isLoading = ref(true)
 const error = ref<string | null>(null)
-const orderConfirmed = ref(false)
 const orderPlaced = ref(false)
 const isPlacingOrder = ref(false)
 const selectedShippingZone = ref<any>(null)
-const paymentMethod = ref('ln')
+const showOptionalContact = ref(false)
 
 // Form data
 const contactData = ref({
@@ -317,12 +309,7 @@ const contactData = ref({
   message: ''
 })
 
-// Payment methods
+// TODO: Add BTC Onchain and Cashu payment options in the future
-const paymentMethods = [
-  { label: 'Lightning Network', value: 'ln' },
-  { label: 'BTC Onchain', value: 'btc' },
-  { label: 'Cashu', value: 'cashu' }
-]
 
 // Computed
 const stallId = computed(() => route.params.stallId as string)
@@ -383,26 +370,41 @@ const availableShippingZones = computed(() => {
   })
 })
 
+// Determine if shipping address is required
+const requiresShippingAddress = computed(() => {
+  return selectedShippingZone.value?.requiresPhysicalShipping !== false
+})
+
+// Validation for placing order
+const canPlaceOrder = computed(() => {
+  // Must select shipping zone if zones are available
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return false
+  }
+  // Must provide address if physical shipping is required
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return false
+  }
+  return true
+})
+
+const orderValidationMessage = computed(() => {
+  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
+    return 'Please select a shipping zone'
+  }
+  if (requiresShippingAddress.value && !contactData.value.address) {
+    return 'Shipping address is required for physical delivery'
+  }
+  return ''
+})
+
 // Methods
 const selectShippingZone = (zone: any) => {
   selectedShippingZone.value = zone
 }
 
-const confirmOrder = () => {
-  // Allow proceeding if no shipping zones are available (e.g., for digital goods)
-  if (availableShippingZones.value.length > 0 && !selectedShippingZone.value) {
-    error.value = 'Please select a shipping zone'
-    return
-  }
-  orderConfirmed.value = true
-}
-
 const placeOrder = async () => {
-  // Only require shipping address if selected zone requires physical shipping
+  if (!canPlaceOrder.value) {
-  const requiresShippingAddress = selectedShippingZone.value?.requiresPhysicalShipping !== false
-  
-  if (requiresShippingAddress && !contactData.value.address) {
-    error.value = 'Shipping address is required for this delivery method'
     return
   }
 
@@ -464,7 +466,7 @@ const placeOrder = async () => {
         currency: checkoutCart.value.currency,
         requiresPhysicalShipping: false
       },
-      paymentMethod: paymentMethod.value === 'ln' ? 'lightning' as const : 'btc_onchain' as const,
+      paymentMethod: 'lightning' as const,
       subtotal: orderSubtotal.value,
       shippingCost: selectedShippingZone.value?.cost || 0,
       total: orderTotal.value,