Checkout Funnel Optimization — The Technical Fixes That Recover Revenue

// Track each checkout step granularly
const CHECKOUT_STEPS = [
  "cart_viewed",
  "checkout_initiated",
  "email_entered",
  "shipping_address_entered",
  "shipping_method_selected",
  "payment_info_entered",
  "order_review_viewed",
  "order_submitted",
  "order_confirmed",
] as const;
 
function trackCheckoutStep(step: string, metadata?: Record<string, unknown>) {
  analytics.track(step, {
    ...metadata,
    timestamp: Date.now(),
    sessionId: getSessionId(),
    cartValue: getCartTotal(),
    itemCount: getCartItemCount(),
    device: getDeviceType(),
    paymentMethod: getSelectedPaymentMethod(),
  });
}

// Prefetch checkout page when user views cart
// Next.js: use <Link prefetch>
import Link from "next/link";
 
const CartPage = () => (
  <div>
    {/* Prefetches /checkout on hover or viewport entry */}
    <Link href="/checkout" prefetch>
      <button className="checkout-button">Proceed to Checkout</button>
    </Link>
  </div>
);
 
// For SPAs: preload checkout data when cart opens
useEffect(() => {
  if (cartIsOpen) {
    // Preload shipping rates and payment methods
    prefetchShippingRates(cartItems);
    prefetchPaymentMethods();
  }
}, [cartIsOpen]);

// Google Places autocomplete for address entry
const AddressForm = () => {
  const handlePlaceSelect = (place: google.maps.places.PlaceResult) => {
    // Auto-fill all fields from one selection
    setAddress({
      street: extractComponent(place, "street_number", "route"),
      city: extractComponent(place, "locality"),
      state: extractComponent(place, "administrative_area_level_1"),
      zip: extractComponent(place, "postal_code"),
      country: extractComponent(place, "country"),
    });
  };
 
  return (
    <div>
      <AddressAutocomplete onSelect={handlePlaceSelect} />
      {/* Show individual fields pre-filled, editable */}
      <input value={address.street} onChange={...} />
      <input value={address.city} onChange={...} />
      {/* ... */}
    </div>
  );
};

async function processPayment(paymentData: PaymentInput) {
  try {
    const result = await stripe.paymentIntents.confirm(paymentData.intentId);
    return { success: true, orderId: result.metadata.orderId };
  } catch (error) {
    // Map Stripe error codes to helpful user messages
    const userMessage = getPaymentErrorMessage(error);
    
    return {
      success: false,
      error: userMessage,
      recoveryAction: getRecoveryAction(error),
    };
  }
}
 
function getPaymentErrorMessage(error: Stripe.Error): string {
  switch (error.code) {
    case "card_declined":
      return "Your card was declined. Please try a different card or contact your bank.";
    case "insufficient_funds":
      return "Insufficient funds. Try a different card or reduce your order.";
    case "expired_card":
      return "This card has expired. Please use a different card.";
    case "incorrect_cvc":
      return "The security code is incorrect. Please check and try again.";
    case "processing_error":
      return "A processing error occurred. Your card was not charged. Please try again.";
    default:
      return "We couldn't process your payment. Please try a different payment method.";
  }
}
 
function getRecoveryAction(error: Stripe.Error): RecoveryAction {
  switch (error.code) {
    case "card_declined":
    case "insufficient_funds":
    case "expired_card":
      return { type: "show_alternative_payment", methods: ["apple_pay", "paypal"] };
    case "incorrect_cvc":
      return { type: "highlight_field", field: "cvc" };
    default:
      return { type: "retry" };
  }
}

// Offer express checkout above the fold
const CheckoutPage = () => (
  <div>
    {/* Express options first — no form required */}
    <div className="express-checkout">
      <ShopPayButton cartId={cart.id} />
      <ApplePayButton amount={cart.total} />
      <GooglePayButton amount={cart.total} />
    </div>
 
    <Divider text="Or continue with details" />
 
    {/* Traditional form below */}
    <CheckoutForm />
  </div>
);

// Save cart server-side, associated with email or device ID
async function saveCart(cartData: Cart, identifier: string) {
  await redis.set(`cart:${identifier}`, JSON.stringify(cartData), "EX", 60 * 60 * 24 * 30);
}
 
// Restore on return visit
async function restoreCart(identifier: string): Promise<Cart | null> {
  const saved = await redis.get(`cart:${identifier}`);
  if (!saved) return null;
  
  const cart = JSON.parse(saved);
  
  // Validate items are still available and prices haven't changed
  const validated = await validateCartItems(cart.items);
  if (validated.hasChanges) {
    // Notify user of changes (don't silently change their cart)
    cart.notifications = validated.changes;
  }
  
  return cart;
}